Bootstrap

(1)

(2)

Lift O

!

Level 1, Section 1

(3)

Lift O

!

Level 1, Section 1

(4)

So You Want To Build a Website…

An attractive, functioning website requires basic knowledge of structure, style, and behavior.

HTML

CSS

JavaScript

Page Structure

Element Styling

Page Behavior

(5)

Website Development Follows Some Typical Patterns

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

CSS

(6)

CSS

HTML JavaScript

(7)

CSS

HTML JavaScript

(8)

CSS

HTML JavaScript

(9)

CSS

HTML JavaScript

(10)

CSS

HTML JavaScript

IHI H I BHI JA

BL  FJAN HINAC

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.

(11)

CSS

HTML JavaScript

What Will Bootstrap Do For Us?

Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.

(12)

Bootstrap.css HTML

What Will Bootstrap Do For Us?

Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.

Bootstrap

Bootstrap.js

(13)

What to Expect From Bootstrap

(14)

What to Expect From Bootstrap

(15)

There are three ways to get access to the framework, and we’ll focus on one in particular.

http://go.codeschool.com/bootstrap-download

How To Get A Hold of Bootstrap

(16)

What Does The Framework Consist Of?

Let’s take a quick at Bootstrap’s!le structure to get a broad awareness of what we’re using.

(17)

What Does The Framework Consist Of?

dist

css

fonts

js

(18)

What Does The Framework Consist Of?

 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

bootstrap-theme.css

bootstrap-theme.css.map

bootstrap-theme.min.css

bootstrap.css

bootstrap.css.map

bootstrap.min.css

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  

(19)

What Does The Framework Consist Of?

dist

css

fonts

js

(20)

What Does The Framework Consist Of?

IHI H

 CI II C 

JH H CH

QAA I I IH

IIN HC

dist

css

fonts

js

glyphicons-hal

"

ings-regular.eot

glyphicons-hal

"

ings-regular.svg

glyphicons-hal

"

ings-regular.ttf

glyphicons-hal

"

ings-regular.wo

#

(21)

What Does The Framework Consist Of?

dist

css

fonts

js

(22)

What Does The

Frame

work Consist Of?

Let’s take a quick at

Let’s take a quick at Bootstrap’Bootstrap’ss!!le structure to get a broad awareness of what le structure to get a broad awareness of what we’rwe’re using.e using.

dist

css

fonts

js

bootstrap.js

bootstrap.min.js

npm.js

 C I CL  JC  -I!

IHI

(23)

What Does The

Frame

work Consist Of?

Let’s take a quick at

Let’s take a quick at Bootstrap’Bootstrap’ss!!le structure to get a broad awareness of what le structure to get a broad awareness of what we’rwe’re using.e using.

dist

css

fonts

js

(24)

Getting Started: Creating a Basic HTML File

To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML.

<head>

<

<titletitle>>Blasting Off With BootstrapBlasting Off With Bootstrap</</titletitle>>

<!DOCTYPE html>

<html

</head>

HI LQAA I HIJ LI  IN

_P

P

(25)

Getting Started: Creating a Basic HTML File

<!DOCTYPE html> <html lang='en'>

<head>

<title>Blasting Off With Bootstrap </title> </head>

<body>

MI LQAA B  N C

HB CICA CH

<h1>Blasting Off With Bootstrap</h1>

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

<h3>Book Today!</h3>

<h3>Go Anywhere</h3>

<h3>RocketBus®</h3>

(26)

Getting Started: Creating a Basic HTML File

<head>

<body>

<h1>Blasting Off With Bootstrap</h1> <h2>The Fastest Way to Space</h2>

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

L LQAA  HB H

I H J CH

(27)

Getting Started: Creating a Basic HTML File

<head>

<body>

<h3>Book Today!</h3> <h3>Go Anywhere</h3> <h3>RocketBus®</h3> </body> <p> </p> <p> </p> <p> </p> <p> </p>

(28)

Getting Started: Creating a Basic HTML File

<head>

<body>

<h3>Book Today!</h3> <h3>Go Anywhere</h3> <h3>RocketBus®</h3> </body> <p> </p> <p> </p> <p> </p> <p> </p> ... ... ... ...

