TAKE YOUR SITE FROM UGH TO OOH WITH …

[Pages:34]TAKE YOUR SITE FROM UGH TO OOH WITH BOOTSTRAP

Philip Japikse (@skimedic) skimedic@ blog

Microsoft MVP, ASPInsider, MCSD, MCDBA, CSM, CSP Consultant, Coach, Trainer

Phil.About()

Consultant, Coach, Author, Teacher () ()

Microsoft MVP, ASPInsider, MCSD, MCDBA, CSM, CSP Founder, Agile Conferences, Inc.

President, Cincinnati .NET User's Group

The Cincinnati Day of Agile/Cincy.Develop()

? The annual Cincinnati Day of Agile builds on successful events from past years to present a conference to both introduce those new to Agile and encourage stimulating conversation for those more advanced in the subject.

? Event takes place Friday, July 28, 2017 in West Chester, OH ? Sponsors

? If you are interested in sponsoring, please contact Phil at admin@ for more information.

? Mailing List

? If you would like to be added to our mailing list, please email us at admin@ with subscribe as the subject.

WHAT IS BOOTSTRAP?

OPEN SOURCE HTML, CSS, AND JAVASCRIPT F/W Helps to make responsive, device independent sites Designed for all skill levels, from developers to designers Theme-able ? large collection of free and apy themes that plug right in Awesomely documented Available at

"Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries."

GETTING BOOTSTRAP

Download from here: Compiled & Minified LESS Source Sass Source

CDN at maxcdn.

bower ? bower install bootstrap

npm ? npm install bootstrap

composer ? composer require twbs/bootstrap

NuGet ? Install-Package bootstrap Version 3.3.5

BOOTLINT Checks for errors in BootStrap

implementation

Available here: npm install ?g bootlint Or use CDN

(function () { var s = document .createElement("script"); s.onload = function () { bootlint

.showLintReportForCurrentDocument([] );

}; s.src = " tlint/latest/bootlint.min.js";

document.body.appendChild(s) })();

THE BARE MINIMUM

HTML5 DocType Viewport meta tag

Enables proper rendering and touch zooming

Disable zooming: maximum-scale=1, userscalable=no

Bootstrap.min.css JQuery-2.x.min.js Bootstrap.min.js

Bootstrap Template

Hello, world!

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download