Вы находитесь на странице: 1из 197

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

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

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

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

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

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

What Does The Framework Consist Of?


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

dist
css
fonts
js

What Does The Framework Consist Of?


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

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

What Does The Framework Consist Of?


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

dist
css
fonts
js

What Does The Framework Consist Of?


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

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

What Does The Framework Consist Of?


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

dist
css
fonts
js

What Does The Framework Consist Of?


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

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!


What Does The Framework Consist Of?


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

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

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'>
<head>
<title>Blasting Off With Bootstrap</title>
</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&reg;</h3>

</body>
</html>

dist/index.html

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'>
<head>
<title>Blasting Off With Bootstrap</title>
</head>
<body>

L
 L QAA
 
 H B 

I 
 H

 J 

CH

H


<h1>Blasting Off With Bootstrap</h1>


<h2>The Fastest Way to Space</h2>
<p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<h3>Book Today!</h3>
<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>
<h3>Go Anywhere</h3>
<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>
<h3>RocketBus&reg;</h3>
<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

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'>
<head>
<title>Blasting Off With Bootstrap</title>
</head>
<body>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<p>

</p>

<h3>Book Today!</h3>
<p>
</p>
<h3>Go Anywhere</h3>
<p>
</p>
<h3>RocketBus&reg;</h3>
<p>
</p>
</body>
</html>

dist/index.html

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'>
<head>
<title>Blasting Off With Bootstrap</title>
</head>
<body>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2> <p> ... </p>
<h3>Book Today!</h3> <p> ... </p>
<h3>Go Anywhere</h3> <p> ... </p>
<h3>RocketBus&reg;</h3> <p> ... </p>

</body>
</html>

dist/index.html

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'>
<head>
<title>Blasting Off With Bootstrap</title>
</head>
<body>
<h1>Blasting Off With Bootstrap</h1>
<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&reg;</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>
<title>Blasting Off With Bootstrap</title>
<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

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>
<title>Blasting Off With Bootstrap</title>
<link href='css/bootstrap.css' rel='stylesheet'>
</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

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>
<title>Blasting Off With Bootstrap</title>
<link href='css/bootstrap.css' rel='stylesheet'>
</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>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<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&reg;</h3> <p>...</p>
</body>

QH
 AA
 
 J 
 H A 
 

CI CI
 L I C
 J 
 N
 I

The

container Class

Bootstraps container class will responsively add margins, center, and wrap our content.
index.html
<body>
<div class='container'>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>

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

<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&reg;</h3> <p>...</p>
</div>
</body>

The

container Class

Bootstraps container class will responsively add margins, center, and wrap our content.

H
 L AA
 I 
 J 

I 
 CI 
 

L I 
 HB I

C 
 
 

L 
 C
 

I A I
 
 C !

The

container Class

Bootstraps container class will responsively add margins, center, and wrap our content.

The

container-fluid Class

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


index.html
<body>
<div class='container'>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<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&reg;</h3> <p>...</p>
</div>
</body>

The

container-fluid Class

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


index.html
<body>
<div class='container'>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</div>
<div class='container-fluid'>
<h3>Book Today!</h3> <p>...</p>
<h3>Go Anywhere</h3> <p>...</p>
<h3>RocketBus&reg;</h3> <p>...</p>
</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

container-fluid Class

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

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

<div class='container'>
<h1>Blasting Off With Bootstrap</h1>
<h2>The Fastest Way to Space</h2>
<p>Make your way to space...</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
<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='container'>
<div class='col-md-12'>
<h1>Blasting Off With Bootstrap</h1>
</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='container'>
<div class='col-md-12'>...</div>

8 O
 E 
 H A
 O SO
 A
 ? OO
FHH
 O 
 L
 -
 H I

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


<p>Make your way to space...</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
<img src='images/blast.png' alt='Blasting Off' />
...
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

