Instantly share code, notes, and snippets.
Created
September 26, 2012 14:09
-
Save jeffschwartz/3788272 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Navigation Bars - nav-list
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-list 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"> | |
| <link href="libs/bootstrap/css/docs.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="span3"> | |
| <div class="tabbable tabs-left"> | |
| <!-- wrapp your tabs in a container with class tabbable bring your tabs to life with a simple plugin to toggle between content. --> | |
| <ul class="nav nav-list affix bs-docs-sidenav"> | |
| <!-- nav, nav-list styles are required. affix is required if you want that functionality. bs-docs-sidenav copies Bootstraps documentation style for this nav. --> | |
| <li class="active"><a href="#one" data-toggle="tab"><i | |
| class="icon-chevron-right"></i>One</a> | |
| </li> | |
| <!-- use class active in li to make the item active. tabs require a element to have data-toggle="tab" --> | |
| <li><a href="#two" data-toggle="tab"><i class="icon-chevron-right"></i>Two</a></li> | |
| <li><a href="#three" data-toggle="tab"><i class="icon-chevron-right"></i>Three</a></li> | |
| <li><a href="#four" data-toggle="tab"><i class="icon-chevron-right"></i>Four</a></li> | |
| <li><a href="#five" data-toggle="tab"><i class="icon-chevron-right"></i>Five</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="span9"> | |
| <div class="tab-content"><!-- content requires enclosing container with class tab-content --> | |
| <h1>Bootstrap nav-list example</h1> | |
| <!-- content can share elements - this header is shared with all tab-panes --> | |
| <section class="tab-pane active" id="one"> | |
| <!-- content requires class tab-pane and unique id matching its tab id (see above) --> | |
| <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> | |
| </section> | |
| <section class="tab-pane" id="two"> | |
| <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> | |
| </section> | |
| <section class="tab-pane" id="three"> | |
| <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> | |
| </section> | |
| <section class="tab-pane" id="four"> | |
| <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> | |
| </section> | |
| <section class="tab-pane" id="five"> | |
| <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> | |
| </section> | |
| </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