CodeSchool BlastingOffWithBootstrap PDF

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
C L
. HH

HH

N J
C

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 H
H
I
B C
IHI HH
A
L QAA

bootstrap-theme.css.map JH
C
J
.
H
,I
L AA
H
JH

B
C C
I
L I

JC

bootstrap-theme.min.css
bootstrap.css

B C
A H

JH
L C
I
H I

bootstrap.css.map
H
A
JI

J
A B CI

bootstrap.min.css L QAA
JH
I
C C B C
C H
fonts
js
dist
css
fonts
js
dist
css
fonts
IHI
H

glyphicons-halings-regular.eot

CI
I I
C

glyphicons-halings-regular.svg JH
H
CH

glyphicons-halings-regular.ttf QAA
I
I
I H

glyphicons-halings-regular.wo IIN
H C
js
dist
css
fonts
js
dist
css
fonts
js
C
I
C L

JC

- I!

IHI
L AA
B
I
HN
C
JH
bootstrap.js
bootstrap.min.js
npm.js
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.
<!DOCTYPE html>
<html lang='en'>
HI
L QAA
I
H IJ
L I

IN P
<head>
<title>Blasting Off With Bootstrap</title>
</head>
PI C

H

I
L I

I IA
</html> 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>
MI
L QAA
B

N
C

<h3>Go Anywhere</h3>
H B
C I C A
CH
<h3>RocketBus®</h3>
</body>
<!DOCTYPE html>
<html lang='en'>
L
L QAA

H B
H

<head> I
H
J
CH
</head>
<body>
<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>
<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
<p> </p>
<p>
</p>
<p>
</p>
<p>
</p>
</body>
<!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>
<!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>

C H
J
CI CI
L QAA

J A
JII CH

JH
I
C

<h3>Book Today!</h3> <p> ... </p> L I
JC
J

C
IH

<h3>Go Anywhere</h3> <p> ... </p>
<h3>RocketBus®</h3> <p> ... </p>
</body>
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>
<!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>
<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
I C AAN
QH
I

...
IHI
- I
A NP
L QAA
M A
I H
A I
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.js'></script>
</body>
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>
QH
AA

J
H A

<h2>The Fastest Way to Space</h2> CI CI
L I C
J
N
I
<h3>Book Today!</h3> <p>...</p>
<h3>Go Anywhere</h3> <p>...</p>
<h3>RocketBus®</h3> <p>...</p>
</body>
The container Class
index.html
<body>
C

.container A HH
I H

M

<div class='container'>
<h1>Blasting Off With Bootstrap</h1> L I
A B CI
I I
H C H
I
I

<h2>The Fastest Way to Space</h2> 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>
index.html
<body>
</div>
<div class='container-fluid'>
<h3>Book Today!</h3> <p>...</p> L
J
IJ H
L AA
I

CI C
I I

<h3>Go Anywhere</h3> <p>...</p> L AA
HI I
I
CI

IIN
HINA H

</div>
C
JH JA

C
CAN
C
A HH!
</body>
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 2 H I
AA
L

O

L

6 Columns 6 Columns
4 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-6'
2 H I
OFHH

AA
L
O

class='col-md-4' class='col-md-4' class='col-md-4'

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
O
L
HH

H I
</div>
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>
...
</div> 8
FI
FHH
O
L
OE
-
H I
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
<div class='col-md-12'>...</div>
<p>Make your way to space...</p> ...
E
H I

</div> LL
FA
?T
FA
</div>
</div>
Feature Grid Using 4 Columns
Using one-third of the page, or 4 columns. 4 columns * 3 elements = 12 columns total.
index.html
OU
I
E
C O

<div class='container'>... O
L

H I
<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>
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 class='container'> U

LF
?T
H I
? O

<div class='col-md-12'>...</div> E O
? O
?T
0
</div>
Adding Rows using .row
The number of columns in each row adds up to 12.
<div class='row'>
<div class='col-md-12'></div>
F

I

A

</div>
H O
F
O
A
<div class='row'>
</div>
<div class='row'>
</div>
</div>
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
E O
HA
OEF
H

<div class='container'> HF
F

? 0
<div class='row'>
</div>
</div>
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

12 Columns ?H
FOE

FA ?
9 Columns 3 Columns
Letting Columns Breathe with Blanks
Adding a bit of space between columns can help them appear less cluttered
12 Columns
5
HA

O

H I

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

</div> ILOT
H I
? O

<div class='row'> OE
F

