9. Basic Template
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
…
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
10. 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">
11. 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) { ... }
12. 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-
14. 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.
15. 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
16. 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.
21. 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
22. 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:
26. 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
