CSS + Standard Markup + ARIA + Media Queries
+ (wee nip of JavaScript)
(see Bootstrap for more details)
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)
Just include:
<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"/>
1. Create a container with the ARIA role:
<section role="tabpanel"> </section>
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>
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>
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>
5. Hook up the tabs to the tab panels via JavaScript:
$('#demo a').click(function (e) { e.preventDefault() $(this).tab('show') })
container
Somewhere in your hierarchy:
<div class="container-fluid"> ... </div>
Note: there are other container classes with different layouts.