? OO
T
</div>
</section>
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='container'> EF

HA

<div class='row'> ?

</div>
col-md-offset-*
<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 ?
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

R
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 Oset Class Screen Size
Medium .col-md-* .col-md-offset-* 992px+

Designing for Smaller Screens
The small grid size is used for smaller resolutions, often tablets or compact laptop screens.
Small .col-sm-* .col-sm-offset-* 768px+

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

O
I

<h3>Go Anywhere</h3>...
EBB L IN
L
I
H L
?L I
</div>
<h3>RocketBus®</h3>...
</div>
</div>
Adding Grids for Smaller Resolutions
Our featured items will have the same grid sizes in small and medium mode.
index.html
8
E
LF
EI

<div class='row'> R
I
E L
<div class='col-sm-4'>
</div>
</div>
</div>
</div>
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.
Extra Small .col-xs-* .col-xs-offset-* 0px+

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'> 2 F

EN

?L H

? I

</div>
<div class='col-xs-4'>
NN L!
</div>
<div class='col-xs-4'>
</div>
</div>
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
V F
8 SW
E
N F
O

? OHI
<div class='row'>
<div class='col-sm-4 col-xs-12'>
</div>
8
N L
N

</div>
B NOL
E
N F
O

<h3>RocketBus®</h3> ? OHI
I

</div> V F
8 SW
</div>
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

? OHI
<div class='row'>
<div class='col-sm-4 col-xs-10 col-xs-offset-1'>
</div>
<div class='col-sm-4 col-xs-6'> 8
L L
B

<h3>Go Anywhere</h3> N
?

</div> IUN
H NN L
</div>
</div>
Book Today On Extra Small Screens
Go Anywhere started on a new row because it needed 6 columns and only 1 was available.
V 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'> 6 H P
N
BB N

<h3>Go Anywhere</h3> EI
V H W
H

</div> I
P
<div class=col-md-3 col-sm-4 col-xs-6'>
</div>
</div>
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.
Extra Small .col-xs-* .col-xs-offset-* 0px+
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
0E
N E
H IN
B L
H

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

.hidden-sm .hidden-lg 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
4I S

N E
H IN
EI

index.html 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
O
? I
?EBS
N L

.visible-sm .visible-lg ?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
D

B
L

bootstrap.css

B
H
B
body {
font-family: "Helvetica Neue",
Helvetica, Arial, sans-serif;
font-size: 14px; ?
L

line-height: 1.42857143; B

color: #333;
background-color: #fff;
}
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

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

AD B
A B

B
A

AD
Comparing Our Lead
Use .lead to make text stand out from the rest of the page.
No .lead
.

H
B

H

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

H
H
A
Using the .text-* Typography Classes
index.html

B

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

A

B
BA B
.text-nowrap .text-left
Centering Our Features

B

B
B

H

B

H

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

2 L

css B B

B!
fonts
glyphicons-halings-regular.eot
glyphicons-halings-regular.svg
glyphicons-halings-regular.ttf
glyphicons-halings-regular.wo
js
http://go.codeschool.com/bootstrap-glyphicons
Using Glyphicons
Icon classes should only be used on elements that contain no text content and have no child elements.
index.html
<div class='...'> ,B

H B
B
<img>

<i class='glyphicon'></i> N
H
B
<i>

H
B
<p>Even if you're traveling...</p>
</div>
L

B

.glyphicon

BN

BL B
N

B

D L

B

H
Adding an Icon
Pick out an icon to use. In this case well use the briefcase icon.
2
.glyphicon

index.html
D

H
H

<div class='...'>
D I
B
B
<i class='glyphicon glyphicon-briefcase'></i>
<p>Even if you're traveling...</p>
</div>
2
.glyphicon-briefcase

D

B

H
H
Adding Icons for Other Features
index.html
<div class='...'>
<i class='glyphicon glyphicon-briefcase'></i>
</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
bootstrap.css
L

H
B

