Bootstrap

Bootstrap
Tutorial 7
Sukwon Oh
soh@cs.toronto.edu
What is
Bootstrap?
▶ Bootstrap is the most popular framework for quickly styling your website.
▶ Bootstrap lets us skip writing CSS and focus instead on HTML.
What is Bootstrap?
CSS Components
▶ Grid system ▶ Glyphicons
▶ Typography ▶ Navbar
▶ Forms ▶ Pagination
▶ Buttons ▶ Thumbnails
▶ Responsive utilities ▶ ...
▶ ...
What is
Bootstrap?
Using
Bootstrap
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
.Container
▶ Responsively add margins, center, and wrap your content.

.Container
▶ Example
.Container
▶ Example
margin margin
GridSystem
▶ Bootstrap divides a page into a grid of 12 columns and multiple rows for
easier positioning of elements.
▶ Grid system is responsive and columns will rearrange automatically depending
on the screen size.
GridSystem
GridSystem -
Basics
▶ Place columns inside <div class="row"></div> for each row.
▶ Set each column width using class prefixes:
▶ .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*
Example
Create a row of columns of width 3, 4, and 5.

GridSystem - Multiple
Devices
▶ Sometimes columns are stacked vertically on smaller screens
▶ Use col-xs-*, col-sm-*, col-md-* together to set different column widths for
different screen sizes
Example
Allow 2 columns in a row for mobile, 3 for desktop
On Desktop:
On Mobile:
GridSystem – Column
Resets
Sometimes at breakpoints, columns may be aligned in wrong places.
Problem: Correct Output:

Resets
Fix
▶ .clearfix clears float CSS attribute

▶ visible-xs is one of many responsive utilities
▶ clearfix is applied to only mobile devices (visible-xs)
Resets
Fix
Go to next line
Responsive utilities
GridSystem -
Offsetting
▶ col-xs-offset-*
▶ col-sm-offset-*
▶ col-md-offset-*
▶ col-lg-offset-*
Example
GridSystem – Nested columns
Nested columns add up to its parent or less

Typography - Headings
Supports <h1> to <h6>, same as HTML

Typography -
Alignment
Typography –
Addresses
append <br> to preserve formatting

Typography -
Description
Typography – Horizontal Description
Notice truncation for “Felis euismod semp…”

Glyphicons
▶ Bootstrap comes with 200 icons to use, named “glyphicons”

Glyphicon
Syntax
▶ Syntax
▶ Examples
Resizing
Glyphicons
▶ Glyphicons are text!!!
▶ To resize glyphicons, simply increase its font size in CSS!
▶ Example
▶ Output
Forms
▶ Automatically applies some global styling with Bootstrap.

▶ Examples
Forms
▶ Layouts supported by Bootstrap

▶ Vertical Form
▶ Horizontal Form
▶ Inline Form
▶ Tips on using forms with Bootstrap

▶ <form role=“form”> Improves accessibility
▶ <div class=“form-group”> Improves spacing of form elements
▶ .form-control Give width of 100% to text form elements
Forms – Vertical
Layout
Forms – Horizontal
Layout
Forms – Inline
Layout
Forms -
Controls
Supports HTML form elements
▶ <input>
▶ <textarea>
▶ <input type=“checkbox”>
▶ <input type=“radio”>
▶ <select>
▶ …
Forms – Validation
states
▶ Bootstrap allows you to give validation status to your form elements.
▶ Bootstrap supports
▶ .has-warning
▶ .has-error
▶ .has-success
▶ Example
Validation States -
Input
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>

Validation states with
Icons
Pagination
▶ 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
Pager
Simpler version with “Previous” or “Next” buttons
You can also align buttons using .previous and .next

Navigation & Navigation
Bars
▶ Navigation (nav)
▶ Navigation Bar (navbar)

Navigation
(nav)
▶ Use unordered list and give .nav class attribute.
▶ Example
Makes navigation inline

.nav
Modifie
rs
Right aligned
Navigation Bar
(.navbar)
▶ Creates a visible bar with navigation elements.
▶ Example
.navbar
Modifiers
and others …
There are still many more to
learn!
▶ Go over http://getbootstrap.com/getting-started/#examples
▶ Playground for bootstrap http://www.bootply.com/

Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

▶ Add following to your <head> to enable touch zooming.

▶ width=device-width: sets width of page to screen width of the device

▶ Responsively add margins, center, and wrap your content.

Create a row of columns of width 3, 4, and 5.

Allow 2 columns in a row for mobile, 3 for desktop

Problem: Correct Output:

▶ .clearfix clears float CSS attribute

Nested columns add up to its parent or less

Supports <h1> to <h6>, same as HTML

append <br> to preserve formatting

Notice truncation for “Felis euismod semp…”

▶ Bootstrap comes with 200 icons to use, named “glyphicons”

▶ Automatically applies some global styling with Bootstrap.

▶ Layouts supported by Bootstrap

▶ Tips on using forms with Bootstrap

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

Simply add pagination class to ul element. <ul class="pagination">

You can also align buttons using .previous and .next

▶ Navigation Bar (navbar)

Makes navigation inline

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.