<div class='container'>
<div class='col-md-12'>...</div>
<div class='col-md-6'>
<h2>The Fastest Way to Space</h2>
E
<p>Make your way to space...</p> ...
LL
</div>
<div class='col-md-6'>
<img src='images/blast.png' alt='Blasting Off' />
</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'>...
<h3>Book Today!</h3>
<p>Even if you're traveling</p>
<h3>Go Anywhere</h3>
<p>If you need to get to space today...</p>
<h3>RocketBus&reg;</h3>
<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'>...
<div class='col-md-4'>
<h3>Book Today!</h3> <p>Even if you're traveling</p>
</div>
<div class='col-md-4'>
<h3>Go Anywhere</h3> <p>If you need to get to space today</p>
</div>
<div class='col-md-4'>
<h3>RocketBus&reg;</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'>
<div class='col-md-12'>...</div>
<div class='col-md-6'>...</div>
<div class='col-md-6'>...</div>
<div class='col-md-4'>...</div>
<div class='col-md-4'>...</div>
<div class='col-md-4'>...</div>
</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='container'>
<div class='row'>
<div class='col-md-12'></div>
</div>
<div class='row'>
<div class='col-md-6'></div>
<div class='col-md-6'></div>
</div>
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-4'></div>
<div class='col-md-4'></div>
</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='container'>
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-5'></div>
<div class='col-md-4'></div>
</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='container'>
<div class='row'>
<div class='col-md-12'></div>
</div>
<div class='row'>
<div class='col-md-8'></div>
<div class='col-md-1'></div>
<div class='col-md-3'></div>
</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='container'>
<div class='row'>
<div class='col-md-12'></div>
</div>
<div class='row'>
<div class='col-md-8'></div>
<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'>
<div class='col-md-4'>
<h3>Book Today!</h3>...
</div>
<div class='col-md-4'>
<h3>Go Anywhere</h3>...
</div>
<div class='col-md-4'>
<h3>RocketBus&reg;</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'>
<h3>Book Today!</h3>...
</div>
<div class='col-sm-4'>
<h3>Go Anywhere</h3>...
</div>
<div class='col-sm-4'>
<h3>RocketBus&reg;</h3>...
</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'>
<h3>Book Today!</h3>...
</div>
<div class='col-xs-4'>
<h3>Go Anywhere</h3>...
</div>
<div class='col-xs-4'>
<h3>RocketBus&reg;</h3>...
</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'>
<h3>Book Today!</h3>
</div>
<div class='col-sm-4 col-xs-6'>
<h3>Go Anywhere</h3>
</div>
<div class='col-sm-4 col-xs-6'>
<h3>RocketBus&reg;</h3>
</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'>
<h3>Book Today!</h3>
</div>
<div class='col-sm-4 col-xs-6'>
<h3>Go Anywhere</h3>
</div>
<div class='col-sm-4 col-xs-6'>
<h3>RocketBus&reg;</h3>
</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'>
<h3>Book Today!</h3>
</div>
<div class='col-md-3 col-sm-4 col-xs-6'>
<h3>Go Anywhere</h3>
</div>
<div class=col-md-3 col-sm-4 col-xs-6'>
<h3>RocketBus&reg;</h3>
</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'>...</div>
<div class='col-md-6 hidden-sm hidden-xs'>
<img src='images/blast.png' alt='Blasting Off' />
</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'>...</div>
<div class='col-md-6 visible-md visible-lg'>
<img src='images/blast.png' alt='Blasting Off' />
</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'>
<div class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<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='...'>
<h3>Book Today!</h3>
<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>
<h3>Book Today!</h3>
<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>
<h3>Book Today!</h3>
<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='...'>
<i class='glyphicon glyphicon-briefcase'></i>
<h3>Book Today!</h3>
</div>
<div class='...'>
<i class='glyphicon glyphicon-random'></i>
<h3>Go Anywhere</h3>
</div>
<div class='...'>
<i class='glyphicon glyphicon-send'></i>
<h3>RocketBus&reg;</h3>
</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/bootstrap.css' rel='stylesheet'>
<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='...'>
<i class='glyphicon glyphicon-briefcase'></i>
<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>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</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 class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<p class='lead'>Make your way to space...</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</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 class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<p class='lead'>Make your way to space...</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</div> ...
</div>




?


Adding More Spacing


index.html

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






.
<div class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<p class='lead'>Make your way to space...</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</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

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


<button type='button'>Book Tickets Now</button>


 .


? ? . 
 . 
 ? 
 ?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='container'>
<div class='row'>
<div class='col-md-12'>
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
</div>




Removing Grids
Bootstraps navigation classes dont rely on grids.

index.html

C 





<div class='container'>
<div class='row'>
<div class='col-md-12'>
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
</div>


 
 ?


 


Adding Links
Well start our navigation with some of the links that are already in our footer.

index.html

<div class='container'>
<h1>Blasting Off With Bootstrap</h1>
<ul>
<li><a href='tickets.html'>Tickets</a></li>
!
<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

<div class='container'>
<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

<div class='container'>
<a href='/' class='navbar-brand'>
Blasting Off With Bootstrap
</a>

<ul>...</ul>
</div>

C 

C 






 


 A


 F 
 


Using .nav
index.html

<div class='container'>
<a href='/' class='navbar-brand'>
Blasting Off With Bootstrap
</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 class='container'>
...
</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'>


<div class='container'>
<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


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


<div class='container'>
<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'>
<span class='sr-only'>Toggle navigation</span>
</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'>


<span class='sr-only'>Toggle navigation</span>
</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

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


<span class='sr-only'>Toggle navigation</span>
<i class='glyphicon glyphicon-align-justify'></i>
</button>
<button type='button' class='navbar-toggle'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<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

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


<div class='container'>
<a href='index.html' class='navbar-brand'>...</a>
<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 navbar-default navbar-static-top'>


<div class='container'>

<div class='navbar-header'>
<a href='index.html' class='navbar-brand'>...</a>
<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='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
<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='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
<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'>
<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>.

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 href='#' data-toggle='dropdown'>
About <span class='caret'></span>
</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><a href='story.html'>Our Story</a></li>
<li><a href='contact.html'>Contact Us</a></li>

<li class='divider'></li>
<li><a href='/blog'>Blog</a></li>

<li class='divider'></li>
<li><a href='http://twitter.com/...'>Twitter</a></li>
<li><a href='http://facebook.com/...'>Facebook</a></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 href='#' data-toggle='dropdown'>
About <span class='caret'></span>
</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'>
About <span class='caret'></span>
</a>
...
</li>

, 
 F

 F


 H 
 H D CF

? #
 F
A
 FB
 F 
 B F F ?
 C

??


Dropping Down From Orbit


Level 5, Section 2