bootstrap

Lift O Level 1, Section 1

So You Want To Build a WebsiteAn attractive, functioning website requires basic knowledge of structure, style, and behavior.

HTML

CSS

JavaScript

Page Structure

Element Styling

Page Behavior

Website Development Follows Some Typical PatternsWriting HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

CSSHTML JavaScript

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

CSSHTML JavaScript

Website Development Follows Some Typical Patterns

CSSHTML JavaScript

%%IHI(& H I B%HI &%&JA( (BL%(! %( FJ!AN HINAC C %(C0C N%J( LHI

Frameworks Can Make Our Site-Building Life Much EasierA framework is a downloadable library of tools that assist with adding style and functionality to your website.

Bootstrap

CSSHTML JavaScript

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

Bootstrap

Bootstrap.cssHTML

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

QAA JA H%B & HI(JIJ( C IC AI %%IHI(& I! ( % H%B JHJA HINAC C ,%( %%A (I

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

What to Expect From BootstrapHeres the goal for our end product at the end of this course.

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

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

How To Get A Hold of Bootstrap

, N%J A(N !C%L .HH %( HH N%J C , IH %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


distcssfontsjs


BC AH ( JH LC I HI %H A, JI %( %J( ,A%&BCI LQAA JH I C%CBC %CH

distcss

fontsjs

bootstrap-theme.cssbootstrap-theme.css.mapbootstrap-theme.min.cssbootstrap.cssbootstrap.css.mapbootstrap.min.css

H H I BC %%IHI(&HH A LQAA JH C %J( . &H ,I LAA H, JH (%B CC I% L(I JC %


distcssfontsjs


%%IHI(& &(%,H %CI II C JH H %CH QAA I I% IH &(IIN H%%C

distcssfonts

js

glyphicons-halings-regular.eotglyphicons-halings-regular.svgglyphicons-halings-regular.ttfglyphicons-halings-regular.wo


distcssfontsjs


distcssfontsjs

bootstrap.jsbootstrap.min.jsnpm.js

% C I% !C%L JC % -,(&I! %%IHI(& LAA B! I HN %C JH


distcssfontsjs

Getting Started: Creating a Basic HTML FileTo get up and running with Bootstrap, well need to establish our sites home page with some HTML.

Blasting Off With Bootstrap

(HI LQAA I HIJ& LI %IN&P

PIC H I LI & IIA

dist/index.html



MI LQAA B! %N C H%B %(C0I%CA CH

Blasting Off With BootstrapThe Fastest Way to Space

Book Today!

Go Anywhere

RocketBus

dist/index.html




Book Today!

Go Anywhere

RocketBus

Make your way to space in the comfort of your own rocket, elevator or transporter.

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.

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!

For cheapest fares, catch the next RocketBus to the stars. Cheaper on your wallet, and easiest way to make friends.

%L LQAA H%B &((&H I% H( %J( CH

dist/index.html




Book Today!

Go Anywhere

RocketBus

dist/index.html




Book Today!

Go Anywhere

RocketBus

...

...

...

...

dist/index.html




Book Today!

Go AnywhereRocketBus

...

...

......

% CH %J( %CICI LQAA %J&A JII%CH %( JH( I% C LI JC( %J( C IH &((&

Take the TourBook Tickets Now

dist/index.html

Viewing Our Page Before Using BootstrapHeres a view of our basic HTML without any of the magic of Bootstrap.

Adding the Bootstrap FrameworkTo get Bootstrap acting on our content, well need to import a few extra items on our page.


...

QAA (HI C I% CAJ I %%IHI(& A((N N JHC (AI, &I

dist/index.html



...

QAA AH% CAJ ?2J(N JH %%IHI(& CH I I% % JC % %%A ICH

dist/index.html



...

I%CAAN (QH I %%IHI(& -,(&I A((NPLQAA M&A%( IH AI(

dist/index.html

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

The Eects of Adding Bootstrap

(QH %J( CIA MHIC &

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

The Eects of Adding Bootstrap

% ( ?JHI %CI C C H%B (CIAN HINA JII%CH (QH HIAA JC L C %!

Our Visual Goal For This LevelWell be using classes to improve our HTML visually, but without writing a single line of CSS.

QAA I %J( %CICI CI( ILC &( % H B(CH JHC %%IHI(&QH .container AHH

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

The container Class

(QH AA % %J( ,HA & %CICI LIC %J( %N IBlasting Off With BootstrapThe Fastest Way to Space

Book Today! ...

Go Anywhere ...

RocketBus ...

Take the Tour

Book Tickets Now

index.html

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

The container Class


The Fastest Way to Space

Book Today! ...

Go Anywhere ...

RocketBus ...

Take the Tour

Book Tickets Now

C .container AHH (IH M LI ABCI II (H&%CH I% I J((CI H0 % I (%LH( LC%L

index.html

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

H LAA I! J& I CI( & LI HB(I &C ,( ,L %C IAI %( &%C!

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

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



Book Today! ...

Go Anywhere ...

RocketBus ...

Take the Tour

Book Tickets Now

index.html


index.html



Book Today! ...

Go Anywhere ...

RocketBus ...

Take the Tour

Book Tickets Now

%L %J( IJ(H LAA I %CIC( II LAA HI(I I CI( & (IIN HINAH C JHJA %( C %CAN %C AHH!

Lift O Level 1, Section 1

Thinking In Grids Level 2, Section 1

Our Site Wrapped in a .container

81. /FO# F/ 2#.T 2#.OF!H 5,3 A, 3# 1/# I,.# ,C OE# L%#0

So far weve learned how a .container class helps structure our content.

Rows are horizontal groupings of data

Site Structure: Rows

81. /FO# E/ , .,3/ ,C AO

Columns are vertical groupings of data

Site Structure: Columns

81. /FO# E/ ,+# !,+!#LO1H !,H1I+ .F%EO +,3

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

Multiple Columns

# !+ 1/# HH ,. /,I# !,H1I+/ #U.# 1/F+% HH

Elements can span all columns in our grid

Our Header in a GridFOH# /L+/ !,H1I+/

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

Taking Up Half the Page

#A 6I%# ?,OE /L+ - !,H1I+/

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

Getting Even Smaller

4#O1.#/ #!E /L+ !,H1I+/

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

Wire framing our Grid Design

2,H1I+/ AA 1L O, L#. .,3

6 Columns6 Columns

12 Columns

4 Columns4 Columns4 Columns

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

Bootstrap Medium Screen Grid Design

2,H1I+/ /OFHH AA 1L 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'

index.html

Adding Grids to Our HTMLHeres part of our content from level one that well convert to grids


The Fastest Way to Space Make your way to space...Take the TourBook Tickets Now

...

index.html

Using 12 Columns for our Title

81. E#A#. O(#/ 1L HH !,H1I+/

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


...

index.html

Lead Grid Using 6 Columns

81O E H#A O#SO +A ?1OO,+/ 3FHH O(# 1L - !,H1I+/

81. FI%# 3FHH O(# 1L +,OE#. - !,H1I+/

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

The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now

...

...

index.html

Lead Grid Using .col-md-6

E#/# !,H1I+/ LL#. /FA# ?T /FA#

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

...

The Fastest Way to Space Make your way to space...

...

index.html

Feature Grid Using 4 Columns

#OU/ I(# #!E C#O1.# O(# 1L !,H1I+/

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

...Book Today!Even if you're traveling

Go Anywhere If you need to get to space today...

RocketBus For cheapest fares, catch the

index.html

Feature Grid Using .col-md-4

3!E C#O1.# 3FHH O(# 1L !,H1I+/The next featured item will be immediately to the right.

...

Book Today! Even if you're traveling

Go Anywhere If you need to get to space today

RocketBus For cheapest fares, catch the

Our page is starting to take shape!

Column Preview

index.html

Grid Refactoring

... ... ... ... ... ...

#U.# %.,1LF+% ?T !,H1I+ ?1O 3EO ?,1O ?T .,30

Its dicult to know when a new row starts without doing math.

Adding Rows using .row

/F+% .,3 I(#/ ,1. !,A# H,O #/F#. O, .#A

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

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

Row Preview

* .,3/ ,C !,+O#+O

index.html

Adding too Many Columns

EO 3,1HA OEF/ H,,( HF(# F+ ?.,3/#.0

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

Our last featured item doesnt have enough space and moves onto its own row

Multiple Rows

9I# OEF+% OEO ELL#+#A ?#C,.# 3# /O.O#A 1/F+% .row

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

Designing With Grids

/&* F/ %,,A C,. ?H,%/ 3FOE /FA#?./

9 Columns 3 Columns

12 Columns

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

Letting Columns Breathe with Blanks

5,3 !,1HA 3# !.#O# !,H1I+ ,C LAAF+%0

8 Columns

12 Columns

3 Columns1

index.html

Empty Columns

,1 2,1HA !.#O# + #ILOT !,H1I+ ?1O OE#.# F/ ?#OO#. 3T

Dont create empty columns. Bootstrap has a better way!

index.html

Empty Columns Using an Oset

1AA/ !,H1I+ ,C LAAF+% O, OE# H#CO ,C OE# /FA#?.

col-md-offset-*

EF/ !,1HA ?#

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

col-md-offset-1

An example blog from the Bootstrap website using this technique

Blog Example

. !,H1I+/ C,. !,+O#+O

* !,H1I+/ C,. OE# /FA#?.

!,H1I+ ,CC/#O

Thinking In Grids Level 2, Section 1

Responsive Gridding Level 2, Section 2

Our Website So Far

+I" +B +OL ?+(OHI. L" ,,(E"! B+L .?L""I. "(+2 ,R

It looks great on our desktops screen, but if we view it on a phone, our columns are gone!

Our Goal Mobile Layout

0E!" E$ EH$" EI .H(("L L".+(ONE+I.

ON ++F 8+!S +I EN. +2I L+2

8%E. E?+I H"I. 2"UL" .""EI$ N%" .H" .NS(EI$ . +I ,%+I"

Medium Screen Size

Grid Class

.col-md-*

Oset Class

.col-md-offset-*

Screen Size

992px+

Grid Size

Medium

A good starting point for your design. Looks good on laptops and desktops.

Designing for Smaller Screens

Grid Class

.col-md-*

Oset Class

.col-md-offset-*

Screen Size

992px+

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

Grid Size

Medium

Small

The small grid size is used for smaller resolutions, often tablets or compact laptop screens.

index.html

Our Current Features

.?% B"NOL" .%+2. O, +I !EBB"L"IN L+2 +I .H(("L .?L""I.

Book Today!... Go Anywhere... RocketBus...

Our columns only work with a resolution of 992px and up.

index.html

Adding Grids for Smaller Resolutions

8%"." 2E(( 2+LF EI

,R I! %E$%"L


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

col-sm-4

col-sm-4

col-sm-4

Feature Columns in Medium Sized Screens

"NOL". L" .NE(( .,IIEI$ ?+(OHI. "?%

E"2EI$ N%" ,$" EI VH"!EOHW H+!"

Feature Columns in Small Sized Screens

4OL B"NOL". "?% .,I ?+(OHI. EI V.H((W H+!" I! +P"

E"2EI$ N%E. ,$" +I N("N

Extra Small Mode

%N +ON "(+2 ,R, 0"L"U. +OL ,%+I" PE"2 ?(("! V"RNL .H((W H+!"

"UP" (+.N +OL ?+(OHI. $EI! 2"NU. (++F EIN+ %+2 N+ O." EN H+L" .,?"

Extra Small Browser Sizes

Grid Class

.col-md-*

Oset Class

.col-md-offset-*

Screen Size

992px+


.col-xs-* .col-xs-offset-* 0px+

Grid Size

Medium

Small

Extra Small

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

index.html

Adding Grids for Extra Small Screens


We could use the extra small grids, but theres a better way.

2++F. EN ?LH,"! " ?I !+ "NN"L!

Reviving our Goal Layout

V++F 8+!SW 2E(( O." ?+(OHI.

4OL +N%"L B"NOL". 2E(( "?% O." ?+(OHI.

1NU(( %P" I +BB."N +I N%" ("BN I! LE$%N

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

index.html

Features in Extra Small ScreensV++F 8+!SW 2E(( NF" O, (( ?+(OHI.

8%" +N%"L N2+ B"NOL". 2E(( NF" O, ?+(OHI. I! " "(+2 V++F 8+!SW

Book Today! Go Anywhere RocketBus

col-xs-12

col-xs-6

col-xs-6

Extra Small Feature Layout

%N N%E. (++F. (EF" +I ,%+I"

" .NE(( I""! N+ !! I +BB."N N+ V++F 8+!SW

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

Centering Features for Extra Small Screens

9." N%" HE!!(" ?+(OHI.

8%" +L!"L +B N%" ?(..". !+".IUN HNN"L

Book Today! Go Anywhere RocketBus

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

col-xs-10 col-xs-offset-1

Book Today On Extra Small Screens

V++F 8+!SW .NI!. +ON +I "RNL .H(( .?L""I.

Go Anywhere started on a new row because it needed 6 columns and only 1 was available.

Overriding Osets for Small Screens

4OL .col-xs-offset-1 E. "EI$ ,,(E"! N+ V.H((W I! VH"!EOHW L".+(ONE+I. . 2"((

7EI?" 2"UL" O.EI$ ?+(OHI. EI N%" BEL.N %+LET+IN( .,?" N%" N%" +P"LB(+2EI$ "("H"IN E. H+P"! N+ N%" I"RN L+2

index.html

Removing the Oset for Small Screens

Book Today! Go Anywhere

Removing Osets

+ +BB."N "B+L" N%" BEL.N B"NOL" "R?",N EI "RNL .H(( H+!"

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

Very Large Screens

Grid Class

.col-md-*

Oset Class

.col-md-offset-*

Screen Size

992px+


.col-xs-* .col-xs-offset-* 0px+

.col-lg-* .col-lg-offset-* 1200px+

Grid Size

Medium

Small

Extra Small

Large

Great for monitors with a lot of space. Not used as often as other grid sizes.

Hiding Columns

" .%+O(! +I(S .%+2 N%E. EH$" B+L VH"!EOHW I! V(L$"W L".+(ONE+I.

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 specic screen sizes

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

+O ?I %E!" "("H"IN. EI +N%"L .?L""I .ET". N++

...

hidden-sm hidden-xs

Hiding Elements using .hidden-*

8%" EH$" E. %E!!"I B+L .H(( I! "RNL .H(( L".+(ONE+I.

index.html

Making Elements Visible using .visible-*

4I(S .%+2 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++

...

visible-md visible-lg

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

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( $!$&

Using Bootstraps manual typography to improve your page

Manual Typography for the Lead

$+ B + A? $H& ! (,( '(B $H( A$&

index.html

Using the .lead Typography Class

2 ! $ ( D '$H! '(B $H(

.lead' AD$&(B A&B B A$& $& AD''

The Fastest Way to Space Make your way to space... ...

Comparing Our Lead

No .lead

Using .lead

.$( H B H( ( (,( '(B' $H(!

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

(N' B(& ( (,( $ $H& (H& (A'

Bootstrap has a number of alignment classes for text.

Centering Text

index.html

Using the .text-* Typography Classes

!! (,( B (' &$+ +!! B(&

.text-center.text-right

.text-left.text-nowrap

.text-justify $$('(&D ' 'A!& !''' $& &B( !BAB('

Book Today! Even if you're traveling tomorrow... ...

Centering Our Features

!! (,( B ( &$+ ' B$+ B(&

$+ $$! +$H! ( ($ '$+ $B' $& $H& (H& ($D'

Bootstrap comes with 200 icons to use, named glyphicons.

Glyphicons

0AA& (' !' 2L $B(B $B'!

distcssfonts

js

glyphicons-halings-regular.eotglyphicons-halings-regular.svgglyphicons-halings-regular.ttfglyphicons-halings-regular.wo

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

index.html

Using Glyphicons

,B'( $ H'B B +N!! H' B $& $H& $B

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

Book Today! Even if you're traveling...

L ('! B ( .glyphicon !'' +$BN( '$+ BL(B N!! B ($ 'DL + $B ($ H'

index.html

Adding an Icon

2 .glyphicon !'' 'D' + '$H! H' ( D&$I $B $B(

Pick out an icon to use. In this case well use the briefcase icon.

Book Today! Even if you're traveling...

2 .glyphicon-briefcase !'' 'D' + $B + '$H! H'

glyphicon-briefcase

index.html

Adding Icons for Other Features

Book Today!

Go Anywhere RocketBus

glyphicon-briefcase

Our Icons Look a Little Small

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

L $ $H& $B' !$$? '$ 'A!!

0AA& $+ $$('(&D '( $H& font-size B ($ HAD (' HD $& (' $B'

bootstrap.css

index.html

Adding a Stylesheet

...

N!! '( !! $H& '(L!' B ( main.css (L!'( !

For styling beyond what Bootstrap oers, well need to create a new css le to edit.

index.html

Increasing the Icon Font Size

+B( ($ '(L! !! $B' HB& .features

css/main.css

.features .glyphicon { font-size: 32px;} !! $B' HB& .features +!! !&&

Book Today! ...

Larger Icons

H& $B' & B$+ D,!

B (' & $B( + B H'( (A ( 'A +L

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

Cleaning up our Footer

(N' ' $H( &A$IB (' H!L H!!('

&N' ( $$(& + +B( ($ ,

Bootstrap provides some classes to make working with lists easier.

index.html

Links

Our Footer Code So Far

&N' ( !B?' + &(

B ($ B ( list-style $ (

Home Tickets Stations

index.html

Unstyled Lists

3' $$('(&D !'( !'' ($ &A$I ( H!!('

.list-unstyled .list-inline

3' ,B!B $& $&.$B(! !'('

Links

class='list-unstyled'>

Our Finished Footer

H& $$(& !$$?' !? ( !$B'!

Typography Level 3

Enough CSS to be Dangerous Level 4, Section 1

Adding a Dash of Style

!?? . . ? . ? . B B . ? . ? ..?

B ? ? ! ?. !?

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

index.html

Another Look at Our Lead

The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now ...

Heres our lead row we want to give prominence to.

index.html

That Went .well

.well A . ? ? The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now ...

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

well

index.html

Adding More Spacing

. ? ? B

.well-lg .well-sm A . %! B % . .? .

The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now !

well-lg

...

well

Well Preview

. ! . ? ?

?' ?% ? !?? C?!

index.html

Styling Our Buttons

Take the TourBook Tickets Now

?? ? !? ! ??

. ??. . ? ?B. ? ?%

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

Book Tickets Now

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

index.html

Changing Button Color

! .% . ? .? ?. !?!

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

btn-default

btn-primary

Take the Tour

Book Tickets Now

index.html

Many Many Colors

!?? A% .!

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

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

btn-primary

...

...

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

.? ! & ?!## A

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

C! ? ## & # C! ?

index.html

Expanding Our Header


!+A C! C!!# !

Well be replacing this row with our navigation bar.

index.html

Removing Grids

C! %# &+# ?# !A


Bootstraps navigation classes dont rely on grids.

index.html

Adding Links

#+A A A # #! ?A!


!!!

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

Tickets Stations About

Not So Styled Nav

% &(A # !H

( # C

index.html

Converting Our H1

Blasting Off With Bootstrap ...

A AC # C! ? !#! # h1

We want our site title to link back to our homepage index.html.

index.html

Using .navbar-brand


C! & !#( F# # C! %# A#

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

index.html

Using .nav


A ? ! # %# A

.nav A .glyphicon ! .btn I #+A CA #! AAA

class='nav'

.nav Modiers

C! %# #A # # !# .navbar-nav A #

...

...

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

nav-pills

Our Navigation In Progress

.navbar-nav A %! A## # C! A

C! %# A A ? # C# # !C !

Our Goal Nav A !# ! !C ## A#!#A !AA # A!

C! A & % A? A#( #!

index.html

Using .navbarA !A # ! A ?

.navbar-inverse

.navbar-default


+ CA .navbar-default ! C! A#

navbar navbar-default

Navbar in a container

A C# A+# A#!# !AA # #! A!

A A # A! # C! .well & & F ##

Setting a Background for our Navigation

index.html

...

.navbar-default A # !C ! !AA # #! ?

...

.container #!A # ## C! %

Nesting a .container within a .navbar keeps our links centered, but adds a background to it.

Positioning our Navigation

index.html

.navbar-static-top

.navbar-static-bottom

.navbar-fixed-top

.navbar-fixed-bottom

...

F %!A +# A! # ? I #( A#( # # #?

,%! & A! # ?

The .navbar has some modications available that allow exibility in navbar position and visibility.

navbar-static-top

Our Finished Navigation

C! % A &A! # A#!#A # &( !AA ! A!

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

An Alternate Navigation

C # # C#!# #A

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

body { padding-top: 70px; }

.nav

.navbar

Whats the dierence between these two?

.navbar versus .nav

Navigating Navigation Level 4, Section 2

JavaScript Components Level 5, Section 1

Navigation in Extra Small Mode

I' JHCB !CC?G '!!M B LH' G"!! "CO

.M , GCI! J H C!!%G! B!M GC, H ,B GC"CB ,BHG H

Expandable NavigationThis is what well be building. In extra small mode, well show a navigation toggle.

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 %CGHCBB %B "'B H

!? L%B ?M%'GG

index.html

Our Existing Navigation

.nav !"BH G ,H , ,BH HC "? C!!%G!

Heres the navigation weve build so far. It has a .navbar with a .container inside of it.

...

index.html

Collapsing Our Navigation

I' BJHCB G B B !! G'B GNG! 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 ...

index.html

Showing Our Navigation For Larger Screens

I' BJHCB GC,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-collapsecollapse ...

index.html

Toggling Navigation

G G ,' CI' IHHCB ,!! Well add a button that will make our navigation links visible only when the user desires it.

navbar-collapsecollapse

...

Toggle navigation

...

index.html

Screen Reader Only Text

C! BJHCB HLH ,CB1H GC,B C' "CGH JGHC'G

Toggle navigation

GH!! B HC GC" %CGHCBB B HCB! GHM!G HC CI' IHHCB

Our visually impaired users wont know what our button does by its icon, but adding text helps.

index.html

Screen Reader Only Text

Toggle navigation

GH!! B HC GC" %CGHCBB B HCB! GHM!G HC CI' IHHCB

Our visually impaired users wont know what our button does by its icon, but adding text helps.

index.html

Navigation Toggles

JHCB HC!G !CH HC H 'H

Toggle navigation

HHB !CG'! 3 IGH B GC" ?B C CB B H' B JC' ,B HG !?

.pull-right

.pull-left

H' ,MG C !CHB !"BHG B CCHGH'%

class='navbar-toggle'

index.html

Navigation Toggle Icons

Toggle navigation

!M%CBG ,CB1H G! C''H!M B HG G

BGH , B IG C CCHGH'%G CB 'G

Toggle navigation

Our Lazy Button

HHB H' IH , GH!! B HC "? H C GC"HB!

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

...

index.html

Adding Interactivity to Our Button

3B , !? CB HG button

H .collapse !GG GCI! '"CJ 'C" H BJHCB

Lay out the problem you want to solve in english to better understand the interaction.

How to use Bootstrap JavaScript PluginsThe Collapse plugin is included in the JavaScript le we added earlier.

JavaScript

Add data-* attributes to HTML

Write JavaScript

3H ,1!! IG '

CI CI! !GC C H G" %'C'""H!!M H'CI ,J'%H

index.html

Using the Collapse JavaScript Plugin

C! H LGHB C H .collapse !GGO

B B !"BH CB H % HH G H !GG .navbar-collapse.

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

data-toggle='collapse' data-target='.navbar-collapse'

Working Collapsible Navigation

H1G HC!B H !GG IH H CGB1H !CC? EIH 'H MH H1G "? H !B?G '

index.html

Our Existing Navigation Rows

!B? B H IHHCB ,!! CB 'C,

BJHCB !B? ,!! HG C,B 'C,

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

... ...

... ...

index.html

Navigation Header

3!! H? I% H BH' 'C, C' LH' G"!! G'BG IH CB!M %'H B !''

We can think of the homepage link and the button as one row and the nav as another one.

...

Our Toggleable Navigation

I' BJHCB !B?G BC, J H' C,B 'C, C' LH' G"!! G'BG!

I' BJHCB !CC?G H G" B G"!! "C B CJ

Our Navigation In Larger ModesThe navigation is only collapsed in extra small mode.

JavaScript Components Level 5, Section 1

Dropping Down From Orbit Level 5, Section 2

Our Site is Taking O and Growing(D AHFBA & FFA DL,! BI A I ?A F& (C

Grouping Navigation

?A BA /B(FO I?? JCA B(D AHFBA

Well consolidate less-used pages under a common navigation header to improve presentation.

Mobile First!

.?? ! B(D DBC BIA IBD A JFD &!?? !B DB! F &FDF

D&F# ?F.& F DBC BIA BA

Well make it work on mobile from the start.

index.html

Our Existing Navigation Links

,A&F B ?AA FB F B(F C# I.?? IAF F& FB JCA A &BI BFD ?A&

Tickets Stations About ...

Our about link will need to be changed, otherwise it would take people to a dierence page.

index.html

Converting the About Link

BA.F F H&FBD& FB AI C

Tickets Stations About

B(D DBC BIA BA (&A BBF&FDC.& .caret ?&&

By linking to #, we tell the browser to not go to a new page.

#

index.html

Adding More Links

?? B B(D AI ?A& I?? DB(C A B(D B(F ?!AF.&

! About

.

Our Story Contact Us Blog Twitter Facebook

index.html

Converting to a Dropdown Menu

& ?F& BBF&FDC ABI F& ?&F & DBC BIA !A( ,F IBA.F &BIA BA C ?B

! About Our Story Contact Us Blog Twitter Facebook .

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

class='dropdown-menu'

Two Ways to Use JavaScript PluginsRemember how there are two ways to use JavaScript plugins? Lets look at another example.

JavaScript

Add data-* attributes to HTML

Write JavaScript

.?? DBCBIA (&A F FFD(F&

index.html

Adding Behavior using Toggle

A B(F & ?# BBF&FDC & ?&& B .open FB F CDAF ?!AF

About ...

Similar to the Collapse plugin, well add classes to our HTML to use the Dropdown plugin.

data-toggle='dropdown'

index.html

Starting our Dropdown Open

, I IAF B(D DBCBIA FB &FDF BCA# I B(? B F IF ?&&

About ...

?A BA B(F ABI# IB(? D!BH F .open ?& ?B&A F DBCBIA

The Dropdown plugin is adding and removing classes for us, which we could do ourselves.

class='open'

Our Dropdown Menu So FarF# A.F I H &B! BB? HD& FIA ?A&

index.html

Adding Dividers

& A BDLBAF? D FB ?C DB(C !A( F!&

About Our Story Contact Us Blog Twitter Facebook

index.html

What About Users Without JavaScript?

, H&FBD & HDCF &?# F,.?? ? BA B(F A ABFA I?? CCA!

We want to make sure our site works well when JavaScript is disabled.

About ...

index.html

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

About ...

, (&D & HDCF A?# F,.?? & F DBC BIA !A( A F . IBA.F A

, F, H HDCF &?# F,.?? FA FB F B(FF!? C

about.html data-target='#'

Dropping Down From Orbit Level 5, Section 2

bootstrap

Documents

c jh h

lqaa jh i c

ihi h i b

mapboots h i bc

lqaa jh c

good website

typical patternswriting

broad awareness