Bootstrap

Lift O
Level 1, Section 1
So You Want To Build a Website

An attractive, functioning website requires basic knowledge of structure, style, and behavior.
HTML
Page Structure
CSS
Element Styling
JavaScript
Page Behavior
Website Development Follows Some Typical Patterns

Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.
HTML
CSS
JavaScript

HTML
CSS
JavaScript

HTML
CSS
JavaScript

HTML
CSS
JavaScript

HTML
CSS
JavaScript
Frameworks Can Make Our Site-Building Life Much Easier

A framework is a downloadable library of tools that assist with adding style and functionality to your website.
HTML
CSS
JavaScript
Bootstrap
IHI
H
I
B HI
JA

B L

FJ AN
HINA C

C

C C
N J
L H I
What Will Bootstrap Do For Us?

Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.
HTML
CSS
JavaScript
Bootstrap
What Will Bootstrap Do For Us?

Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.
HTML
Bootstrap.css
Bootstrap.js
Bootstrap
QAA
J A
H B

HI J IJ
C
I C
A I
IHI
I

H B
JH JA
HINA C
C

A

I
What to Expect From Bootstrap

Lets take a look at some great examples of the magic that Bootstrap can make very quickly.
What to Expect From Bootstrap

Heres the goal for our end product at the end of this course.
How To Get A Hold of Bootstrap

There are three ways to get access to the framework, and well focus on one in particular.
http://go.codeschool.com/bootstrap-download
,
N J
A
N J
C

N
C L
. HH

HH

I H
C

H I
I
What Does The Framework Consist Of?

Lets take a quick at Bootstraps le structure to get a broad awareness of what were using.
dist

dist
css
fonts
js

dist
css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap.css
bootstrap.css.map
bootstrap.min.css
fonts
js
H
H
I
B C
IHI
HH
A
L QAA

JH
C
J

.
H
,I
L AA
H
JH

B
C C
I
L I

JC

B C
A H

JH
L C
I
H I

H
A
JI

J

A B CI

L QAA
JH
I
C C B C
C H

dist
css
fonts
js

dist
css
fonts
js
glyphicons-halings-regular.eot
glyphicons-halings-regular.svg
glyphicons-halings-regular.ttf
glyphicons-halings-regular.wo
IHI

H

CI
I I
C

JH
H
CH

QAA
I
I
I H

IIN
H C

dist
css
fonts
js

dist
css
fonts
js
bootstrap.js
bootstrap.min.js
npm.js

C
I
C L

JC

IHI
L AA
B
I
HN
C
JH
I!


dist
css
fonts
js
Getting Started: Creating a Basic HTML File

To get up and running with Bootstrap, well need to establish our sites home page with some HTML.
HI
L QAA
I
H IJ
L I

<!DOCTYPE html>
<html lang='en'>
<head>
<title>Blasting Off With Bootstrap</title>
</head>
PI C

H

</html>
IN P

I
L I

I IA
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<h3>Book Today!</h3>
<h3>Go Anywhere</h3>
MI
L QAA
B

N
C

H B

C I C A

CH
<h3>RocketBus®</h3>
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
L
L QAA

H B

I
H

J

CH
H


<p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a
number of conveniently located ports around the globe to service everyone.</p>
<p>If you need to get to space today, why not try out a transporter? Despite the claims,
there are have been no deaths in the last 6 weeks!</p>
<p>For cheapest fares, catch the next RocketBus to the stars. Cheaper on your wallet,
and easiest way to make friends.</p>
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
<h2>The Fastest Way to Space</h2> <p> ... </p>
<h3>Book Today!</h3> <p> ... </p>
<h3>Go Anywhere</h3> <p> ... </p>
<h3>RocketBus®</h3> <p> ... </p>
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
<h2>The Fastest Way to Space</h2> <p> ... </p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
<h3>Book Today!</h3> <p> ... </p>
<h3>Go Anywhere</h3> <p> ... </p>
<h3>RocketBus®</h3> <p> ... </p>

</body>
</html>

C H
J
CI CI
L QAA

J A
JII CH

JH
I
C

L I
JC
J

C
IH

dist/index.html
Viewing Our Page Before Using Bootstrap

Heres a view of our basic HTML without any of the magic of Bootstrap.
Adding the Bootstrap Framework

To get Bootstrap acting on our content, well need to import a few extra items on our page.
<!DOCTYPE html>
<html lang='en'>
<head>
<link href='css/bootstrap.css' rel='stylesheet'>
</head>
<body>
...
QAA
HI
C
I
C AJ

I
IHI
A
N
N

JH C

A I
I
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
...
QAA
AH
C AJ
?2J N

JH
IHI
C H
I
I

JC

A
I C H
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</body>
</html>
dist/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
...
I C AAN

QH
I

IHI
I
A
L QAA
M A
I H
A I
NP
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.js'></script>
</body>
</html>
dist/index.html
The Eects of Adding Bootstrap

