| OBJECTIVE |
|---|
| To become familiar with the conceptual elements (grid, navs, navbar, ...) of Bootstrap, and use those tools to design a responsive page layout. |
Outline:
- layouts:
- The Responsive Grid
- How it's different v2 vs. v3
- Mobile First UX design
- Containers and Rows,
- 12 column grid
- media types
- media queries
- xs, sm, md, lg => (phone, tablet, medium laptop and large laptop )
- default stacking practice 1
- mixing media types to get dynamic features
- offsets margins
- Elements
- header for navbar, navs
- jumbotron
- buttons
- media-lists
- dropdowns/dropups, labels
- Forms
- input groups
Released in 2011,
- Meant to encourage standards, consistency, low-maintenance
What are some different options over Bootstrap,
Foundation, Semantic UI
| terms | def |
|---|---|
| row | |
| 12 Divisibility | |
| elastic |
One the most important components in the layout beyond the base container is the row. Each row has a 12 column divisibility.
Note how twelve can be easily divied into 1/2's, 1/3's, and 1/4's.
What's the point? In Bootstrap v2, this grid was elastic, and would have stylistic breaks when something shrunk smaller than a tablet.
Bootstrap v3 does away with this spotty grid in favor of mobile first UX design.
You design at the mobile level first and then design toward tablets and desktops.
Bootstrap's competitors already supported this, which prompted their switch.
To help handle the different media devices there are four column size class variations.
| type | pixel size |
|---|---|
col-xs-* |
Phones (<768px) |
col-sm-* |
Tablets (≥768px) |
col-md-* |
Desktops (≥992px) |
col-lg-* |
Desktops (≥1200px) |
If you use the .col-xs-* class that style will be maintained for all media types larger than 768px, BECAUSE OF MOBILE FIRST DESIGN.
Bootstrap also lets you concatenate these different media groups on a single element, which creates a more dynamic control of the design.
Add this to your Gemfile
group :assets do
….
gem 'bootstrap-sass-rails'
end
In your application.js add (after jQuery)
//= require twitter/bootstrap
In your application.css.scss put after your requires
@import "twitter/bootstrap";