(29)

Getting Started: Creating a Basic HTML File

<head>

<body>

<h3>Book Today!</h3> <h3>Go Anywhere</h3> <h3>RocketBus®</h3> </body> <p> </p> <p> </p> <p> </p> <p> </p> ... ... ... ...

 CH J CICI LQAA  

JA JIICH   JH I C

LI JC J  C IH 

(30)

Viewing Our Page Before Using Bootstrap

(31)

Adding the Bootstrap Framework

To get Bootstrap acting on our content, we’ll need to import a few extra items on our page.

<head>

<title>Blasting Off With Bootstrap </title>

</head> <body>

</body> </html>

...

QAA HI C I CAJ

I IHI AN N

JHC  AI I

(32)

Adding the Bootstrap Framework

<head>

</head> <body>

</body> </html>

...

QAA AH CAJ ?2JN

JH IHI CH I I

  JC  A ICH

(33)

Adding the Bootstrap Framework

<head>

</head> <body>

</body> </html>

...

ICAAN QH I

IHI -I ANP

LQAA MA IH AI

(34)

Let’s check out what Bootstrap will do to our existing HTML page.

The E

!

ects of Adding Bootstrap

QH J CIA

MHIC 

(35)

Let’s check out what Bootstrap will do to our existing HTML page.

The E

!

ects of Adding Bootstrap

  ?JHI  CI C C

HB CIAN HINA JIICH

QH HIAA  JC L C !

(36)

Our Visual Goal For This Level

We’ll 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

(37)

Bootstrap’s container_{class will responsively add margins, center, and wrap our content.}

<body>

</body>

The

container

_Class

QH AA  J HA 

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>

<button type='button'>Take the Tour</button> <button type='button'>Book Tickets Now</button>

(38)

<body>

</body>

The

container

_Class

<h3>Book Today!</h3> <p>...</p> <h3>Go Anywhere</h3> <p>...</p> <h3>RocketBus®</h3> <p>...</p>

<button type='button'>Take the Tour</button> <button type='button'>Book Tickets Now</button> <div class='container'>

</div>

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

(39)

The

container

_Class

H LAA I J

I CI 

LI HBI

C  

L C 

IAI  C!

(40)

The

container

_Class

(41)

The

container-fluid

_Class

Bootstrap’s

Bootstrap’s container-fluidcontainer-fluid_{class allows for stretching if it is}_{class allows for stretching if it is}_{desired on larger screens.}_{desired on larger screens.}

<body>

</body>

<h1>

<h1>Blasting Off With BootstrapBlasting Off With Bootstrap</h1></h1>

<h2>

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

<h3>

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

<h3>

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

<h3>

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

<

<button typebutton type=='button''button'>>Take the TourTake the Tour</</buttonbutton>>

<

<button typebutton type=='button''button'>>Book Tickets NowBook Tickets Now</</buttonbutton>>

<div

</div>

index.html

(42)

The

container-fluid

_Class

Bootstrap’s

Bootstrap’s container-fluidcontainer-fluid_{class allows for stretching if it is}_{class allows for stretching if it is}_{desired on larger screens.}_{desired on larger screens.}

index.html index.html <body> <body> </body> </body> <h1>

<h1>Blasting Off With BootstrapBlasting Off With Bootstrap</h1></h1>

<h2>

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

<h3>

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

<h3>

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

<h3>

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

<

<button typebutton type=='button''button'>>Take the TourTake the Tour</</buttonbutton>>

<

<button typebutton type=='button''button'>>Book Tickets NowBook Tickets Now</</buttonbutton>>

<div

</div>

<div

</div>

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!

(43)

The

container-fluid

_Class

Bootstrap’s

(44)

Lift O

!

(45)

(46)

Thinking In Grids

(47)

Our Site Wrapped in a

.container

8 FO F T

OFH 5 A

  I C

OE L0

(48)

Rows are horizontal groupings of data

Site Structure: Rows

8 FO E ,  C AO

(49)

Columns are vertical groupings of data

Site Structure: Columns

8 FO E

 LOH

HI FEO



(50)

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

Multiple Columns

  

HH  I

HI

U F

HH

(51)

