home

Bootstrap Navigation

You all know Navigations is the main part of web page, what it will do is, it will allow you to go one page to other page like when you clicks on about page it redirects to about page. You can create your own page links by using anchor tag (a).

<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
    <body>
     <div class="container"><h1><a href="#">Bootstrap Logo Place</a></h1>
       <nav class="navbar">
         <div class="navbar-inner">
           <div class="container">
               <ul class="nav">
                  <li class="active"><a  href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Downloads</a></li>
                  <li><a href="#">Contact</a></li>
              </ul>
           </div>
          </div>
        </nav>

</div> </body> </html>
Please save the code and make your file name as index.html (browser will take by default first preference and index gets open)

Logo

Home About Services Downloads Contact

In the above, we have some simple bootstrap navigation code with few links (About, Services, Download, Contact), here we have a class navbar, navbar should be given to the main navigation tag(nav), also use the container class to store your menu, please follow the classes and list tags which is having with some names (navigation text), then only you will get as same bootstrap developed menu.

Responsive Bootstrap Navigation

Bootstrap is completely responsive frame work developed by twitter. Here we have responsive navigation code. Let have look into the code, we have html5 nav tag is which is containing classes of navbar and navbar-fixed-top, we already discussed about navbar and about remaining class, navbar-fixed-top class job is to fix navigation on the top of window, and another one is role, it self name can describes the mining of tag, it mean what kind of roles its going to be.

Of course container div is carries the entire menu items and button is for only for responsive when the device changed desktop to mobile or table automatically toggle (menu will slide up and down with help of navbar-toggle class) with help of bootstrap css it will change the accordingly, data-toggle initially collapse. sr-only Hides an element to all devices except screen reader.

 <nav class="navbar navbar-fixed-top" role="navigation">
     <div class="container">    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>    
        </button>
             <a class="navbar-brand" href="#">
                 <img src="http://ustutorials.com/includes/images/logo.gif" alt="logo">
              </a>
     </div>

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li> </ul> </div> </nav>
And important things is this completely mobile friendly responsive navigation.