Lets check out what Bootstrap will do to our existing HTML page.
QH
J
C I A

M HI C

The Eects of Adding Bootstrap

Lets check out what Bootstrap will do to our existing HTML page.

?JHI

CI
C
C

H B

CIAN
HINA
JII CH

QH
HI AA

JC
L
C
!
Our Visual Goal For This Level

Well be using classes to improve our HTML visually, but without writing a single line of CSS.
QAA
I
J
CI CI
CI

IL C

H
B CH

JH C
IHI QH
.container A HH
The
container Class
Bootstraps container class will responsively add margins, center, and wrap our content.
index.html
<body>
<h3>Book Today!</h3> <p>...</p>
<h3>Go Anywhere</h3> <p>...</p>
<h3>RocketBus®</h3> <p>...</p>
</body>
QH
AA

J
H A

CI CI
L I C
J
N
I
The
container Class
index.html
<body>
<div class='container'>
C

.container A HH
I H

M

L I
A B CI
I I
H C H
I
I

J CI
H

I
LH
L C L

</div>
</body>
The
container Class
H
L AA
I
J

I
CI

L I
HB I

C

L
C

I A I

C !
The
container Class
The
container-fluid Class
Bootstraps container-fluid class allows for stretching if it is desired on larger screens.

index.html
<body>
</div>
</body>
The

index.html
<body>
</div>
<div class='container-fluid'>
</div>
</body>
L
J
IJ H
L AA
I

CI C
I I

L AA
HI I
I
CI

IIN
HINA H

C
JH JA

C
CAN
C
A HH!
The
Lift O
Level 1, Section 1
Thinking In Grids
Level 2, Section 1
Our Site Wrapped in a .container

So far weve learned how a .container class helps structure our content.
8
FO
F
T

OF H
5
A

I
C

OE
L 0
Site Structure: Rows

Rows are horizontal groupings of data
8
FO
E
,

C
A O
Site Structure: Columns

Columns are vertical groupings of data
8
FO
E

LO H

H I
F EO

Multiple Columns
Bootstrap gives us 12 columns to work with if we need them

HH

I

H I

U
F

HH
Our Header in a Grid

Elements can span all columns in our grid
FOH
L

H I
Taking Up Half the Page

With 12 columns, you can use 6 to take up half the page
A

6I

? OE
L
-

H I
Getting Even Smaller

You probably wont ever need 12 individual columns, but 4 is common enough
4 O

E

L

H I
Wire framing our Grid Design

Wire framing is a great way to visualize and plan out our page.
12 Columns
6 Columns
4 Columns
2 H I
AA
L

O

L

6 Columns
4 Columns
4 Columns
Bootstrap Medium Screen Grid Design

Bootstrap uses .col-md-* classes for denoting the number of columns
class='col-md-12'
class='col-md-6'
class='col-md-4'
class='col-md-6'
class='col-md-4'
class='col-md-4'
2 H I
OFHH

AA
L
O

Adding Grids to Our HTML

Heres part of our content from level one that well convert to grids
index.html
<p>Make your way to space...</p>
<img src='images/blast.png' alt='Blasting Off' />
...
</div>
Using 12 Columns for our Title

Use a class of .col-md-12 to wrap areas of your page you want to take up the entire width.
index.html
<div class='col-md-12'>
</div>
...
8
E A
</div>

O

L
HH

H I
Lead Grid Using 6 Columns

Determine the number of columns you want, then pick the correct Bootstrap class for it.
index.html
<div class='col-md-12'>...</div>
8 O
E
H A
O SO
A
? OO
FHH
O
L
-
H I

<p>Make your way to space...</p>
...
8
FI
FHH
O
L
OE
-
H
</div>

Lead Grid Using .col-md-6

Use a class of .col-md-6 to contain an element to 6 columns, or half the page.
index.html
E
<p>Make your way to space...</p> ...
LL
</div>
</div>
</div>

H I

FA
?T
FA
Feature Grid Using 4 Columns

Using one-third of the page, or 4 columns. 4 columns * 3 elements = 12 columns total.
index.html
<div class='container'>...
<p>Even if you're traveling</p>
<p>If you need to get to space today...</p>
<p>For cheapest fares, catch the</p>
</div>
OU
I
E
C O
O
L

H I

Feature Grid Using .col-md-4

The next featured item will be immediately to the right.
index.html
3 E
C O

FHH
O

L

H I
<div class='container'>...
<h3>Book Today!</h3> <p>Even if you're traveling</p>
</div>
<h3>Go Anywhere</h3> <p>If you need to get to space today</p>
</div>
<h3>RocketBus®</h3> <p>For cheapest fares, catch the</p>
</div>
</div>
Column Preview
Our page is starting to take shape!
Grid Refactoring
Its dicult to know when a new row starts without doing math.
index.html
</div>
U

LF
?T
H I
? O

E O
? O
?T
0
Adding Rows using .row

The number of columns in each row adds up to 12.
<div class='row'>
<div class='col-md-12'></div>
</div>
<div class='row'>
</div>
<div class='row'>
</div>
</div>
F

I

A

H O
F
O
A
Row Preview
Our page looks almost the same, but its actually using 15px more of the screen with rows
*

C

O O
Adding too Many Columns

What should happen if you include more than 12 columns in a row?
index.html
<div class='row'>
</div>
</div>
E O
HA
OEF
H
HF
F

?
0

Multiple Rows
Our last featured item doesnt have enough space and moves onto its own row
9 I
OEF
OE O
E LL A

? C

O O A
F
.row
Designing With Grids

A popular proportion for sites with grids is 9 columns + 3 columns
/&*
F
A
C

?H
FOE

FA ?
12 Columns
9 Columns
3 Columns
Letting Columns Breathe with Blanks

Adding a bit of space between columns can help them appear less cluttered
12 Columns

HA

O

H I

C
L AAF 0
8 Columns
3 Columns
Empty Columns
Dont create empty columns. Bootstrap has a better way!
index.html
<div class='row'>
</div>
<div class='row'>
</div>
</section>

2 HA
O

ILOT
H I
? O

OE
F

? OO
T
Empty Columns Using an Oset

The .col-md-offset-* class is used to add left padding for a given number of columns.
index.html
<div class='row'>
</div>
<div class='row'>
<div class='col-md-3 col-md-offset-1'></div>
</div>
</section>
1AA

H I
C
L AAF
O
OE
H CO
C
OE
FA ?
EF

?

HA

col-md-offset-*
Blog Example
An example blog from the Bootstrap website using this technique
.
H I
C

O O

H I
CC O
*
H I
C
OE
FA ?
Thinking In Grids
Level 2, Section 1
Responsive Gridding
Level 2, Section 2
Our Website So Far

It looks great on our desktops screen, but if we view it on a phone, our columns are gone!
I
B
OL
? OHI
L

E
B L
?L I

Our Goal Mobile Layout

0E
E
EH
EI

H L
L ONE I
8 E
E? I
H I

UL
EI
N

H
NS EI

I

I
ON
F
8 S

I
EN
I
L
Medium Screen Size

A good starting point for your design. Looks good on laptops and desktops.
Grid Size
Grid Class
Medium
.col-md-*
Oset Class
.col-md-offset-*
Screen Size
992px+
Designing for Smaller Screens

The small grid size is used for smaller resolutions, often tablets or compact laptop screens.
Grid Size
Grid Class
Oset Class
Screen Size
Small
.col-sm-*
.col-sm-offset-*
768px+
Medium
.col-md-*
.col-md-offset-*
992px+
Our Current Features

Our columns only work with a resolution of 992px and up.
index.html
<div class='row'>
<h3>Book Today!</h3>...
</div>
<h3>Go Anywhere</h3>...
</div>
<h3>RocketBus®</h3>...
</div>
</div>
. ?
B NOL

O
I

EBB L IN
L
I
H L
?L I
Adding Grids for Smaller Resolutions

Our featured items will have the same grid sizes in small and medium mode.
index.html
<div class='row'>
<div class='col-sm-4'>
</div>
</div>
</div>
</div>

E
LF
EI

R
I
E L
Feature Columns in Medium Sized Screens
E EI
N

EI
VH EOHW
H
NOL
L
NE

IIEI

? OHI
?
Feature Columns in Small Sized Screens

E EI
N E

I

N N

4OL
B NOL
?
I

? OHI
EI
V H W

H
I
P
Extra Small Mode

N
ON

R,

0 L U
OL
I
PE

?

V RNL
H W
H
UP
N
OL
? OHI
EI!

2 NU
F
EIN

N
O

EN
H L
?
Extra Small Browser Sizes

Great for specifying the minimum width for elements. Also the layout used on many phones.
Grid Size
Grid Class
Oset Class
Screen Size
Extra Small
.col-xs-*
.col-xs-offset-*
0px+
Small
.col-sm-*
.col-sm-offset-*
768px+
Medium
.col-md-*
.col-md-offset-*
992px+
Adding Grids for Extra Small Screens

We could use the extra small grids, but theres a better way.
index.html
<div class='row'>
<div class='col-xs-4'>
</div>
</div>
</div>
</div>
2 F

EN

?L H

? I

NN L!
Reviving our Goal Layout

We can plan out how many columns each of our elements will use prior to jumping into the code.
V F
8 SW
E

O

? OHI
4OL
N L

B NOL
E
?

O

? OHI
1NU
P
I
BB N
I

N
BN
I
LE N
Features in Extra Small Screens

index.html
<div class='row'>
<div class='col-sm-4 col-xs-12'>
</div>
</div>
</div>
</div>
F
8
SW
E
N F
O

? OHI
8
N L
N

B NOL
E
N F
O

? OHI
I

V F
8 SW
Extra Small Feature Layout

Using our new extra small classes, our features section is taking shape.
N
N E
F

EF
I

I

NE
I
N

I

BB N
N
V F
8 SW
Centering Features for Extra Small Screens

This will center this column giving it a column of spacing on each side
9
N
HE
<div class='row'>
<div class='col-sm-4 col-xs-10 col-xs-offset-1'>
</div>
</div>
</div>
</div>

? OHI
8
L L
B

N
?

IUN
H NN L
Book Today On Extra Small Screens

Go Anywhere started on a new row because it needed 6 columns and only 1 was available.
F
8 SW
N I
ON

I
RNL
H
?L I
Overriding Osets for Small Screens
4OL
.col-xs-offset-1
E
EI

E
N
V H W
I
VH EOHW

L ONE I

7EI?
UL
O EI

? OHI
EI
N
BEL N

LET IN
?
N
N
P LB EI

H IN
E
H P
N
N
I RN
L
Removing the Oset for Small Screens

index.html
<div class='row'>
<div class='col-sm-4 col-xs-10 col-xs-offset-1
col-sm-offset-0'>
</div>
<div class='col-md-3 col-sm-4 col-xs-6'>
</div>
<div class=col-md-3 col-sm-4 col-xs-6'>
</div>
</div>
6 H P
N
BB N

EI
V H W
H

I
P
Removing Osets
This will center this column giving it a column of spacing on each side

BB N
B L
N

BEL N
B NOL
R? N

EI
RNL
H
H
Very Large Screens

Great for monitors with a lot of space. Not used as often as other grid sizes.
Grid Size
Grid Class
Oset Class
Screen Size
Extra Small
.col-xs-*
.col-xs-offset-*
0px+
Small
.col-sm-*
.col-sm-offset-*
768px+
Medium
.col-md-*
.col-md-offset-*
992px+
Large
.col-lg-*
.col-lg-offset-*
1200px+
Hiding Columns

O
I S

N E
EH

B L
VH EOHW
I

V L W
L ONE I
Hiding Elements using .hidden-*

We can hide elements in specic screen sizes
index.html
0E
N E
H IN
B L
H

I
RNL
H
L ONE I
<div class='row'>
<div class='col-md-6 hidden-sm hidden-xs'>
</div>
</div>
.hidden-xs
.hidden-md
.hidden-sm
.hidden-lg
O
? I
E
H IN
EI

N L
?L I
ET
N
Hiding Elements using .hidden-*
8
EH
E
E I
B L
H

I
RNL
H
L ONE I
Making Elements Visible using .visible-*

We can specify a screen size for elements to be visible
index.html
4I S

N E
H IN
EI

H EOH
I
L
L ONE I
<div class='row'>
<div class='col-md-6 visible-md visible-lg'>
</div>
</div>
.visible-xs
.visible-md
.visible-sm
.visible-lg
O
? I
?EBS
N L

?L I
ET
N
Making Elements Visible using .visible-*
8
H IN
E
PE E
EI
VH EOHW
I

V L W
L ONE I
ON
I N EI

Typography
Level 3
What is Typography?
The art and technique of arranging type to make written language most appealing - Wikipedia
bootstrap.css

D

B
L