Elements can span all columns in our grid

Our Header in a Grid

(52)

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

Taking Up Half the Page

A  6I

?OE L

(53)

You probably won’t ever need 12 individual columns, but 4 is common enough

Getting Even Smaller

4O E L  HI

(54)

Wire framing is a great way to visualize and plan out our page.

Wire framing our Grid Design

2HI AA L O  L  6 Columns 6 Columns 12 Columns 4 Columns 4 Columns 4 Columns

(55)

Bootstrap uses .col-md-* classes for denoting the number of columns

Bootstrap Medium Screen Grid Design

2HI OFHH AA L O  class='col-md-6' class='col-md-6' class='col-md-12' class='col-md-4' class='col-md-4' class='col-md-4'

(56)

index.html

Adding Grids to Our HTML

Here’s part of our content from level one that we’ll convert to grids

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

(57)

index.html

Using 12 Columns for our Title

8 EA O L HH  HI

Use a class of .col-md-12 to wrap areas of your page you want to take up the entire width.

... </div>

(58)

index.html

Lead Grid Using 6 Columns

8O E HA OSO A ?OO

FHH O L - HI

8 FI FHH O L OE - HI

Determine the number of columns you want, then pick the correct Bootstrap class for it.

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

(59)

index.html

Lead Grid Using

.col-md-6

E HI

LL FA ?T FA

Use a class of .col-md-6 to contain an element to 6 columns, or half the page.

<h2>The Fastest Way to Space</h2> <p>Make your way to space...</p> </div>

</div>

(60)

index.html

Feature Grid Using 4 Columns

OU I E CO O L  HI

Using one-third of the page, or 4 columns. 4 columns * 3 elements = 12 columns total.

<div class='container'>... <h3>Book Today!</h3>

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

(61)

index.html

Feature Grid Using

.col-md-4

3E CO FHH O L  HI The next featured item will be immediately to the right.

<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®</h3> <p>For cheapest fares, catch the…</p> </div> </div> <div <div <div class='col-md-4'> class='col-md-4'> class='col-md-4'> </div> </div>

(62)

Our page is starting to take shape!

(63)

index.html

Grid Refactoring

U LF ?T HI ?O

EO ?O ?T 0

(64)

Adding Rows using

.row

F  I  A

 HO F O A

The number of columns in each row adds up to 12.

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

(65)

Our page looks almost the same, but it’s actually using 15px more of the screen with rows

Row Preview

*  C *  C OO OO

(66)

index.html

Adding too Many Columns

EO HA OEF H

HF F  ?0

<div

<div

<div

</div>

What should happen if you include more than 12 columns in a row?

(67)

Our last featured item doesn’t have enough space and moves onto its own row

Multiple Rows

9I OEF OEO ELLA

?C  OOA F

(68)

A popular proportion for sites with grids is 9 columns + 3 columns

Designing With Grids

/&* F A C

?H FOE

FA?

9 Columns 3 Columns

(69)

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

Letting Columns Breathe with Blanks

5 HA 

O  HI

C LAAF0

8 Columns 12 Columns 3 Columns 1

(70)

index.html

Empty Columns

 2HA O 

ILOT HI ?O

OE F  ?OO T

(71)

index.html

Empty Columns Using an O

!

set

1AA  HI C LAAF O OE HCO C OE FA?

col-md-offset-*

EF  HA

? 

</section>

The .col-md-offset-*_{class is used to add left padding for a given number of columns.}

(72)

An example blog from the Bootstrap website using this technique

Blog Example

. HI C OO

* HI C OE FA?  HI CCO

(73)

Thinking In Grids

(74)

(75)

Responsive Gridding

(76)

Our Website So Far

I B OL ?OHI L

(77)

Our Goal Mobile Layout

0E E EH EI

HL LONEI

ON F 8S

I EN I L

8E E?I HI

UL EI N

H NSEI 

I  I

(78)

Medium Screen Size

Grid Class .col-md-* O_!set Class .col-md-offset-* Screen Size 992px+ Grid Size Medium

(79)

Designing for Smaller Screens

Grid Class .col-md-* O_!set Class .col-md-offset-* Screen Size 992px+ .col-sm-* .col-sm-offset-* _768px+ Grid Size Medium Small

