Creating customization with JS framework: Bootstrap Author: Juan Davila If it's not responsive, user's are more likely to overlook it, and move on.

Bootstrap is a front-end framework, that utilizes CSS. Basically, a large stylesheet with a lot of rules. JavaScript comes with custom jQuery plugins. Lastly, The magic happens with conventions with structured html with class in the right place. 1. Bootstrap is a front-end framework. 2. A large style sheet with of rules. 3. Coordinates with jQuery. 4. Conventions and Semantics are important.

Requirements <script src="Scripts/jquery-1.8.3.js"/> Bootstrap.css <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra p/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra p/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstra p/3.3.4/js/bootstrap.min.js"></script> <script src="Scripts/jquery-1.8.3.js"/> <script src="bootstrap/js/bootstrap.js/> Source: http://getbootstrap.com/getting-started/

Where to customize and how? Visit http://getbootstrap.com/customize/. http://lesscss.org/ https://www.npmjs.com/package/npm Less can be used created as .json config file.

Demo Visual Studio has a nuget package for bootstrap that can be used to install bootstrap, if you want more customization create the .Less file on the bootstrap and modify from there. Can modify/override the bootstrap styles.  Can use the F12 editor to locate the style to modify the site.css file for bootstrap. Make sure site.css is included in the html page, just after the bootstrap.css. Directly extract bootstrap in to project directory. CSS and IMG folders need to be on the same level, works because it references relevant URLs. Best to place them in the layout views, so that it goes into every page.

Managing dependencies Bower bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

Javascript can be use to check states Data-toggle Active at the end of button attributes Uses jQuery event delegate, uses the on method, the button state is set until after the click event  fires. The "button" for example will have active class btn btn-primary active.

Basic Setup Download the Bootstrap Reference the correct dependencies that may be needed. Modify any custom styles in the site.css, and included in the head element. IMPORTANT NOTE: Operates on 12 column grid layout

To be aware of what? Advantages Disadvantages Good for developing for responsive UI design. A lot of documentation is provided. Reusable by utilizing semantic class names. Convention(within a class that creates something like magic.) Difficult to differentiate from other websites that use bootstrap. Class names are not specific about implementation Will not accept 3rd party JavaScript libraries. PAGINATION or JUMBOTRON are good examples of conventions.

Information http://getbootstrap.com/2.3.2/ Sources: http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) http://www.pluralsight.com/training/Player?author=scott-allen&name=bootstrap-m1-introduction&clip=4&course=bootstrap-introduction http://lesscss.org/ https://www.npmjs.com/ http://www.w3schools.com/bootstrap/default.asp