B
H
B
body {
font-family: "Helvetica Neue",
Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
?
L

B

Manual Typography for the Lead

Using Bootstraps manual typography to improve your page

B

A ?
H

B
H
A

Using the .lead Typography Class

2

D
H
B
H
index.html
<div class='row'>
<p class='lead'>Make your way to space...</p>
</div> ...
</div>
.lead

AD
B
A

B
A

AD
B

Comparing Our Lead

Use .lead to make text stand out from the rest of the page.
No .lead
Using .lead
.

H
B

H

B
H !
Centering Text
Bootstrap has a number of alignment classes for text.
N
B

H

H
A
Using the .text-* Typography Classes

index.html

<div class='row text-center'>

<div class='...'>
<p>Even if you're traveling tomorrow...</p>
</div>
...
</div>
.text-justify
.text-right
.text-nowrap
.text-left
.text-center
D

B

B

A

B
BA B

Centering Our Features

B

B

B

H

H

B

H

D
Glyphicons
Bootstrap comes with 200 icons to use, named glyphicons.
dist
css
fonts
js
0 A A

B B

glyphicons-halings-regular.eot
glyphicons-halings-regular.svg
glyphicons-halings-regular.ttf
glyphicons-halings-regular.wo
http://go.codeschool.com/bootstrap-glyphicons

B!

2 L

Using Glyphicons
Icon classes should only be used on elements that contain no text content and have no child elements.
index.html
<div class='...'>
<i class='glyphicon'></i>
<p>Even if you're traveling...</p>
</div>
L

B

B

.glyphicon

BN

BL B
N

D L

B

H
,B

H B
B
<img>

N
H
B
<i>

H
B
Adding an Icon
Pick out an icon to use. In this case well use the briefcase icon.
index.html
<div class='...'>
<i class='glyphicon glyphicon-briefcase'></i>
<p>Even if you're traveling...</p>
</div>
2
.glyphicon-briefcase

D

B

H
H
2
.glyphicon

D

H
H

D I
B
B
Adding Icons for Other Features

index.html
<div class='...'>
</div>
<div class='...'>
<i class='glyphicon glyphicon-random'></i>
</div>
<div class='...'>
<i class='glyphicon glyphicon-send'></i>
</div>
Our Icons Look a Little Small
L

H

?

A
B

bootstrap.css
body {
font-size: 14px;
...
}
0 A A

D

H
font-size

B

HAD

HD

B
Adding a Stylesheet
For styling beyond what Bootstrap oers, well need to create a new css le to edit.
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<link href='css/main.css' rel='stylesheet'>
</head>
<body>
...
N

H
L
B

</body>
main.css
L

</html>
Increasing the Icon Font Size

index.html
<div class='row features'>

<div class='...'>
<h3 class='text-center'>Book Today!</h3>
</div>
...
</div>
css/main.css
.features .glyphicon {
font-size: 32px;
}

B
HB

.features

B

L

B

HB
.features
Larger Icons
H

B

B

D !
B

H

B

B

A

A
L
Changing the Icon Color

css/main.css
.features .glyphicon {
font-size: 32px;
color: red;
}

B
L

H
L

B

!
N
B

? D
H

?
H

?B !
B

Cleaning up our Footer

Bootstrap provides some classes to make working with lists easier.
N

B

N

H
A I B

H L
H

Our Footer Code So Far

index.html
<div class='...'>
N

B?

<h4>Links</h4>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
</ul>
</div>

B

B

list-style

<ul>
Unstyled Lists
index.html
<div class='...'>
3

D

<h4>Links</h4>

A I

H
<ul class='list-unstyled'>
<li><a href='index.html'>Home</a></li>
</ul>
</div>
.list-unstyled
3
,B B

.list-inline

Our Finished Footer
H

?

?

B !
Typography
Level 3
Enough CSS to be Dangerous

Level 4, Section 1
Adding a Dash of Style

What can we do to make our lead area stand out more?

B
?

?

?.
?

??
.
.
?
.

?
.
B
B
.
?
.

?

. .?
Another Look at Our Lead

Heres our lead row we want to give prominence to.
index.html
<div class='row'>
</div> ...
</div>
That Went .well

Use the .well class to give the element a gray background and a rounded gray border.
index.html
<div class='row well'>

.well
A
.

</div> ...
</div>

?

Adding More Spacing

index.html
<div class='row well well-lg'>

.
</div>
! <div class='col-md-6'>...</div>
</div>
.well-lg
.well-sm

A

B

.

.

. ?

?
?
B

.
Well Preview

.

.

?

?
?
?
??
C?!

?

Styling Our Buttons

Our buttons look dierent in every browser. Lets use Bootstrap to standardize them.
index.html


.

? ? .
.
?
?B .
?
?
<button type='button' class='btn'>Take the Tour</button>

<button type='button' class='btn'>Book Tickets Now</button>
??

?

?

??
Making Our Buttons Larger

We can change the size of buttons by adding another class.
<button type='button' class='btn btn-lg'>...</button>

<button type='button' class='btn btn-lg'>...</button>
.
?
.glyphicon
B

.btn
.
?
??
.
.btn-sm
.btn-xs

?

.btn-lg

Changing Button Color

We can change the background and text color of buttons by adding another class.
index.html
<button type='button' class='btn btn-lg btn-default'>

Take the Tour
</button>
<button type='button' class='btn btn-lg btn-primary '>
Book Tickets Now
</button>

.
.
?
. ?

?.

?!
Many Many Colors

index.html
<button type='button' class='btn btn-lg btn-default'>...</button>

<button type='button' class='btn btn-lg btn-primary '>...</button>
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-danger
.btn-warning

??

A

Buttons and Wells

.?

.

Enough CSS to be Dangerous

Level 4, Section 1
Navigating Navigation
Level 4, Section 2
We Need Navigation!

?

? !

A

C

A

Our Goal Navigation

Well be building out our navigation to include a few links an a link to the homepage.
.?
C
?

C

?

?

A
Expanding Our Header

Well be replacing this row with our navigation bar.
index.html
A
C
C
<div class='row'>
</div>
</div>
</div>

Removing Grids
Bootstraps navigation classes dont rely on grids.
index.html
C

<div class='row'>
</div>
</div>
</div>

?

Adding Links
Well start our navigation with some of the links that are already in our footer.
index.html
<ul>
!
!
<li><a href='about.html'>About</a></li>
! </ul>
</div>
A

A

A

?
A!
Not So Styled Nav

<h1>

C

A

H
Converting Our H1
We want our site title to link back to our homepage index.html.
index.html
<h1>
Blasting Off With Bootstrap
</h1>
<ul>...</ul>
</div>
A
A C

?

C

h1
Using .navbar-brand
The .navbar-brand class will oat the text left, increase the font size and more.
index.html
<a href='/' class='navbar-brand'>
</a>
<ul>...</ul>
</div>
C

C

A

F

Using .nav
index.html
<a href='/' class='navbar-brand'>
</a>
<ul class='nav'>...</ul>
</div>
.nav

A

.glyphicon

.btn
I
A
CA

AA A
A
?

A

.nav Modiers
The .nav class with modiers can be used for a main navigation, or a subnav on your page.
<ul class='nav nav-pills'>...</ul>
<ul class='nav nav-tabs'>...</ul>
<ul class='nav navbar-nav navbar-right'></ul>
C

A

.navbar-nav

A

Our Navigation In Progress
.navbar-nav

A

A

C

A
C

C

A
A
?

C

A

A
Our Goal Nav
C

A

A?

A

A

AA

C

A
Using .navbar
A

A

A
?
index.html

<div class='container navbar navbar-default'>

<a href='/' class='navbar-brand'>Blasting Off With Bootstrap</a>
<ul class='nav navbar-nav navbar-right'>...</ul>

</div>

CA
.navbar-default

.navbar-default
.navbar-inverse

C
A
Navbar in a container
A

C

A
A

AA

A
A

.well
A

A

C

F

Setting a Background for our Navigation

Nesting a .container within a .navbar keeps our links centered, but adds a background to it.
index.html
<div class='container navbar navbar-default'>

...
</div>
<div class='navbar navbar-default'>

...
</div>
</div>
.container

.navbar-default

C

AA

A

C

A

?
Positioning our Navigation

The .navbar has some modications available that allow exibility in navbar position and visibility.
index.html
<div class='navbar navbar-default navbar-static-top'>...</div>
.navbar-static-top
.navbar-fixed-top
.navbar-static-bottom
.navbar-fixed-bottom

A

?

F

A

?
I

A

A

?
Our Finished Navigation

By using .navbar-static-top, the navigation goes away as we scroll the page.
C

A

!

A
A

AA

A
An Alternate Navigation
If we used .navbar-fixed-top, the navigation appears at the top of the page, even when we scroll.

C

body

{

padding-top:

70px;

}

C

.navbar versus .nav

Whats the dierence between these two?
.nav
.navbar
Navigating Navigation
Level 4, Section 2
JavaScript Components
Level 5, Section 1
Navigation in Extra Small Mode
I
J H CB
CC?G

M

B
LH

G
C O
. M

G CI
J
H

C G

B M
G C
H

B
GC CB
BHG
H
Expandable Navigation
This is what well be building. In extra small mode, well show a navigation toggle.
CSS vs JavaScript Refresher

CSS is for styling the page, JavaScript is for adding behavior to the page.
Style
C C G
CBHG

CG H CB B

B
H
B

CSS
Behavior
JavaScript
?
L B
? M
GG
Our Existing Navigation

Heres the navigation weve build so far. It has a .navbar with a .container inside of it.
index.html
<div class='navbar navbar-default navbar-static-top'>

<a href='/' class='navbar-brand'>...</a>
<ul class='nav navbar-nav navbar-right '>...</ul>
</div>
</div>

.nav

BH
G

BH
HC
?
C G
H

Collapsing Our Navigation

Adding the .collapse class will hide an element in all resolutions thanks to the collapse plugin.
index.html
<ul class='nav navbar-nav navbar-right collapse'>

...
</ul>
I
B J H CB
G

B
B

G B
G N G!

C
C

CB M

H
CB M
B
LH
G
C
Showing Our Navigation For Larger Screens

The .navbar-collapse class will only hide the nav in extra small mode.
index.html
<ul class='nav navbar-nav navbar-right collapse navbar-collapse'>

...
</ul>
I
B J H CB
G C G
I
C
G
CJ
IH
G

B
B
LH
G

G BG
B

C
Toggling Navigation
Well add a button that will make our navigation links visible only when the user desires it.
index.html
G
G

CI
IHHCB


<a href='index.html' class='navbar-brand'>...</a>
<button type='button'>Toggle navigation</button>
<ul class='nav navbar-nav navbar-right
collapse navbar-collapse'>...</ul>
</div>
</div>

Screen Reader Only Text

Our visually impaired users wont know what our button does by its icon, but adding text helps.
index.html
<button type='button'>
<span class='sr-only'>Toggle navigation</span>
</button>

C
B J H CB
H LH
CB H

G C B
C
CGH
J G HC G
GH
B
HC

GC
CG H CB B
B

H CB
GHM G
HC
CI
IHHCB
Screen Reader Only Text

Our visually impaired users wont know what our button does by its icon, but adding text helps.
index.html
<button type='button'>
</button>
GH
B
HC

GC
CG H CB B
B

H CB
GHM G
HC
CI
IHHCB
Navigation Toggles
index.html
J H CB
HC
G
C H
HC
H

<button type='button' class='navbar-toggle'>

</button>
H
HH B
CG !
3
IGH
B
GC
? B
C
CB
B
H

B

J C
B
HG
?

MG
C
C H B

BHG
B
CCHGH
.pull-right
.pull-left
Navigation Toggle Icons

index.html
CBG
CB H
G

C
H M
B
H G
G

<i class='glyphicon glyphicon-align-justify'></i>
</button>
<span class='icon-bar'></span>
</button>
BGH

B
IG

C
CCHGH
G
CB

Our Lazy Button

Our button only shows up in extra small mode, and our navigation shows up for anything larger.
HH B
H

IH

GH
B
HC
?
H
C
GC H B !

Adding Interactivity to Our Button

Lay out the problem you want to solve in english to better understand the interaction.
index.html
3 B

?
CB
H G
button
<button type='button' class='navbar-toggle'>...</button>

<ul class='nav navbar-nav navbar-right collapse
navbar-collapse'>

H
.collapse
GG
G CI

CJ
C
H
B J H CB
How to use Bootstrap JavaScript Plugins

The Collapse plugin is included in the JavaScript le we added earlier.
Add data-*
attributes to HTML
JavaScript
Write JavaScript
CI
CI
GC
C
H
G

C
H M
H CI
, J
3 H

IG

Using the Collapse JavaScript Plugin

By adding additional data- attributes, Bootstrap will add new behavior to our page when it loads.
index.html

H
L GH B
C
H
.collapse
GGO
<button type='button' class='navbar-toggle'

data-toggle='collapse'
data-target='.navbar-collapse' >
</button>
<ul class='nav navbar-nav navbar-right collapse
navbar-collapse'>
B
B

BH
CB
H

H H

G
H
GG
.navbar-collapse.
Working Collapsible Navigation
H G
HC B
H
GG
IH
H

C GB H
CC?
EI H
H
M H

H G
?
H
B?G

Our Existing Navigation Rows

The same way we grouped rows, well group the parts of our navigation.
index.html

<button type='button' ...>... </button>
<ul class='nav ...'></ul>

</div>
</div>

B?
B
H
IHHCB

B J H CB
B?

CB
C

HG
C B
C
Navigation Header
We can think of the homepage link and the button as one row and the nav as another one.
index.html

<div class='navbar-header'>
<button type='button' ...>...</button>
</div>
3
H ?
I
H
BH
C

<ul class='nav ...'>...</ul>

</div>
</div>

G
BG
IH
CB M

C
LH

H
B

Our Toggleable Navigation
I
B J H CB
B?G
BC

J
H
C B
C

C
LH
G
G BG!
Our Navigation In Larger Modes

The navigation is only collapsed in extra small mode.
I
B J H CB

CC?G
H
G

B
G
C

B
CJ
JavaScript Components
Level 5, Section 1
Dropping Down From Orbit

Level 5, Section 2
Our Site is Taking O and Growing

D
A H F BA

FF A
D L !

BI
A
I
? A
F
C
Grouping Navigation
Well consolidate less-used pages under a common navigation header to improve presentation.
A
BA

B FO
I ??
JC A
B D
A H F BA
Mobile First!
Well make it work on mobile from the start.
??

B D
DBC
BIA

IBD
A
JFD
??
B

DB
F
F DF
D F#
? F

F
DBC

BIA
BA
Our Existing Navigation Links

Our about link will need to be changed, otherwise it would take people to a dierence page.
index.html
<ul class='nav ...'>

<li>
<a href='about.html'>About</a>
</li>
...
</ul>
,A F
B
? A A
FB
F
B F
C #
I ??

I AF
F
FB
JC A
A
BI
BF D
? A
Converting the About Link

By linking to #, we tell the browser to not go to a new page.
index.html
<ul class='nav ...'>

<li>
<a href='#'>About <span class='caret'></span> </a>
</li>
</ul>

BA F
F

H FBD
FB

A I
C

B D
DBC
BIA
BA

BBF FD C
.caret
?
A

Adding More Links

index.html
<li>!
<a href='#'>About <span class='caret'></span></a>
<ul>
<li><a href='story.html'>Our Story</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='/blog'>Blog</a></li>
<li><a href='http://twitter.com/...'>Twitter</a></li>
<li><a href='http://facebook.com/...'>Facebook</a></li>
</ul>
</li>.
??
B
B D
A I
? A
I ??

DB C
A

B D
B F
? AF
<li>
Converting to a Dropdown Menu

We dont want our sub navigation to be shown when the page loads.
index.html

? F
BBF FD C
ABI
F
? F

DBC
BIA

,F
IBA F

BIA
BA
C
?B
<li>!
<a href='#'>About <span class='caret'></span></a>
<ul class='dropdown-menu'>
</ul>
</li>.
A

Two Ways to Use JavaScript Plugins

Remember how there are two ways to use JavaScript plugins? Lets look at another example.
??

DBC BIA

A
F
FFD F
Add data-*
attributes to HTML
JavaScript
Write JavaScript
Adding Behavior using Toggle

Similar to the Collapse plugin, well add classes to our HTML to use the Dropdown plugin.
index.html
A
B F

?
#
BBF FD C

?
B
.open FB
F
C D AF
? AF
<li>
<a href='#' data-toggle='dropdown'>
About <span class='caret'></span>
</a>
<ul class='dropdown-menu'>...</ul>
</li>
Starting our Dropdown Open

The Dropdown plugin is adding and removing classes for us, which we could do ourselves.
index.html
,
I
I AF
B D
DBC BIA
FB
F DF

BC A#
I
B ?
B
F
I F

?
<li class='open'>
</a>
<ul class='dropdown-menu'>...</ul>
</li>
? A
BA
B F
ABI#
IB ?

D BH
F
.open
? #

?B A
F
DBC BIA
Our Dropdown Menu So Far

F#
A F
I
H
B

BB?
H D
FI A
? A
Adding Dividers
index.html
<li>
<a href='#' data-toggle='dropdown'>About
<span class='caret'></span></a>
<ul class='dropdown-menu'>
<li class='divider'></li>
<li class='divider'></li>

A
BD LBAF ?
D

</ul>
</li>
FB
?C
DB C
A
F
What About Users Without JavaScript?

We want to make sure our site works well when JavaScript is disabled.
index.html
<li>
</a>
...
</li>
,

H FBD

H D CF

? #
F ??

?
BA
B F
A
ABF A
I ??
CC A!

Graceful Degradation with JavaScript

Graceful degradation means that visitors with old browsers will still have an intended experience.
,

D

H D CF
A ? #
F ??

F

DBC
BIA
A
A
F
.
IBA F
A
index.html
<li>
<a href='about.html' data-target='#' data-toggle='dropdown'>
</a>
...
</li>
,
F

F

H
H D CF

? #
F
A
FB
F
B F F ?
C
??

Dropping Down From Orbit

Level 5, Section 2

Bootstrap

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bootstrap

Загружено:

Авторское право:

Доступные форматы

Lift O

So You Want To Build a Website

Website Development Follows Some Typical Patterns

Website Development Follows Some Typical Patterns

Website Development Follows Some Typical Patterns

Website Development Follows Some Typical Patterns

Website Development Follows Some Typical Patterns

Frameworks Can Make Our Site-Building Life Much Easier

What Will Bootstrap Do For Us?

What Will Bootstrap Do For Us?

What to Expect From Bootstrap

What to Expect From Bootstrap

How To Get A Hold of Bootstrap

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

What Does The Framework Consist Of?

Getting Started: Creating a Basic HTML File

Getting Started: Creating a Basic HTML File

Getting Started: Creating a Basic HTML File

<h1>Blasting Off With Bootstrap</h1>

Getting Started: Creating a Basic HTML File

Getting Started: Creating a Basic HTML File

Getting Started: Creating a Basic HTML File

<h3>Book Today!</h3> <p> ... </p>

<h3>Go Anywhere</h3> <p> ... </p>

<h3>RocketBus&reg;</h3> <p> ... </p>

Viewing Our Page Before Using Bootstrap

Adding the Bootstrap Framework

Adding the Bootstrap Framework

Adding the Bootstrap Framework

The Eects of Adding Bootstrap

The Eects of Adding Bootstrap

Our Visual Goal For This Level

<button type='button'>Take the Tour</button>

Bootstraps container-fluid class allows for stretching if it is desired on larger screens.

Bootstraps container-fluid class allows for stretching if it is desired on larger screens.

Bootstraps container-fluid class allows for stretching if it is desired on larger screens.

Our Site Wrapped in a .container

Site Structure: Rows

Site Structure: Columns

Our Header in a Grid

Taking Up Half the Page

Getting Even Smaller

Wire framing our Grid Design

Bootstrap Medium Screen Grid Design

Adding Grids to Our HTML

Using 12 Columns for our Title

Lead Grid Using 6 Columns

<h2>The Fastest Way to Space</h2>

Lead Grid Using .col-md-6

Feature Grid Using 4 Columns

Feature Grid Using .col-md-4

Adding Rows using .row

Adding too Many Columns

Designing With Grids

Letting Columns Breathe with Blanks

Empty Columns Using an Oset

Our Website So Far

<h3>RocketBus®</h3> <p> ... </p>