Created
September 25, 2012 03:02
-
-
Save jeffschwartz/3779742 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Navigation Bars - nav-tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- | |
| Notes : | |
| #1. change all link and script urls to match project | |
| #2. you do not need any additional javascript to make nav-tabs work. just include | |
| the bootstrap.js file as per the script tag at the bottom of the page. | |
| --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Bootstrap nav-tab examples</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Jeff Schwartz"> | |
| <!-- Le styles --> | |
| <link href="libs/bootstrap/css/bootstrap.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ | |
| } | |
| </style> | |
| <link href="libs/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> | |
| <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <!-- Le fav and touch icons --> | |
| <link rel="shortcut icon" href="../assets/ico/favicon.ico"> | |
| <link rel="apple-touch-icon-precomposed" sizes="144x144" | |
| href="../assets/ico/apple-touch-icon-144-precomposed.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" | |
| href="../assets/ico/apple-touch-icon-114-precomposed.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> | |
| <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> | |
| </head> | |
| <body> | |
| <div class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container"> | |
| <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </a> | |
| <a class="brand" href="#">Project name</a> | |
| <div class="nav-collapse collapse"> | |
| <ul class="nav"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!--/.nav-collapse --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <!-- | |
| This example uses no additional Javascript to automate this nav-list. | |
| See http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php for instructions | |
| on how to automate this without having to write any JavaScript. | |
| See my inline comments below for my implementation notes | |
| --> | |
| <div class="row"> | |
| <div class="span12"> | |
| <h1>Bootstrap nav-tab examples</h1> | |
| </div> | |
| </div> | |
| <!-- Horizontal top nav-tab example --> | |
| <div class="row"> | |
| <div class="span12 tabbable"> | |
| <!-- wrapp your tabs in a container with class tabbable bring your tabs to life with a simple plugin to toggle between content. --> | |
| <h2>Horrizontal top nav-tab example</h2> | |
| <ul class="nav nav-tabs"><!-- nav, nav-tabs styles are required. --> | |
| <li class="active"><a href="#onett" data-toggle="tab">One</a></li> | |
| <li><a href="#twott" data-toggle="tab">Two</a></li> | |
| <li><a href="#threett" data-toggle="tab">Three</a></li> | |
| <li><a href="#fourtt" data-toggle="tab">Four</a></li> | |
| <li><a href="#fivett" data-toggle="tab">Five</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="span12 tab-content"> | |
| <div class="tab-pane active" id="onett"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="twott"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="threett"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fourtt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fivett"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| </div> | |
| </div> | |
| <hr> | |
| <!-- Horizontal bottom nav-tab example --> | |
| <div class="row"> | |
| <div class="span12 tab-content"> | |
| <h2>Horrizontal bottom nav-tab example</h2> | |
| <div class="tab-pane active" id="onetb"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="twotb"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="threetb"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fourtb"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fivetb"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc | |
| nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="span12 tabbable tabs-below"> | |
| <ul class="nav nav-tabs"> | |
| <li class="active"><a href="#onetb" data-toggle="tab">One</a></li> | |
| <li><a href="#twotb" data-toggle="tab">Two</a></li> | |
| <li><a href="#threetb" data-toggle="tab">Three</a></li> | |
| <li><a href="#fourtb" data-toggle="tab">Four</a></li> | |
| <li><a href="#fivetb" data-toggle="tab">Five</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <hr> | |
| <!-- Vertical left nav-tab example --> | |
| <div class="row"> | |
| <div class="span12"> | |
| <h2>Vertical left nav-tab example</h2> | |
| <div class="tabbable tabs-left"> | |
| <ul class="nav nav-tabs"> | |
| <li class="active"><a href="#onetl" data-toggle="tab">One</a></li> | |
| <li><a href="#twotl" data-toggle="tab">Two</a></li> | |
| <li><a href="#threetl" data-toggle="tab">Three</a></li> | |
| <li><a href="#fourtl" data-toggle="tab">Four</a></li> | |
| <li><a href="#fivetl" data-toggle="tab">Five</a></li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div class="tab-pane active" id="onetl"><p>Lorem ipsum dolor sit amet, | |
| consectetur | |
| adipiscing | |
| elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus | |
| et | |
| malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="twotl"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus | |
| et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="threetl"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus | |
| et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fourtl"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus | |
| et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fivetl"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus | |
| et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et | |
| netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <!-- Vertical right nav-tab example --> | |
| <div class="row"> | |
| <div class="span12"> | |
| <h2>Vertical right nav-tab example</h2> | |
| <div class="tabbable tabs-right"> | |
| <ul class="nav nav-tabs"> | |
| <li class="active"><a href="#onetr" data-toggle="tab">One</a></li> | |
| <li><a href="#twotr" data-toggle="tab">Two</a></li> | |
| <li><a href="#threetr" data-toggle="tab">Three</a></li> | |
| <li><a href="#fourtr" data-toggle="tab">Four</a></li> | |
| <li><a href="#fivetr" data-toggle="tab">Five</a></li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div class="tab-pane active" id="onetr"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing | |
| elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus et | |
| malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="twotr"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="threetr"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fourtr"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| <div class="tab-pane" id="fivetr"><p>Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit. | |
| Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce suscipit | |
| justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, est | |
| metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus et | |
| netus et | |
| malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec | |
| mauris turpis, sed sodales sapien. Cras non est eu neque blandit mollis at sit amet | |
| tortor. | |
| Aenean ac | |
| lacus id massa blandit ornare. Phasellus vel ipsum quis orci feugiat blandit. Nam | |
| hendrerit | |
| elementum | |
| cursus. Donec sem lacus, blandit a imperdiet eget, dignissim nec quam. Fusce | |
| suscipit justo | |
| turpis, a | |
| tincidunt lacus. Vestibulum condimentum arcu quis sapien convallis bibendum. | |
| Curabitur | |
| bibendum | |
| dignissim purus quis suscipit. Suspendisse tincidunt, neque vel laoreet eleifend, | |
| est metus | |
| molestie | |
| urna, in ornare sem massa id felis. Pellentesque habitant morbi tristique senectus | |
| et netus | |
| et malesuada | |
| fames ac turpis egestas.</p></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /container --> | |
| <!-- Le javascript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="libs/bootstrap/js/bootstrap.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment