Notes from the MVA video tutorial course "Building Responsive UI with Bootstrap"
The Microsoft Virtual Academy course Building Responsive UI with Bootstrap covers the framework from the perspective of a ASP.NET MVC developer.
Summary of points:
+ The Bootstrap framework simplifies building web pages with a responsive layout (by scaling for differing device resolutions and sizes.
+ A big part of Bootstrap functionality involves controlling features through HTML class names & CSS
+ Bootstrap works on a grid system. The grid has 12 columns
+ The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts. Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
+ Any library used in conjunction Bootstrap may break it if it has classes similar to those used by Bootstrap. A workaround is to prefix an unique alphabet character to Bootstrap classes (like Yelp does)
+ Visual Studio offers great support for building web pages with Bootstrap -
- Class IntelliSense
- Web Essentials Visual Studio Extension offers missing class detection
- Bootstrap Snippet Pack is a Visual Studio extension which provides a collection of Twitter Bootstrap snippets for Visual Studio
- With Browser Link it is possible to inspect & edit rendered HTML within Dev Tools & have the changes reflect in the source code.
- Ctrl K + S shortcut in Visual Studio can sorround highlighted text within a tag
- To enable Visual Studio's IntelliSense for the Bootstrap and jQuery JavaScript files:
~ Add a new script file named _references.js to the Scripts folder
~ Drag and drop the Bootstrap and jQuery JavaScript files to the new script file
+ Lots of jQuery UI functionality is covered by Bootstrap. Accordion, Carousel, Modal Dialogs can be setup without using JavaScript
+ Bootstrap clutters up HTML with class names. LESS tackles the problem of interpreting HTML when multiple CSS classes are applied
+ Bootply is an online editor integrated with other popular Bootstrap plugins, micro-libraries and frameworks offering a visual drag-and-drop interface builder for rapid prototyping
+ Websites referenced in the course:
- bootstrapbundle.com
- getbootstrap.com
- sidewaffle.com
- bootswatch.com
- bootsnipp.com
Summary of points:
+ The Bootstrap framework simplifies building web pages with a responsive layout (by scaling for differing device resolutions and sizes.
+ A big part of Bootstrap functionality involves controlling features through HTML class names & CSS
+ Bootstrap works on a grid system. The grid has 12 columns
+ The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts. Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
+ Visual Studio offers great support for building web pages with Bootstrap -
- Class IntelliSense
- With Browser Link it is possible to inspect & edit rendered HTML within Dev Tools & have the changes reflect in the source code.
- Ctrl K + S shortcut in Visual Studio can sorround highlighted text within a tag
- To enable Visual Studio's IntelliSense for the Bootstrap and jQuery JavaScript files:
~ Add a new script file named _references.js to the Scripts folder
~ Drag and drop the Bootstrap and jQuery JavaScript files to the new script file
+ Lots of jQuery UI functionality is covered by Bootstrap. Accordion, Carousel, Modal Dialogs can be setup without using JavaScript
+ Bootstrap clutters up HTML with class names. LESS tackles the problem of interpreting HTML when multiple CSS classes are applied
+ Bootply is an online editor integrated with other popular Bootstrap plugins, micro-libraries and frameworks offering a visual drag-and-drop interface builder for rapid prototyping
+ Websites referenced in the course:
- bootstrapbundle.com
- getbootstrap.com
- sidewaffle.com
- bootswatch.com
- bootsnipp.com
Comments
Post a Comment