Tabs
Simple Tabs
simple1
simple2
simple3
simple4
<ul class="nav nav-tabs"> <li role="tab" class="active"><a href="#simple1" data-toggle="tab">simple1</a> </li> <li role="tab" ><a href="#simple2" data-toggle="tab">simple2</a> </li> <li role="tab" ><a href="#simple3" data-toggle="tab">simple3</a> </li> <li role="tab" ><a href="#simple4" data-toggle="tab">simple4</a> </li> </ul> <div class="tab-content"> <div id="simple1" class="tab-pane active"> <p>simple1</p> </div> <div id="simple2" class="tab-pane"> <p>simple2</p> </div> <div id="simple3" class="tab-pane"> <p>simple3</p> </div> <div id="simple4" class="tab-pane"> <p>simple4</p> </div> </div>
Nested Tabs
nested1_1
nested1_2
nested1_3
nested2
nested3
nested4
nested5
nested6
<ul class="nav nav-tabs"> <li role="tab" class="active"><a href="#nested1" data-toggle="tab">nested1</a> </li> <li role="tab" ><a href="#nested2" data-toggle="tab">nested2</a> </li> <li role="tab" ><a href="#nested3" data-toggle="tab">nested3</a> </li> <li role="tab" ><a href="#nested4" data-toggle="tab">nested4</a> </li> <li role="tab" ><a href="#nested5" data-toggle="tab">nested5</a> </li> <li role="tab" ><a href="#nested6" data-toggle="tab">nested6</a> </li> </ul> <div class="tab-content"> <div id="nested1" class="tab-pane active"> <ul class="nav nav-tabs"> <li class="active"><a href="#nested1_1" data-toggle="tab">nested1_1</a> </li> <li><a href="#nested1_2" data-toggle="tab">nested1_2</a> </li> <li><a href="#nested1_3" data-toggle="tab">nested1_3</a> </li> </ul> <div class="tab-content"> <div id="nested1_1" class="tab-pane active"> <p>nested1_1</p> </div> <div id="nested1_2" class="tab-pane"> <p>nested1_2</p> </div> <div id="nested1_3" class="tab-pane"> <p>nested1_3</p> </div> </div> </div> <div id="nested2" class="tab-pane"> <p>nested2</p> </div> <div id="nested3" class="tab-pane"> <p>nested3</p> </div> <div id="nested4" class="tab-pane"> <p>nested4</p> </div> <div id="nested5" class="tab-pane"> <p>nested5</p> </div> <div id="nested6" class="tab-pane"> <p>nested6</p> </div> </div>
Simple Pills
pills1
pills2
pills3
pills4
<ul class="nav nav-pills"> <li role="tab" class="active"><a href="#pills1" data-toggle="pill">simple1</a> </li> <li role="tab" ><a href="#pills2" data-toggle="pill">simple2</a> </li> <li role="tab" ><a href="#pills3" data-toggle="pill">simple3</a> </li> <li role="tab" ><a href="#pills4" data-toggle="pill">simple4</a> </li> </ul> <div class="tab-content"> <div id="pills1" class="tab-pane active"> <p>pills1</p> </div> <div id="pills2" class="tab-pane"> <p>pills2</p> </div> <div id="pills3" class="tab-pane"> <p>pills3</p> </div> <div id="pills4" class="tab-pane"> <p>pills4</p> </div> </div>
Pill Dropdowns (the same can be done on tabs)
drop1
drop2
drop3
drop4
<ul class="nav nav-pills"> <li role="tab" class="active"><a href="#drop1" data-toggle="pill">drop1</a> </li> <li role="tab" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#drop2" data-toggle="pill">drop2</a> </li> <li><a href="#drop3" data-toggle="pill">drop3</a> </li> <li><a href="#drop4" data-toggle="pill">drop4</a> </li> </ul> </li> </ul> <div class="tab-content"> <div id="drop1" class="tab-pane active"> <p>drop1</p> </div> <div id="drop2" class="tab-pane"> <p>drop2</p> </div> <div id="drop3" class="tab-pane"> <p>drop3</p> </div> <div id="drop4" class="tab-pane"> <p>drop4</p> </div> </div>
Pill Dropdowns with Badges
- Item 1
- Item 2
- Item 3
- Item 4
- Item 1
- Item 2
- Item 1
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
To enable nav-pill badges, include this line within the <head>
.
<script type="text/javascript" src="/fac/soc/economics/apps/pillbadge/jquery.pillbadge.min.js"></script>
For an advanced nav-pill system with dropdowns (see the tabs documentation here) place the following html and javascript within the <body>
.
<ul class="nav nav-pills"> <li class="active" role="tab" > <a data-toggle="pill" href="#single-item">Item</a> </li> <li class="dropdown" role="tab" > <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown Items <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a data-toggle="pill" href="#drop1">Item 1</a> </li> <li> <a data-toggle="pill" href="#drop2">Item 2</a> </li> <li> <a data-toggle="pill" href="#drop3">Item 3</a> </li> </ul> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="single-item"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> <div class="tab-pane" id="drop1"> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div> <div class="tab-pane" id="drop2"> <ul> <li>Item 1</li> </ul> </div> <div class="tab-pane" id="drop3"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </div> </div> <script type="text/javascript"> jQuery(document).ready(function($) { $(".nav-pills > li").pillbadge(); }); </script>