(80)

index.html

Our Current Features

.? BNOL  O I 

EBBLIN L I HL ?LI

<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®</h3>... </div> </div>

(81)

index.html

Adding Grids for Smaller Resolutions

8 E LF EI

R I EL

<div class='row'> <div class=' '> <h3>Book Today!</h3>... </div> <div class=' '> <h3>Go Anywhere</h3>... </div> <div class=' '> <h3>RocketBus®</h3>... </div> </div>

Our featured items will have the same grid sizes in small and medium mode.

col-sm-4

(82)

Feature Columns in Medium Sized Screens

NOL L NE IIEI  ?OHI ?

EEI N 

EI VHEOHW H

(83)

Feature Columns in Small Sized Screens

4OL BNOL ? I

 ?OHI EI VHW

H I P

EEI NE 

I  NN

(84)

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 ?

(85)

Extra Small Browser Sizes

Grid Class

.col-md-*

O

O_!_!set Classset Class

.col-md-offset-* .col-md-offset-* Screen Size Screen Size 992px+ 992px+ . .ccooll--ssmm--* * ..ccooll--ssmm--ooffffsseett--** _768px+_768px+ . .ccooll--xxss--* * ..ccooll--xxss--ooffffsseett--** _0px+_0px+ Grid Size Grid Size Medium Medium Small Small Extra Small Extra Small

Great for specifying the minimum width for elements. Also the layout used on many phones.

(86)

index.html

Adding Grids for Extra Small Screens

<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®</h3>... </div> </div>

We could use the extra small grids, but there’s a better way.

2F  EN

?LH  ?I  NNL!

(87)

Reviving our Goal Layout

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

(88)

index.html

Features in Extra Small Screens

VF 8SW E NF O   ?OHI

8 NL N

BNOL E NF O 

?OHI I  

VF 8SW

<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®</h3> </div> </div> col-xs-12 col-xs-6 col-xs-6

(89)

Extra Small Feature Layout

N NE F

EF I  I

 NE I N  I

BBN N VF 8SW

(90)

Centering Features for Extra Small Screens

9 N HE  ?OHI 8 LL B N ? IUN HNNL <div class='row'> <div class='col-sm-4 '> <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®</h3>

</div> </div>

This will center this column giving it a column of spacing on each side

(91)

“Book Today” On Extra Small Screens

VF 8SW NI ON

I RNL H ?LI

(92)

Overriding O

!

sets 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

(93)

index.html

Removing the O

!

set for Small Screens

<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®</h3> </div> </div> 6HP N BBN EI VHW H I P col-sm-offset-0

(94)

Removing O

!

sets

 BBN BL N BELN BNOL R?N EI RNL H H

(95)

Very Large Screens

Grid Class .col-md-* O_!set Class .col-md-offset-* Screen Size 992px+ .col-sm-* .col-sm-offset-* _768px+ .col-xs-* .col-xs-offset-* _0px+ .col-lg-* .col-lg-offset-* _1200px+ Grid Size Medium Small Extra Small Large

(96)

Hiding Columns

 O IS

 NE EH

BL VHEOHW I

VLW LONEI

(97)

index.html

Hiding Elements using

.hidden-*

0E NE HIN BL H I RNL H LONEI We can hide elements in speci!c screen sizes

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

O ?I E HIN EI NL ?LI ET N

</div>

(98)

Hiding Elements using

.hidden-*

8 EH E EI BL H

I RNL H LONEI

(99)

index.html

Making Elements Visible using

.visible-*

4IS  NE HIN EI

HEOH I L LONEI

We can specify a screen size for elements to be visible

.visible-xs

.visible-sm

.visible-md

.visible-lg

O ?I ?EBS NL

?LI ET N

</div>

(100)

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 

(101)

(102)

Typography

(103)

“The art and technique of arranging type to make written language most appealing” - Wikipedia

What is Typography?

bootstrap.css