body {
?

A
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>
...
</body> N

H
L
B

</html> main.css
L

Increasing the Icon Font Size
index.html
<div class='row features'>

<div class='...'>
B

<i class='glyphicon glyphicon-briefcase'></i> L

B

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

B
HB
.features

Larger Icons
H
B

B
D !
B

B

B

H
A

A
L
Changing the Icon Color
css/main.css
.features .glyphicon {
font-size: 32px;
color: red;
}

B
L

B

H
L

!
N
B

? D
H
B

?
H

?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='...'>
<h4>Links</h4>
N

B?

<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 .list-inline
3
,B B

B

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'>


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

A

.

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-xs .btn-sm .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
?

?
A

C
?
Expanding Our Header
Well be replacing this row with our navigation bar.
A
C
C

index.html
<div class='row'>
</div>
</div>
</div>
Removing Grids
Bootstraps navigation classes dont rely on grids.
C

?

A
index.html
<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='stations.html'>Stations</a></li>
! <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>
A
A C

C

<ul>...</ul> ?

h1
</div>
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>
C

F

<ul>...</ul> C

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

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

.glyphicon

.btn
I
A
CA

AA 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

A
A
?

C

C

A

C

Our Goal Nav
A A
AA

A
C
A

A?
A
!
Using .navbar
A

A

index.html

A
?
<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

C
A
.navbar-default
.navbar-inverse
Navbar in a container
A

C
A

A

AA

A
A
A

A

C

.well

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 class='container'> .navbar-default
A

...
</div>

C

</div> AA

?
.container
A

C

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

A

?

?
I

A

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

A
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
A
.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.
C C G
CBHG

Style CG H CB B
B

B
H
CSS
Behavior ?
L B
? M GG
JavaScript
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
H

BH
HC
?
C G
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
G BG
B

CJ
IH
G
B
B
LH
G
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
H
<button type='button' class='navbar-toggle'>
</button>
H
MG
C
C H B

HH B
CG !
3
IGH
B
GC
BHG
B
CCHGH
? B
C
CB
B
H

B
.pull-right
J C
B
HG
? .pull-left
Navigation Toggle Icons
index.html M 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
G
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-*
3 H

attributes to HTML IG

JavaScript
Write JavaScript
CI
CI
GC
C
H
G

C H M
H CI
, J H
Using the Collapse JavaScript Plugin
By adding additional data- attributes, Bootstrap will add new behavior to our page when it loads.
index.html C
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

CB
C

B J H CB
B?

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
C
LH

G
G BG
IH
CB M
H
B

<ul class='nav ...'>...</ul>
</div>
</div>
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

B D
DBC
BIA
BA
A

H FBD
FB

A I
C BBF FD C
.caret
?
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.

? F
BBF FD C
ABI
F
? F

DBC
BIA
A

index.html ,F
IBA F

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

? #
BBF FD C

index.html ?
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.
,
I
I AF
B D
DBC BIA
FB
F DF

index.html
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>
</ul>

A
BD LBAF ?
D

</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

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

F A
FB
F
B F F ?
C
Dropping Down From Orbit
Level 5, Section 2

CodeSchool BlastingOffWithBootstrap PDF

Uploaded by

Document Information

Original Title

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

CodeSchool BlastingOffWithBootstrap PDF

Uploaded by

Copyright:

Available Formats

Lift O

HTML Page Structure

CSS Element Styling

JavaScript Page Behavior

HTML CSS JavaScript

HTML CSS JavaScript

HTML CSS JavaScript

HTML CSS JavaScript

HTML CSS JavaScript

HTML CSS JavaScript

HTML CSS JavaScript

HTML Bootstrap.css Bootstrap.js

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

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

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

4 Columns 4 Columns 4 Columns

class='col-md-4' class='col-md-4' class='col-md-4'

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

<div class='container'> U 

<div class='container'> EF 

Grid Size Grid Class Oset Class Screen Size

Medium .col-md-* .col-md-offset-* 992px+

Grid Size Grid Class Oset Class Screen Size

Small .col-sm-* .col-sm-offset-* 768px+

Medium .col-md-* .col-md-offset-* 992px+

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+

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+

.text-justify .text-right .text-center D

<div class='...'> ,B 

<div class='row features'>

<div class='...'> 3 

<div class='row well'> .well

<div class='row well well-lg'>

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

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

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

.btn-xs .btn-sm .btn-lg

<button type='button' class='btn btn-lg btn-default'>

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

.btn-default .btn-primary .btn-success

.btn-info .btn-danger .btn-warning 

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

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

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

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

<div class='navbar navbar-default'>

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

<div class='navbar navbar-default navbar-static-top'>

<ul class='nav navbar-nav navbar-right '>...</ul>

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

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

<button type='button'>Toggle navigation</button>

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

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

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

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

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

<div class='container'> U

<div class='container'> EF

.text-justify .text-right .text-center D

<div class='...'> ,B

<div class='...'> 3

<div class='row well'> .well

.btn-info .btn-danger .btn-warning