Overview of Bootstrap

CSS + Standard Markup + ARIA + Media Queries
+ (wee nip of JavaScript)

• CSS — built-in styles ...
• Standard Markup — for common components in markup
• ARIA — with attribute annotations for accessibility and semantics
• Media Queries — with built-in styling for various devices
• JavaScript — and a wee nip of JavaScript just to connect the dots.

(see Bootstrap for more details)

Core is Markup

At the core are components expressed in markup:

<ul class="list-group">
  <li class="list-group-item">Oranges</li>
  <li class="list-group-item">Apples</li>
  <li class="list-group-item">Bananas</li>
  <li class="list-group-item">Strawberries</li>
</ul>            
         

(see Components)

Getting Started

Just include:

• jQuery
• Bootstrap CSS (core + theme)
• Bootstrap JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"/>
         

Walk Through - Tabs

1. Create a container with the ARIA role:

<section role="tabpanel">
</section>
         

Walk Through - Tabs

2. Add the tabs:

<section role="tabpanel">
   <ul id="demo" class="nav nav-tabs" role="tablist">
      <li role="tab" class="active"><a href="#apples">Apples</a></li>
      <li role="tab"><a href="#oranges">Oranges</a></li>
      <li role="tab"><a href="#bananas">Bananas</a></li>
   </ul>
</section>
         

Walk Through - Tabs

3. Add a container for the tab contents:

<section role="tabpanel">
   <ul id="demo" class="nav nav-tabs" role="tablist">
      <li role="tab" class="active"><a href="#apples">Apples</a></li>
      <li role="tab"><a href="#oranges">Oranges</a></li>
      <li role="tab"><a href="#bananas">Bananas</a></li>
   </ul>
   <section class="tab-content">
   </section>
</section>
         

Walk Through - Tabs

4. Add a tab panel for each tab inside the tab-content container

<section class="tab-content">
   <section id="apples" role="tabpanel" class="tab-pane active">
      <p>I like apples!</p>
   </section>
...
</section>
         

Walk Through - Tabs

5. Hook up the tabs to the tab panels via JavaScript:

$('#demo a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})
         

Walk Through - Demo

• Apples
• Oranges
• Bananas

I like apples!

I like oranges!

I like bananas!

Mobile and Bootstrap

• you need to define a container
• for mobile to work
• and for boostrap to kick in a reflow for various devices
• or portrait vs landscape

Somewhere in your hierarchy:

<div class="container-fluid">
   ...
</div>
         

Note: there are other container classes with different layouts.