Homework Review

Who wants to share?

What is Bootstrap?

an HTML, CSS & JS framework
built by developers at Twitter
mobile-ready
responsive
saves lots of time
Built with Bootstrap:
- Windows on Tuscany
- Rawww

Creating a home for our code

TTS / Bootstrap

Let's Get Started

http://getbootstrap.com/
click "Getting Started"
scroll down to Basic Template
copy the Bootstrap template
scroll up to "Bootstrap CDN" section
(CDN = Content Delivery Network)
replace Bootstrap css and js links

Simple Test

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Use the inspector

hover over the "hello world"
right click to "inspect element"
notice the styles being applied
click the "sources" tab
notice the bootstrap folder

Bootstrap-ify

http://getbootstrap.com/components/#jumbotron
replace h1 with jumbotron awesomeness
test responsiveness in browser


 <div class="jumbotron">
   <h1>Jaime's Awesome Site</h1>
   <p>My name is Jaime Panaia.</p>
   <a class="btn btn-primary btn-lg">Click this!</a>
 </div>

Grid Talk

http://getbootstrap.com/css/#grid
responsive page layouts using rows & columns
add a fixed container with hipster ipsum filler text

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>Scenester meggings gentrify lo-fi, narwhal ethical master cleanse put a bird on it mumblecore quinoa squid Neutra synth. Kogi Pinterest salvia single-origin coffee lomo typewriter. Typewriter whatever disrupt readymade, Cosby sweater squid trust fund Godard kale chips Williamsburg. Bespoke flannel whatever, hoodie cliche quinoa American Apparel single-origin coffee farm-to-table squid Tonx aesthetic pug. Church-key McSweeney's pop-up, forage tattooed Pitchfork hoodie craft beer viral locavore master cleanse cray. Cosby sweater paleo shabby chic, keytar hella Blue Bottle distillery skateboard flexitarian art party heirloom beard. Fingerstache forage bitters craft beer quinoa, Kickstarter gastropub.</p>

      <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo. Pinterest plaid squid, literally pop-up direct trade Neutra semiotics. Asymmetrical chillwave fap Neutra. Ethical butcher farm-to-table, fanny pack biodiesel pug McSweeney's sriracha. Quinoa roof party crucifix VHS typewriter, Shoreditch Kickstarter whatever asymmetrical sartorial tofu pork belly Blue Bottle viral chia.</p>
    </div>
  </div>
</div>

Grid Challenge

add a new row with 3 columns
hint: use class="col-md-4"

Grid Solution


  <div class="row">
    <div class="col-md-4">
      <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
    </div>
    <div class="col-md-4">
        <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mi</p>
    </div>
    <div class="col-md-4">
      <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mi</p>
    </div>
  </div>

Give your brain a rest.

Break!

Buttons!

http://getbootstrap.com/css/#buttons
add a button to your 3rd column


<a href="#" class="btn btn-success">Sign Up Now!</a>

Add a footer

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4">© 2014</div>
      <div class="col-md-4">
        <ul class="nav nav-pills">
          <li><a href="#">Contact Us </a></li>
          <li><a href="#">Get Support</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <p class="text-right"><a href="#">Follow Us</a></p>
      </div>
    </div>
  </div>
</footer>

use a 3 column layout (again)
Include copyright, navigation, follow me

Add a glyph (icon)


<li><a href="#">Contact Us <span class="glyphicon glyphicon-envelope"></span></a></li>

http://getbootstrap.com/components/#glyphicons
use a span to keep it inline

Throw in a navbar

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

http://getbootstrap.com/components/#nav bar
take it right from the docs

brand
dropdowns
active class
inline form
placeholder
remove anything that's unwanted

Navbar Features

http://getbootstrap.com/components/#panels
Enclose the content in each column into a panel
Add some colorful panel titles
Holler "I LOVE BOOTSTRAP" when you're finished
Share with class

Panel Challenge

Panel Solution

 <div class="row">
    <div class="col-md-4">
      <div class="panel panel-primary">
        <div class="panel-heading panel-primary">Heading 1</div>
        <div class="panel-body">
           <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
        </div>
      </div> 
    </div>
    <div class="col-md-4">
      <div class="panel panel-success">
        <div class="panel-heading">Heading 2</div>
        <div class="panel-body">
           <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-warning">
        <div class="panel-heading">Heading 3</div>
        <div class="panel-body">
           <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

http://getbootstrap.com/components/#media
add a media object into your second column panel

Add a media object

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="http://img.ehowcdn.com/other-people/ehow/images/a08/bg/d6/size-miniature-dachshund-800x800.jpg" alt="Doxie">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Mini Dachshunds are my favorite</h4>
    <p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
  </div>
</div>

http://getbootstrap.com/components/#responsive-embed
find a video on youtube and add it to the first column panel

Embed a video!

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="http://www.youtube.com/embed/jR4lLJu_-wE" class="embed-responsive-item"></iframe>
</div>

pagination
badges
alerts
progress bar
etc

Additional Features

Break (dance) time!

Bootstrap Themes

Try adding some themes and make your page look uber fancy!

Overriding
Bootstrap Styles

Add an external style sheet called "bootstrap-styles.css" to the "assets/stylesheets" folder
Link this stylesheet to bootstrap.html
Use the inspector tool to determine the class you'd like to override
Write more specific styles

Add Bootstrap to your blog site
Add a navbar, header and footer
Flow each page of your content into a 2 or 3 column grid
Add an external stylesheet and write a few styles
If there's time add a theme!

Bootstrap

Bootstrap

Homework Review

Who wants to share?

What is Bootstrap?

Creating a home for our code

TTS / Bootstrap

Let's Get Started

Simple Test

Use the inspector

Bootstrap-ify

Grid Talk

Grid Challenge

Grid Solution

Give your brain a rest.

Break!

Buttons!

Add a footer

Add a glyph (icon)

Throw in a navbar

Navbar Features

Panel Challenge

Panel Solution

Add a media object

Embed a video!

Additional Features

Break (dance) time!

Bootstrap Themes

Overriding
Bootstrap Styles

Activity + Homework

Bootstrap

Bootstrap

tts-jaime

Bootstrap

Bootstrap

Bootstrap

More from tts-jaime