Bootstrap 3

  • Bootstrap 3 is mobile-first
  • Overhauled CSS transitions and reinforced with JavaScript transitions as necessary
  • Dropped IE7 and FF3.6 support
  • Combined standard and responsive CSS into a single file
  • 100% faster than 2.3.2
 Icelandic Road from Bus

Web Development

We face a lot of challenges

Web Browsers



Today's Web Developer

  • HTML5
    • Canvas / Semantics/ Storage / File Access / Audio / Video
  • CSS / 3
    • LESS / Sass / @font-face / Border Radius / Box Shadow
  • JavaScript
    • jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript
  • Server Side Languages
    • ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby
  • DBMS
    • Oracle / SQL Server / MySQL / PostgreSQL
  • NOSQL Databases
    • Cassandra / MongoDB / CouchDB / Amazon Simple DB

Mobile Traffic will outnumber desktop by 2014

Mobile OS

Mobile Screen Resolutions
Designing a different interface for every device is impossible.
Fiji Land Ho!

Bootstrap

The answer to our problems.

What is Bootstrap?

  • Components
    • Dozens of reusable components
    • Dropdowns
    • Navbar
    • Breadcrumbs
    • Alerts
    • Progress Bars
  • JavaScript Plugins
    • 11 plugins
    • Modal Dialog Windows
    • Tabs
    • ScrollSpy
    • Carousel
  • Scaffolding
    • Grid System
    • Responsive Design
    • Responsive Utilities
  • Base CSS
    • Typography
    • Tables
    • Forms
    • Buttons
    • Icons

Reasons To Love Bootstrap

Grapevines in Piedmont Italy
  • For all skill levels
  • Documentation
  • Cross Everything
  • Lightweight
  • Responsive Design
  • JavaScript plugins
  • Open Source
  • Built on LESS

History of Bootstrap

  • Early Days of Twitter
    • Mark Otto
    • Jacob Thornton
  • Releases
    • v 1.0 - 19 Aug 2011
    • v 2.0 - 31 Jan 2012
    • v 3.0 - 19 Aug 2013
    • v 3.0.1 - 29 Oct 2013
  • Popularity
    • @twbootstrap 102K Followers
    • GitHub Stats
      • 60K Watchers
      • 21K Forks
 Portofino Door and flowers

Getting Started

Overview of the project, its contents, and how to get started with a simple template.

Getting Started


  • Downloading Bootstrap
    • Source
    • Ready To Go
    • Customize
  • Requirements
    • HTML5 Doctype
    • Include bootstrap.css
  • Starter Templates
Qamea Restaurant at night

Scaffolding

Bootstrap is built on responsive 12-column grids, layouts, and components.

Migrating from 2.x to 3.0

Removed in 3.0

Layouts: Grid system

<body>
  <div class="container">
    ...
  </div>
</body>

Grid System



  • Bootstrap grid system is 12 columns / 940px
  • Grid adapts to be 724px and 1170px wide depending on your viewport.
  • Below 767px viewports, the columns become fluid and stack vertically.
<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

Responsive Design

  • Media Queries
  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Responsive Design

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap: Getting Started</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<h1>Mobile first Bootstrap</h1>

</body>
</html>

Responsive Design

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
          maximum-scale=1.0, user-scalable=no">
    <title>Bootstrap: Getting Started</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<h1>Responsive Images</h1>

    <img src="..." class="img-responsive" alt="Responsive image">
    <!-- .img-responsive applies max-width: 100%; and height: auto; to the image -->
</body>
</html>
River Dora Baltea near Mont Blanc Italy

Demo Time

» demos/responsive

Savoy Castle

Base CSS

Fundamental HTML elements styled and enhanced with extensible classes.

Typography: Headings

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>

Typography: Body Copy

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et
   magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat
   porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

Typography: Blockquote

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Typography: Emphasis classes

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Typography: Alignment classes

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Tables: Default Style

<table class="table">
…
</table>

Tables: Striped

<table class="table table-striped">
…
</table>

Tables: Bordered

<table class="table table-bordered">
…
</table>

Tables: Hover

<table class="table table-hover">
…
</table>

Tables: Condensed

<table class="table table-condensed">
…
</table>

Tables: Optional Row Classes

Forms

Madeleine Paris at Night
  • Three Layouts
    • Vertical (default)
    • Inline
    • Horizontal
  • Form Controls
    • Input
    • Text Area
    • Checkboxes & Radio
    • Select
  • Look & Feel
    • Relative Sizing (sm/md/lg)
    • Grid Sizing (.col-md-1/.col-md-2/.col-md-3/etc)

Forms: Default Styles

<form>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" class="form-control" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
        <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Forms: Horizontal

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-3">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    ...
</form>

Inline Form

<form class="form-inline" role="form">
  <div class="form-group"><input type="email" class="form-control" placeholder="Enter email"></div>
  <div class="form-group"><input type="password" class="form-control"placeholder="Password"></div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Form Controls: Sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. 

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>

Form Controls: Sizing Width

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Buttons

Images

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">


Keep in mind that Internet Explorer 8 lacks support for rounded corners.

Image Placeholders http://placehold.it/

Glyphicons

<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-search icon-white"></i>

<a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
<a class="btn btn-sm" href="#"><i class="glyphicon glyphicon-star"></i></a>

<span class="add-on"><i class="glyphicon glyphicon-envelope"></i></span>
Ballynahinch Castle Ireland.jpg

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

Components

  • Dropdowns
  • Button groups
  • Button dropdowns
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Labels and badges
  • Typography
  • Thumbnails
  • Alerts
  • Progress bars
  • Misc

Components: Button Group

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Components: Button dropdown

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Components: Navbar

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
      <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>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

Components: Tabs

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Components: Breadcrumbs

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Components: Pagination

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Components: Alerts

<div class="alert alert-success">
</div>
Balclutha Maritime Museum San Francisco California

JavaScript for Bootstrap

Bring Bootstrap's components to life—now with 11 custom jQuery plugins.

JavaScript Plugins: Overview
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.

JavaScript Plugins: Modals

JavaScript Plugins: Modals

<div class="modal fade">
  <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript Plugins: Carousel

JavaScript Plugins: Carousel

<div id="carousel-1" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

JavaScript Plugins: Popover

JavaScript Plugins: Popover

<a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title=""
   data-content="And here's some amazing content. It's very engaging. right?"
   data-original-title="A Title">Click to toggle popover</a>
Our hike along Ecola State Park ~ Indian Beach, Oregon

LESS

The dynamic stylesheet language.

What is LESS?

  • Maintainable CSS
  • Dynamic Behavior
    • Variables
    • Mixins
    • Nested Elements
    • Operations
    • Functions
  • Usage
    • Client Side
    • Server Side

LESS: Variables

LESS: Mixins

LESS: Nested

 Oregon Flowers

Look & Feel

SMACSS

Categorizing CSS rules allows us to see patterns and define best practices around each pattern.
  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

SMACSS: Naming Rules

<Questions?>