Bootstrap Tutorial Navigation
Make a Responsive Website quickly and easily
Here’s the finished navigation
1. Create the navigation
Using a bulleted list, create your navigation including your sub-navigation. Note that you will have two sets of ul tags.
<nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Tutorial One</a></li> <li><a href="#">Tutorial Two</a></li> <li><a href="#">Tutorial Three</a></li> </ul> </li> <li><a href="#">Resources</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
2. Add classes
Add class=”nav” to the first set of ul tags.
<ul class=”nav”>
Make the home page “active” so the navigation is highlighted
<li class=”active”>
Add class-“navbar” to the <nav> tag
<nav class=”navbar”>
Add a div around the entire first set of ul tags
<div class=”navbar-inner”>
Make the navigation bar black instead of white
<nav class=”navbar navbar-inverse>
<nav class="navbar navbar-inverse"> <div class="navbar-inner"> <ul class="nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Tutorial One</a></li> <li><a href="#">Tutorial Two</a></li> <li><a href="#">Tutorial Three</a></li> </ul> </li> <li><a href="#">Resources</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>
3. Make it responsive
Make the navigation responsive by adding some code:
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>
Add the above code to your navigation right below the div class=”navbar-inner”
<nav class="navbar navbar-inverse"> <div class="navbar-inner"> <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> <ul class="nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Tutorial One</a></li> <li><a href="#">Tutorial Two</a></li> <li><a href="#">Tutorial Three</a></li> </ul> </li> <li><a href="#">Resources</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>
4. Add drop down menus
Add more classes
Define what menu will collapse
Add div class=”nav-collapse” around the first ul
<div class=”nav-collapse”>
Define what menu will be the drop down
Add class to the second ul tags
<ul class=dropdown-menu”>
Define what menu will be the drop down
Add class to li tag for around Tutorials navigation
<li class=”dropdown”>
Define the link that will have the drop down
Add class to a href
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Tutorials </a>
Add caret
<span class=”caret”></span>
<nav class="navbar navbar-inverse"> <div class="navbar-inner"> <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> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Tutorial One</a></li> <li><a href="#">Tutorial Two</a></li> <li><a href="#">Tutorial Three</a></li> </ul> </li> <li><a href="#">Resources</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav>
5. Voilà! You’re done.
Here’s a link to the finished navigation: http://www.everythingaboutweb.com/classes/examples/bootstrap/final_web/index_nav.html