What's so great about Bootstrap 3

with Ray Villalobos

@planetofthewebView Sourcehttp://lynda.planetoftheweb.com

What is Bootstrap?

  • Framework for creating responsive websites
  • Dead Simple, HTML5 Markup
  • Rapid development & prototyping
  • Virtually no JS required

Why use Bootstrap?

  • Easy fluid, responsive grid
  • Great starter style
  • Rich features & tools
  • ie 8 and 9 compatible

Why not Bootstrap

  • #^@%!$# jQuery
  • A bit chunky
  • Div and Class overload
  • Unique design
  • Control freak

Mobile First

Mobile First
  • Designed for handhelds first...and adjusted up

Basic Bootstrap Tempate


<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Starter Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>
						
  • Nothing to see here yet

Visualize CSS

Let's add some CSS so we can see our grid for now.


.row div {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #FCF4DC;
  background-color: #475B62;
  border: 1px solid #0A2933;
}					

Paste this into JSBin's CSS tab

The mighty grid

  • Get a grid by adding classes
  • 
    <div class="row">
      <div class="col-md-4">First</div>
      <div class="col-md-8">Second</div>
    </div>
    					
  • col-breakpoint-count
  • By default should add to 12
  • Breakpoints
    xs: <768px, sm: ≥768px, md: ≥992px, lg: ≥1200px

The mighty grid

  • Use a container class to center on page
  • 
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-8">First</div>
        <div class="col-xs-12 col-sm-8 col-md-4">Second</div>
      </div>
    </div>
    					

Responsive Utilities

  • Easily show/hide content from devices

Responsive Columns

in action

  • 
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-2">First</div>
        <div class="col-xs-12 col-sm-8 col-md-8">Second</div>
        <div class="col-xs-12 hidden-sm col-md-2">Third</div>
      </div>
    </div>
    					
  • The third column has super powers
  • hide a column at any breakpoint

Other column options

  • Reset if columns don't clear
  • Offset if you want to lay them out of place
  • Nested if you want one to go inside another
  • Overridden if you want to change the order

LESS control

Excellent default CSS styles

  • Everything reset to Helvetica Neue
  • LESS variables for tweaking
  • Custom build if you don't like

Awesome Utility Classes

  • muted, primary, success, info, warning, danger
  • 
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    	<p class="text-muted">Some muted text</p>
    	<p class="text-primary">Primary text</p>
    	<p class="text-success">Success text</p>
    	<p class="text-info">Info text</p>
    	<p class="text-warning">Warning text</p>
    	<p class="text-danger">Danger Will Robinson</p>
      <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    					
  • Change through LESS or custom build

Responsive Tables

  • Great looking default tables
  • 
    <table class="table table-striped">
      <thead>
          <th>Class</th>
          <th>Description</th>
      </thead>
      <tbody>
         <tr>
          <td><a href="http://www.lynda.com/CSS-tutorials/Responsive-CSS-Sass-Compass/140777-2.html" class="text-danger">Responsive Compass</a></td>
          <td>Learn how Compass (powered by Sass) can help you build a responsive layout workflow that is easier, faster, and more compatible than CSS alone.
          </td>
        </tr>
        <tr>
          <td><a href="http://www.lynda.com/JavaScript-tutorials/JavaScript-Events/140780-2.html" class="text-danger">JavaScript: Events</a></td>
          <td>Learn to use JavaScript events to respond to clicks, form input, and touch gestures in your web applications.</td>
        </tr>
        <tr>
          <td><a href="http://www.lynda.com/CSS-tutorials/Online-Presentations-revealjs/137904-2.html" class="text-danger">Reveal.js Presos</a></td>
        <td>Online Presentations with reveal.js
        Build slideshows that harness the full power of the web with reveal.js.</td>
        </tr>
        <tr>
          <td><a href="http://www.lynda.com/Bootstrap-tutorials/Bootstrap-3-Advanced-Web-Development/124079-2.html" class="text-danger">Adv. Web Development</a></td>
        <td>Generate an interactive website from scratch with Bootstrap.</td>
       </tr>
      </tbody>
    </table>					
  • table-striped, table-bordered, table-hover, table-condensed
  • Wrap <div class="table-responsive"></div> force scroll

Forms too?

  • Great looking default forms
  • 
    <div class="container">
    	<form class="registration form-horizontal" action="#">
    	  <fieldset id="personalinfo">
    	    <legend>Personal Info</legend>		
    				<section class="form-group">
    					<label class="col-sm-4 control-label" for="myname">Name</label>
    					<div class="col-sm-8">
    						<input class="form-control" type="text" name="myname" id="myname" autofocus placeholder="Last, First" required>
    					</div>
    				</section><!-- form-group -->
    
    				<section class="form-group">
    					<label class="col col-sm-4 control-label" for="companyname">Company Name</label>
    					<div class="col-sm-8">
    						<input class="form-control" type="text" name="companybname" id="companyname" />
    					</div><!-- controls -->
    				</section><!-- form-group -->
    	  </fieldset><!-- personal info -->
    	</form>
    </div>
    					