body {

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

D  B L

 B H B

? L

B 

(104)

Using Bootstraps manual typography to improve your page

Manual Typography for the Lead

 B  A? H   B H A

(105)

index.html

Using the

.lead

Typography Class

2    D

H B H

.lead

 ADB AB

B A  AD

<p class='lead'>Make your way to space...</p> </div> ...

(106)

Comparing Our Lead

No.lead

Using .lead

.  H B

H   B H!

(107)

N B    H H A

Bootstrap has a number of alignment classes for text.

(108)

index.html

Using the

.text-*

Typography Classes

  B  

  B

.text-center .text-right .text-left .text-nowrap .text-justify

D  A 

 B BAB

<p>Even if you're traveling tomorrow...</p> </div>

... </div>

(109)

Centering Our Features

  B    B B   H     B  H H D

(110)

Bootstrap comes with 200 icons to use, named “glyphicons”.

Glyphicons

0AA   2L

BB  B!

dist

css

fonts

js

glyphicons-hal

!

ings-regular.eot

glyphicons-hal

!

ings-regular.svg

glyphicons-hal

!

ings-regular.ttf

glyphicons-hal

!

ings-regular.wo

"

http://go.codeschool.com/bootstrap-glyphicons

(111)

index.html

Using Glyphicons

,B  HB B

<img>



N H B

<i>

 H B

Icon classes should only be used on elements that contain no text content and have no child elements.

<i class='glyphicon'></i> <h3>Book Today!</h3>

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

L  B 

.glyphicon

 BN  BLB N

B  DL  B  H

(112)

index.html

Adding an Icon

2 _.glyphicon  D  H H  DI B B

Pick out an icon to use. In this case we’ll use the briefcase icon.

<i class='glyphicon '></i> <h3>Book Today!</h3>

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

2 _{.glyphicon-briefcase}  D  B  H H

(113)

index.html

Adding Icons for Other Features

<i class='glyphicon '></i> <h3>Book Today!</h3>

</div>

<i class='glyphicon glyphicon-random'></i> <h3>Go Anywhere</h3>

</div>

<i class='glyphicon glyphicon-send'></i> <h3>RocketBus®</h3>

</div>

(114)

Our Icons Look a Little Small

body { font-size: 14px; ... }

L  H B

?  A

0AA  D 

H

font-size

  B 

HAD  HD   B

bootstrap.css

(115)

index.html

Adding a Stylesheet

<head>

</head> <body> ... </body> </html>

N   H L B 

main.css

L 

(116)

index.html

Increasing the Icon Font Size

 B 

L  B

HB

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

_{ B HB}

_.features

_{  }

<i class='glyphicon glyphicon-briefcase'></i> <h3 class='text-center'>Book Today!</h3>

</div> ... </div>

(117)

Larger Icons

H B  B D!

B    B  B

H A  A L

(118)

Changing the Icon Color

css/main.css

 B L  B 

H L  !

N B  ?D H B

? H   ?B!

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

(119)

Cleaning up our Footer

N  H AIB

 HL H

N  

 B  

(120)

index.html

<div class='...'> <h4>Links</h4>

Our Footer Code So Far

N  B?  

 B  B 

list-style

 

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

(121)

index.html

Unstyled Lists

3  D    AI  H .list-unstyled .list-inline 3 ,BB  B  <div class='...'> <h4>Links</h4> class='list-unstyled'> <ul <div class='...'> <h4>Links</h4> <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>

(122)

Our Finished Footer

H  ?

?  B!

(123)

Typography

(124)

(125)

Enough CSS to be Dangerous

(126)

Adding a Dash of Style

 ?? . . ? . ? . B B . ? . ?  ..?  B ?   ?  ?. ? 

(127)

index.html

Another Look at Our Lead

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

(128)

index.html

That Went

.well

A .  ? ?

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

Use the.well class to give the element a gray background and a rounded gray border.

(129)

index.html

Adding More Spacing

  . ? ? B

.well-lg .well-sm

  A  . 

 B  . .? .

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

well-lg

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

(130)

Well Preview

 .  

. ? ?

? ? ?

?? C?!

(131)

index.html

Styling Our Buttons

<button type='button'>Take the Tour</button> <button type='button'>Book Tickets Now</button>

?? ? ?   ??

 . ??. . ? ?B. ? ?

Our buttons look di! erent in every browser. Let’s use Bootstrap to standardize them.

<button type='button' <button type='button'

class='btn </button> class='btn </button>

'>Take the Tour '>Book Tickets Now

(132)

Making Our Buttons Larger

,. ?

.glyphicon

 B



.btn

. ? ?? .

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

 ?     !

We can change the size of buttons by adding another class.

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

(133)

index.html

Changing Button Color

 . . ? .? ?. ?!

We can change the background and text color of buttons by adding another class.

btn-default

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

Take the Tour </button>

<button type='button' class='btn btn-lg '> Book Tickets Now

(134)

index.html

Many Many Colors

 ??  A .!

.btn-success .btn-primary

.btn-default

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

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

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

(135)

Buttons and Wells

(136)

Enough CSS to be Dangerous

(137)

(138)

Navigating Navigation

(139)

We Need Navigation!

     

 ?  ?!

  A  

 C   

  A 

(140)

Our Goal Navigation

.?   

? A

We’ll be building out our navigation to include a few links an a link to the homepage.

C ?   

  C ?

(141)

index.html

Expanding Our Header

<h1>Blasting Off With Bootstrap</h1> </div>

</div> </div>

A C C 

(142)

index.html

Removing Grids

C    ?  A

<h1>Blasting Off With Bootstrap</h1> </div>

</div> </div>

(143)

index.html

Adding Links

A  A A   ?A!

</div>

We’ll start our navigation with some of the links that are already in our footer.

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

(144)

Not So Styled Nav

   A

  H

 

<h1>

(145)

index.html

Converting Our

H1

Blasting Off With Bootstrap </h1>

A AC      C

?   

h1

(146)

index.html

Using

.navbar-brand

Blasting Off With Bootstrap

C     F 

C  A

The .navbar-brand class will !oat the text left, increase the font size and more.

(147)

index.html

Using

.nav

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

</a>

A ?    

 A

.nav

A 

.glyphicon



.btn

I A CA 

 AAA

(148)

.nav

Modi

!

ers

C  A   

The .nav class with modi!ers can be used for a main navigation, or a subnav on your page.

(149)

Our Navigation In Progress

.navbar-nav

A  

A  C

A

C  A A ?

 C   C 

(150)

Our Goal Nav

A    C

 AA AA  A

(151)

index.html

Using

.navbar

A  A  

  A ?

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

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

 CA

.navbar-default

 C A

(152)

Navbar in a container

A 

C A

A

AA 

 A

A A  A  C

(153)

Setting a Background for our Navigation

index.html

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

</div>

.navbar-default

A

 C 

AA   ?

... </div> </div>

(154)

Positioning our Navigation

index.html .navbar-static-top .navbar-static-bottom .navbar-fixed-top .navbar-fixed-bottom

F A  A 

,  A

  ?

The.navbar has some modi!cations available that allow "exibility in navbar position and visibility.

(155)

Our Finished Navigation

(156)

An Alternate Navigation

(157)

.nav

.navbar

What’s the di_{! erence between these two?}

(158)

Navigating Navigation

(159)

(160)

JavaScript Components

(161)

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

(162)

Expandable Navigation

(163)

CSS is for styling the page, JavaScript is for adding behavior to the page.

CSS vs JavaScript Refresher

CSS JavaScript

Style

Behavior

CCG CBHG

CGHCBB B

B H

? LB ?MGG

(164)

index.html

Our Existing Navigation

 _.nav BH G H 

Here’s the navigation we’ve build so far. It has a .navbar with a .container inside of it.

</div>

(165)

index.html

Collapsing Our Navigation

I BJHCB G B B  GB GNG!

C C  CBM  H CBM B LH G C

Adding the.collapse class will hide an element in all resolutions thanks to the collapse plugin.

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

... </ul>

(166)

index.html

Showing Our Navigation For Larger Screens

I BJHCB GCG I C G GBG B

CJ IH G B B LH G C

The .navbar-collapse class will only hide the nav in extra small mode.

navbar-collapse collapse

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

(167)

index.html

Toggling Navigation

G G  CI IHHCB  

We’ll add a button that will make our navigation links visible only when the user desires it.

navbar-collapse collapse

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

</div> </div>