Bootstrap

Bootstrap

Bootstrap

What is Bootstrap?

  • an HTML, CSS & JS framework
  • built by developers at Twitter
  • mobile-ready
  • responsive
  • saves lots of time
  • Built with 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


 <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

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

 

 


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

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>
  • brand
  • dropdowns
  • active class
  • inline form
  • placeholder
  • remove anything that's unwanted

Navbar Features

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>

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>

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!

Activity + Homework

Made with Slides.com