Buttons baby

  • 
    <div class="container">
      <a class="btn btn-info" href="http://www.lynda.com/Bootstrap-tutorials/Bootstrap-3-Advanced-Web-Development/124079-2.html">Responsive CSS</a>
    </div>
    					
  • Size classes: btn-lg, btn-sm, btn-xs
  • Icons galore
    <span class="glyphicon glyphicon-fire"></span>

Button Groups

  • 
    <div class="btn-group">
    	<a class="btn btn-default" href="http://www.lynda.com/CSS-tutorials/Responsive-CSS-Sass-Compass/140777-2.html" class="text-danger">Compass</a>
    	<a class="btn btn-warning" href="http://www.lynda.com/JavaScript-tutorials/JavaScript-Events/140780-2.html" class="text-danger">Events</a>
    	<a class="btn btn-default" href="http://www.lynda.com/Bootstrap-tutorials/Bootstrap-3-Advanced-Web-Development/124079-2.html" class="text-danger">Development</a>
    </div>
    					
  • Size btn-group-sm, btn-group-xs
  • Full width btn-group-justified
  • Stacked btn-group-vertical

Components

JavaSript functionality

Easy Navigation

  • 
    <nav class="navbar navbar-default" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">whoa</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
                            
  • Add a brand
  • <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
  • navbar-inverse for gothic mode

Add a dropdown

  • 
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-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>
                    
  • Kunk-foo nav sample available

Modals

  • 
    <button class="btn btn-info" data-toggle="modal" data-target="#sassclass">Sass &amp; Compass</button>
    <div class="modal fade" id="sassclass" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Responsive Workflows with Sass &amp; Compass</h4>
          </div><!-- header -->
          <div class="modal-body">
            Learn how Compass (powered by Sass) can help you build a responsive layout workflow that is easier, faster, and more compatible than CSS alone.
          </div><!-- body -->
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a href="http://www.lynda.com/CSS-tutorials/Responsive-CSS-Sass-Compass/140777-2.html" class="btn btn-warning">More Info</a>
          </div><!-- footer -->
        </div><!-- content -->
      </div><!-- dialog -->
    </div><!-- modal -->
                  
  • Brings up a dialog box
  • Header & footers optional
  • Click hides modal

Drop-downs

  • 
    <div class="dropdown">
      <!-- trigger -->
      <a data-toggle="dropdown" class="btn btn-info" href="#">Sass &amp; Compass <span class="caret"></span></a>
    
      <!-- content -->
      <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <div class="container">
          <h3>Responsive Compass Workflows</h3>
          <p>Learn how Compass (powered by Sass) can help you build a responsive layout workflow that is easier, faster, and more compatible than CSS alone.</p>
          <p><button data-toggle="dropdown" class="btn btn-info pull-right" href="http://www.lynda.com/CSS-tutorials/Responsive-CSS-Sass-Compass/140777-2.html">Sass &amp; Compass <span class="caret"></span></button></p>
        </div><!-- container -->
      </div><!-- dropdown menu -->
    </div><!-- dropdown -->
                    
  • Compound Block
  • Can be used anywhere

Carousels

  • 
    <div id="myCarousel" class="carousel slide">
    	<ol class="carousel-indicators">
    		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    		<li data-target="#myCarousel" data-slide-to="1"></li>
    		<li data-target="#myCarousel" data-slide-to="2"></li>
    	</ol><!-- indicators -->
    	<section class="carousel-inner">
          <div class="active item"><img src="http://iviewsource.com/i/seattle_skyline.jpg" alt="Photo of Seattle Skyline"></div>
          <div class="item"><img src="http://iviewsource.com/i/jewelry_workshop.jpg" alt="Photo of jewelry_workshop"></div>
          <div class="item"><img src="http://iviewsource.com/i/painting_workshop.jpg" alt="Photo of painting_workshop"></div>
    	</section><!-- inner -->
    	<a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    	<a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- carousel -->
                    
  • Controversial
  • Good enough for them!

Is it for me?

Unless you're an alien or Chuck Norris...yes

But!!

  • I can do the same thing quicker with Sass, Less, Compass, Git, Grunt
  • Is it road tested by millions of users?
  • Fluid, responsive components
  • Hey there Chuck, loved your work in The Octagon

But!!

  • I hate using so many classes
  • Got you champ...try Susy instead

Thanks

@planetofthewebView Sourcehttp://lynda.planetoftheweb.com