Embed Size (px)
Citation preview
Bootstrap http://getbootstrap.com
★ Bootstrap is “mobile first”
- "Mobile First", meaning that almost everything has been redesigned to start
from a lower screen size and scale up (more on that in a bit).
- With Bootstrap 2, it added optional mobile friendly styles for key aspects of
the framework.
- With Bootstrap 3, it have rewritten the project to be mobile friendly from the
start. Instead of adding on optional mobile styles, they're baked right into the
core. In fact, Bootstrap is mobile first. Mobile first styles can be found
throughout the entire library instead of in separate files.
★ To ensure proper rendering and touch zooming, add theviewport metatag to your
<head>: <meta name="viewport" content="width=device-width, initial-scale=1">
★ You can disable zooming capabilities on mobile devices by addinguser-scalable=no
to the viewport meta tag. This disables zooming, meaning users are only able to
scroll, and results in your site feeling a bit more like a native application. Overall,
we don't recommend this on every site, so use caution!
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
★ Disabling responsiveness:
- Bootstrap automatically adapts your pages for various screen sizes.
- Steps to disable page responsiveness
1. Omit the viewport <meta> mentioned in above.
2. Override the width on the .container for each grid tier with a single
width, for example width: 970px !important; Be sure that this comes
after the default Bootstrap CSS. You can optionally avoid the !important
with media queries.
3. If using navbars, remove all navbar collapsing and expanding behavior.
4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the
medium/large ones. Don't worry, the extra-small device grid scales to all
resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and
need to be processed). This disables the "mobile site" aspects of Bootstrap.
★ Media queries:
Bootstrap has clearly defined breakpoints for different kinds of devices, specified by
using CSS media queries. The following are the breakpoint categories used for the
different types of devices:
1. Extra Small Devices (e.g. cell phones) are the default, creating the “mobile first”
concept in Bootstrap. This covers devices smaller than 768px wide.
2. “Small Devices” (e.g. tablets) are targeted with:
@media (min-width: 768px) and (max-width: 991px) { ... }
3. Medium Sized Devices (e.g. Desktops) have a screen size smaller than 1200px
and greater than 991px, targeted using:
@media (min-width: 992px) and (max-width: 1199px) { ... }.
4. Larger Devices (e.g. wide-screen monitors) are greater than 1200px, targeted
using:
@media (min-width: 1200px) { ... }
★ Responsive utilities:
- For faster mobile-friendly development, use these utility classes for showing
and hiding content by device via media query. Also included are utility classes
for toggling content when printed.
- Use a single or combination of the available classes for toggling content across
viewport breakpoints.
Extra small devices
Phones (<768px) Small devices
Tablets (≥768px) Medium devices
Desktops (≥992px) Large devices
Desktops (≥1200px)
.visible-xs-* Visible Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden
.visible-lg-* Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden
★ Steps to apply Bootstrap to a Rails application:
1. add a gem to the Gemfile
2. modify the file app/assets/javascripts/application.js to add Bootstrap’s
Javascript files
3. add the file app/assets/stylesheets/framework_and_overrides.css.scss to
add Bootstrap’s CSS files
4. modify the file app/views/layouts/application.html.erb to change the
application layout
gem 'bootstrap-sass', '~> 3.2.0'
gem 'twitter-bootstrap-rails'
gem 'sass-rails', '~> 3.2.3' (out assets group)
group :development do
gem 'rails_layout'
end
$ bundle install
$ rails generate layout:install bootstrap3
In app/assets/application.css.scss:
@import "bootstrap-sprockets";
@import "bootstrap";
In app/assets/application.js:
//= require jquery
//= require bootstrap-sprockets
Do not use //= require in Sass or your other stylesheets will not be able to access the
Bootstrap mixins or variables.
★ Others
- Change title of tooltip:
$(this).tooltip('hide').attr('data-original-title', 'new text') .tooltip('show');
- Tag inputs:
http://timschlechter.github.io/bootstrap-tagsinput/examples/
★ References:
http://getbootstrap.com/getting-started/#disable-responsive
http://getbootstrap.com/css/#responsive-utilities
https://github.com/twbs/bootstrap-sass
https://github.com/RailsApps/rails_layout
★ Developer: Nguyễn Thành Luân
![[BOOK] [Bootstrap] [Awesome] Bootstrap-Programming-Cookbook](https://img.pdfslide.us/doc/110x75/577ca6bf1a28abea748c023f/book-bootstrap-awesome-bootstrap-programming-cookbook.jpg)
