Transcription
BootstrapTutorial 7Sukwon Ohsoh@cs.toronto.edu
What is Bootstrap?u Bootstrap is the most popular framework for quickly styling your website.u Bootstrap lets us skip writing CSS and focus instead on HTML.
What is Bootstrap?CSSComponentsu Grid systemu Glyphiconsu Typographyu Navbaru Formsu Paginationu Buttonsu Thumbnailsu Responsive utilitiesu .u .
What is Bootstrap?
Using Bootstrap
Using Bootstrap
Mobile Friendlyu u Bootstrap 3 is mobile friendly by default.u Responsive to screen size (assignment 1)u Touch screen zoomingAdd following to your head to enable touch zooming.u width device-width: sets width of page to screen width of the deviceu initial-scale 1: sets initial zoom level when the page is first loaded
.Containeru Responsively add margins, center, and wrap your content.
.Containeru Example
.Containeru Examplemarginmargin
Grid Systemu Bootstrap divides a page into a grid of 12 columns and multiple rows foreasier positioning of elements.u Grid system is responsive and columns will rearrange automatically dependingon the screen size.
Grid System
Grid System - Basics div class "row" /div u Place columns insideu Set each column width using class prefixes:u .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*for each row.
ExampleCreate a row of columns of width 3, 4, and 5.
Grid System - Multiple Devicesu Sometimes columns are stacked vertically on smaller screensu Use col-xs-*, col-sm-*, col-md-* together to set different column widths fordifferent screen sizes
ExampleAllow 2 columns in a row for mobile, 3 for desktopOn Desktop:On Mobile:
Grid System – Column ResetsSometimes at breakpoints, columns may be aligned in wrong places.Problem:Correct Output:
Grid System – Column ResetsFixu .clearfix clears float CSS attributeu visible-xs is one of many responsive utilitiesu clearfix is applied to only mobile devices (visible-xs)
Grid System – Column ResetsFixGo to next line
Responsive utilities
Grid System - Offsettingu col-xs-offset-*u col-sm-offset-*u col-md-offset-*u col-lg-offset-*
Example
Grid System – Nested columnsNested columns add up to its parent or less
Typography - HeadingsSupports h1 to h6 , same as HTML
Typography - Alignment
Typography – Addressesappend br to preserve formatting
Typography - Description
Typography – Horizontal DescriptionNotice truncation for “Felis euismod semp ”
Glyphiconsu Bootstrap comes with 200 icons to use, named “glyphicons”
Glyphicon Syntaxu Syntaxu Examples
Resizing Glyphiconsu Glyphicons are text!!!u To resize glyphicons, simply increase its font size in CSS!u Exampleu Output
Formsu Automatically applies some global styling with Bootstrap.u Examples
Formsu u Layouts supported by Bootstrapu Vertical Formu Horizontal Formu Inline FormTips on using forms with Bootstrapu form role “form” Improves accessibilityu div class “form-group” Improves spacing of form elementsu .form-controlGive width of 100% to text form elements
Forms – Vertical Layout
Forms – Horizontal Layout
Forms – Inline Layout
Forms - ControlsSupports HTML form elementsu input u textarea u input type “checkbox” u input type “radio” u select u
Forms – Validation statesu Bootstrap allows you to give validation status to your form elements.u Bootstrap supportsu u .has-warningu .has-erroru .has-successExample
Validation States - Input
Forms – Validation states with iconsTo add feedback icons1. add has-feedback class to parent2. insert span specifying glyphicon for the control’s feedback span class "glyphicon glyphicon-ok form-control-feedback" /span
Validation states with Icons
Paginationu You can use Bootstrap to divide your website into pages.Simply add pagination class to ul element. ul class "pagination" Each page is a list of href element.e.g. li a href "#" 1 /a /li Use pagination-lg or pagination-sm to size page button sizes
Example - Pagination
PagerSimpler version with “Previous” or “Next” buttonsYou can also align buttons using .previous and .next
Navigation & Navigation Barsu Navigation (nav)u Navigation Bar (navbar)
Navigation (nav)u Use unordered list and give .nav class attribute.u ExampleMakes navigation inline
.nav ModifiersRight aligned
Navigation Bar (.navbar)u Creates a visible bar with navigation elements.u Example
.navbar Modifiersand others
There are still many more to learn!u Go over http://getbootstrap.com/getting-started/#examplesu Playground for bootstrap http://www.bootply.com/
Using Bootstrap. Mobile Friendly. Bootstrap 3 is mobile friendly by default. Responsive to screen size (assignment 1) Touch screen zooming. Add following to your head to enable touch zooming. width device-width: sets width of page to screen width of the device. initial-scale 1: sets initial zoom level when the page is first loaded.File Size: 1MBPage Count: 51People also search forbootstrap guide pdfbootstrap manual pdfbootstrap 4 tutorialsbootstrap 5 downloadbootstrap class listbootstrap pdf book
