SlideShare a Scribd company logo

Bootstrap Tutorial

•
•
Luan Nguyen
Luan Nguyen

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.

Related slideshows

Reboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in researchReboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in research
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Responsive website design
Responsive website designResponsive website design
Responsive website design
 
1 of 4
Download to read offline
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 ​.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

More Related Content

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 ​.container​for 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 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.
  • 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.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
  • 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 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