Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a...
Transcript of Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a...
![Page 2: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/2.jpg)
![Page 3: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/3.jpg)
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.
![Page 4: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/4.jpg)
What is Bootstrap?
CSS
u Grid system
u Typography
u Forms
u Buttons
u Responsive utilities
u ...
Components
u Glyphicons
u Navbar
u Pagination
u Thumbnails
u ...
![Page 5: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/5.jpg)
What is Bootstrap?
![Page 6: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/6.jpg)
Using Bootstrap
![Page 7: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/7.jpg)
Using Bootstrap
![Page 8: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/8.jpg)
Mobile Friendly
u Bootstrap 3 is mobile friendly by default.
u Responsive to screen size (assignment 1)
u Touch screen zooming
u Add following to your <head> to enable touch zooming.
u width=device-width: sets width of page to screen width of the device
u initial-scale=1: sets initial zoom level when the page is first loaded
![Page 9: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/9.jpg)
.Container
u Responsively add margins, center, and wrap your content.
![Page 10: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/10.jpg)
.Container
u Example
![Page 11: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/11.jpg)
.Container
u Example
margin margin
![Page 12: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/12.jpg)
Grid System
u Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.
u Grid system is responsive and columns will rearrange automatically depending on the screen size.
![Page 13: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/13.jpg)
Grid System
![Page 14: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/14.jpg)
Grid System - Basics
u Place columns inside for each row.
u Set each column width using class prefixes:
u .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*
<div class="row"></div>
![Page 15: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/15.jpg)
Example
Create a row of columns of width 3, 4, and 5.
![Page 16: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/16.jpg)
Grid System - Multiple Devices
u Sometimes columns are stacked vertically on smaller screens
u Use col-xs-*, col-sm-*, col-md-* together to set different column widths for different screen sizes
![Page 17: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/17.jpg)
Example
Allow 2 columns in a row for mobile, 3 for desktop
On Desktop:
On Mobile:
![Page 18: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/18.jpg)
Grid System – Column Resets
Sometimes at breakpoints, columns may be aligned in wrong places.
Problem: Correct Output:
![Page 19: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/19.jpg)
Grid System – Column Resets
Fix
u .clearfix clears float CSS attribute
u visible-xs is one of many responsive utilities
u clearfix is applied to only mobile devices (visible-xs)
![Page 20: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/20.jpg)
Grid System – Column Resets
Fix
Go to next line
![Page 21: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/21.jpg)
Responsive utilities
![Page 22: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/22.jpg)
Grid System - Offsetting
u col-xs-offset-*
u col-sm-offset-*
u col-md-offset-*
u col-lg-offset-*
![Page 23: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/23.jpg)
Example
![Page 24: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/24.jpg)
Grid System – Nested columns
Nested columns add up to its parent or less
![Page 25: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/25.jpg)
Typography - Headings
Supports <h1> to <h6>, same as HTML
![Page 26: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/26.jpg)
Typography - Alignment
![Page 27: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/27.jpg)
Typography – Addresses
append <br> to preserve formatting
![Page 28: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/28.jpg)
Typography - Description
![Page 29: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/29.jpg)
Typography – Horizontal Description
Notice truncation for “Felis euismod semp…”
![Page 30: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/30.jpg)
Glyphicons
u Bootstrap comes with 200 icons to use, named “glyphicons”
![Page 31: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/31.jpg)
Glyphicon Syntax
u Syntax
u Examples
![Page 32: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/32.jpg)
Resizing Glyphicons
u Glyphicons are text!!!
u To resize glyphicons, simply increase its font size in CSS!
u Example
u Output
![Page 33: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/33.jpg)
Forms
u Automatically applies some global styling with Bootstrap.
u Examples
![Page 34: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/34.jpg)
Forms
u Layouts supported by Bootstrap
u Vertical Form
u Horizontal Form
u Inline Form
u Tips on using forms with Bootstrap
u <form role=“form”> Improves accessibility
u <div class=“form-group”> Improves spacing of form elements
u .form-control Give width of 100% to text form elements
![Page 35: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/35.jpg)
Forms – Vertical Layout
![Page 36: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/36.jpg)
Forms – Horizontal Layout
![Page 37: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/37.jpg)
Forms – Inline Layout
![Page 38: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/38.jpg)
Forms - Controls
Supports HTML form elements
u <input>
u <textarea>
u <input type=“checkbox”>
u <input type=“radio”>
u <select>
u …
![Page 39: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/39.jpg)
Forms – Validation states
u Bootstrap allows you to give validation status to your form elements.
u Bootstrap supports
u .has-warning
u .has-error
u .has-success
u Example
![Page 40: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/40.jpg)
Validation States - Input
![Page 41: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/41.jpg)
Forms – Validation states with icons
To add feedback icons
1. add has-feedback class to parent
2. insert <span> specifying glyphicon for the control’s feedback
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
![Page 42: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/42.jpg)
Validation states with Icons
![Page 43: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/43.jpg)
Pagination
u You can use Bootstrap to divide your website into pages.
Simply add pagination class to ul element.
Each page is a list of href element.
Use pagination-lg or pagination-sm to size page button sizes
e.g. <li><a href="#">1</a></li>
<ul class="pagination">
![Page 44: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/44.jpg)
Example - Pagination
![Page 45: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/45.jpg)
Pager
Simpler version with “Previous” or “Next” buttons
You can also align buttons using .previous and .next
![Page 46: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/46.jpg)
Navigation & Navigation Bars
u Navigation (nav)
u Navigation Bar (navbar)
![Page 47: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/47.jpg)
Navigation (nav)
u Use unordered list and give .nav class attribute.
u Example
Makes navigation inline
![Page 48: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/48.jpg)
.nav Modifiers
Right aligned
![Page 49: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/49.jpg)
Navigation Bar (.navbar)
u Creates a visible bar with navigation elements.
u Example
![Page 50: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/50.jpg)
.navbar Modifiers
and others …
![Page 51: Bootstrap - University of Torontomashiyat/csc309/Tutorial/6/Bootstrap.pdf · Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements.](https://reader031.fdocuments.in/reader031/viewer/2022030300/5b21876c7f8b9ae21a8b4572/html5/thumbnails/51.jpg)
There are still many more to learn!
u Go over http://getbootstrap.com/getting-started/#examples
u Playground for bootstrap http://www.bootply.com/