Bootstrap Tutorial
•
1 like•553 views
Bootstrap is a mobile-first front-end framework that provides responsive grid and layout options. It uses CSS media queries to apply different styling for extra small, small, medium, and large devices. Bootstrap can be added to a Rails application by including bootstrap-sass and twitter-bootstrap-rails gems, generating a layout, and modifying application files to include Bootstrap CSS and JavaScript. The document also provides information on disabling responsiveness, changing tooltips, adding tags, and references.
Recommended
More Related Content
Similar to Bootstrap Tutorial
Similar to Bootstrap Tutorial (20)
Recently uploaded
Recently uploaded (20)
Bootstrap Tutorial
- 1. 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 the viewport meta tag to your <head>: <meta name="viewport" content="width=device-width, initial-scale=1"> ★ You can disable zooming capabilities on mobile devices by adding user-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 .containerfor each grid tier with a single width, for example width: 970px !important; Be sure that this comes
- 2. 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 breakpointsfor 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.
- 3. 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.jsto add Bootstrap’s Javascript files 3. add the file app/assets/stylesheets/framework_and_overrides.css.scssto add Bootstrap’s CSS files 4. modify the file app/views/layouts/application.html.erbto 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
- 4. $ 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 accessthe 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