Bootstrap 3

Content
❏ Why Bootstrap?
❏ Bootstrap Support
❏ Demonstration
❏ Font Awesome

Bootstrap Support
Responsive DesignUsing LESS

Bootstrap Support
Modules Package
Grid System

Dropdowns Button groups Button dropdowns Input
groups Navs Navbar Breadcrumbs Pagination
Labels Badges Jumbotron Page header
Thumbnails Alerts Progress bars Media object List
group Panels Wells
Modules Package

Sample Modules
Single button dropdowns

Demonstration
http://getbootstrap.com/javascript/
http://axutopia.com/twitter-bootstrap/
UI Widgets for Wireframing
Modules Package
Grids System
http://www.userfocus.co.uk/resources/axure_grids.html

Basic Template
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

…
</head>
<body>
<h1>Hello, world!</h1>

<script src="//code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Viewport
Mobile First
<meta name="viewport" content="width=device-width, initial-scale=1.0">
User-scalable=”No”
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">

Breakpoints & Media Queries
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Grids & Breakpoints
(*) is column width from 1 to 12
.col-xs-* => @media (max-width: @screen-xs-max) { ... }
.col-sm-* => @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
.col-md-* => @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
.col-lg-* => @media (min-width: @screen-lg-min) { ... }
Extra small
devicesPhones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices Desktops
(≥1200px)
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Container
1. Containers set width at various media query breakpoints to match our grid system.
2. Add 15px padding to Left/Right so the content doesn’t touch the edge of the browser.

Row
1. Rows must be placed within a .container for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Rows only go with columns

Column
1. User columns to layout the content.
2. Columns are created by specifying the number (from 1-12 columns)
3. Columns create gutters (gaps between column content) via padding.

Nested Rows
1. Rows can go inside of columns

Nested Rows
1. Cols can go right into the nested rows

What... if?
Working with “Row” and “Column” without “Container”?

Grids Summary
❖ Containers:
➢ Containers set width at various media query breakpoints to match our grid system.
➢ Containers add 15px padding to the left & right so the content doesn’t touch the edge of the browser.
❖ Rows
➢ Use rows to create horizontal groups of columns.
➢ Rows must be placed within a .container for proper alignment and padding.
➢ Rows only go with columns
➢ Rows can go inside of columns (nested content)
❖ Columns:
➢ User columns to layout the content.
➢ Columns are created by specifying the number (from 1-12 columns)
➢ Columns create gutters (gaps between column content) via padding.
➢ Cols can go right into the nested rows

Advantages & Disadvantages
- Designer MUST follow Grids system.
- Too much Combination Classes.
- Easy To Learn
- Designer/Developer Do the Same Way
- A Bunds of UI Patterns
Advantages:
Disadvantages:

Tools
Bootstrap Themes
http://www.bootstrapthemeroller.com/twitter-bootstrap-themeroller.html
Bootstrap Templates
http://www.bootstraptor.com/bootstrap3
Bootstrap Wireframe Kit
http://axutopia.com/twitter-bootstrap/
Bootstrap CDN
http://www.bootstrapcdn.com/

- 370 Icons (Icon Library)
- 06 Standard Sizes (Sample Icon)
- Scalabled Icons
- Multiple Ways to Style the Icon:
Rotated/Flipped/Spinning/Outlined/Bordered/Sizing/Fixed
See sample: http://fontawesome.io/examples/

How to Use
1. Declare Font Awesome in <Head>:
- Add direct link from CDN: (Recommended)
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/font-
awesome/4.0.1/css/font-awesome.min.css">
- Download to local folder:
<link rel="stylesheet" href="path/to/font-
awesome/css/font-awesome.min.css">
2. Start Using It:
<i class="fa fa-envelope fa-2x"></i> Email

How to Use
fa-[name]-[shape]-[o]-[direction]
<i class="fa fa-envelope fa-2x"></i> Email
Sample 1:
<i class="fa fa-envelope-o fa-5x fa-border”></i>
Email
Sample 2:

Bootstrap 3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to Bootstrap 3

Similar to Bootstrap 3 (20)

Recently uploaded

Recently uploaded (20)

Bootstrap 3

Editor's Notes