This document discusses responsive design with Bootstrap. It introduces Bootstrap as an open-source front-end framework that allows developers to create responsive websites. It highlights new features in Bootstrap 3.1.1 like a mobile-first approach and support for different screen resolutions. The document also explains the Bootstrap grid system which uses rows and columns to layout responsive content. It provides an example of the grid system and discusses other Bootstrap components like glyphs, buttons, and JavaScript plugins.
2. INTRODUCTION
• Bootstrap is an Open-Source front-end Frame-work.
• Bootstrap 3.1.1 is the current version of bootstrap
• It is for creating responsive websites and web applications.
• It contains HTML and CSS-based design templates for typography, forms, buttons,
navigation and other interface components, as well as optional
JavaScript extensions.
• It is the No.1 project on Github with 65,000+ stars and 23,800 forks (as of March
2014)(http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)).
• Bootstrap Official Address (http://getbootstrap.com/ ).
3. What’s new in Bootstrap 3.1.1 ?
Mobile-first approach
Single (responsive) grid system
Dropping support for IE7 and FF 3.6
Now supporting IE8 and higher
Font icons
4. What is Responsive Design ?
The design that works properly on any resolution .
It majorly concerns with standard devices resolutions.
User friendly approach.
5. Bootstrap standard devices resolution?
Extra small devices i.e Phones (<768px),Symbol (-xs-),column
width(Auto).
Small devices i.e Tablets (≥768px),Symbol (-sm-),column
width(60px).
Medium devices i.e Desktop (≥992px),Symbol (-md-),column
width(78px).
Large devices i.e Desktop (≥1200px),Symbol (-lg-),column width(95px).
6. What is the most important thing to
understand in Bootstrap?
Grid System
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales
up to 12 columns as the device or viewport size increases. It includes predefined
classes for easy layout options.
Grid systems are used for creating page layouts through a series of rows and columns
that house your content.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint
sizes, and override grid classes targeted at smaller devices. Therefore, applying any -
md- class to an element will not only affect its styling on medium devices but also on
large devices if a -lg- class is not present.
8. Bootstrap Glyphicons :
These are SVG , scalable vectors graphics .
Around 200 icons are available for free with bootstrap.
How to use
For performance reasons, all icons require a base class and individual icon
class. To use, place the following code just about anywhere. Be sure to
leave a space between the icon and text for proper padding.
<div> <span class="glyphicon glyphicon-search"></span> </div>
9. For more Bootstrap Glyph-icons, visit :
http://getbootstrap.com/components/#glyphicons
10. Bootstrap other components :
Dropdown
Button Group
Navigations
Pagination
Thumbnails
Alerts
Progress Bars
Panels … etc.
for all components visit(http://getbootstrap.com/components/)
11. Bootstrap CSS:
Tables
Forms
Buttons
Images
Helper Classes .. etc.
for more (http://getbootstrap.com/css/).
12. Bootstrap JavaScript:
Bootstrap all JavaScript components require jQuery. These are :
Modals
Dropdown
Popover
Alert
Collapse
Carousal
Tool tip .. etc.
for more visit (http://getbootstrap.com/javascript/).