Scribd
Upload
14 views51 pages

Bootstrap

Uploaded by

Ruchita chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views51 pages

Bootstrap

Uploaded by

Ruchita chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 51

Bootstrap

Tutorial
7 Sukwon Oh
[email protected]
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
Grid System

▶ 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.
Grid System
Grid System - 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.


Grid System - 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:
Grid System – Column Resets

Sometimes at breakpoints, columns may be aligned in wrong places.

Problem: Correct Output:


Grid System – Column Resets

Fix

▶ .clearfix clears float CSS attribute


▶ visible-xs is one of many responsive utilities
▶ clearfix is applied to only mobile devices (visible-xs)
Grid System – Column Resets

Fix

Go to next line
Responsive utilities
Grid System - Offsetting

▶ col-xs-offset-*
▶ col-sm-offset-*
▶ col-md-offset-*
▶ col-lg-offset-*
Example
Grid System – 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


<ul class="pagination">
element. Each page is a list of href
e.g. <li><a href="#">1</a></li>
element.
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 Modifiers

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/

You might also like