How do we use navigation in bootstrap

In a website we always are in need of navigation throughout the page. So, how do we do it? How do we use navigation in bootstrap? Let us discuss about the stylish navigations that bootstrap has to offer. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style. Tabular Navigation or Tabs.

To create a tabbed navigation menu:

  • Start with a basic unordered list with the base class of .nav.
  • Add class .nav-tabs.

Following example demonstrates this:

<head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
   <p>Tabs Example</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>
  </body> 

Pills Navigation:

  • BASIC PILLS:

To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs.

Following example demonstrates this:

 <p>Tabs Example</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>
  • nav-pillsVERTICLE PILLS:

We can stack the pills vertically using the class .nav-stacked alongwith classes .nav, .nav-pills.
Following example demonstrates this:

<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul> 
  • vertcal-pillsJustified Nav:

We can make tabs or pills equal widths of their parent at screens wider than 768px using class .nav-justified alongwith .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.
Following example demonstrates this:

<p>Tabs Example</p>
<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li> 
  • justified-pillsDropdowns:

Navigation menus share a similar syntax with dropdown menus. By default, we have a list item that has an anchor working in conjunction with some data-attributes to trigger an unordered list with a .dropdown-menu class.

TABS WITH DROPDOWNS:

  • To add dropdowns to tab:
  • Start with a basic unordered list with the base class of .nav
  • Add class .nav-tabs.
  • Now add an unordered list with a .dropdown-menu class.
  • To do the same thing with pills, simply swap the .nav-tabs class with .nav-pills.

Let us view an example:

<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li><a href="#">Java</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
            </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul> 
  • dropdownDisabled Links:

For each of the .nav classes, add the .disabled class, it will create a gray link that also disables the :hover state as shown in the following example:

<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Bootstrap</a></li>
   <li><a href="#">javascript</a></li>
   <li class="disabled"><a href="#">Java</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
            </ul>
   </li>
   <li><a href="#">PHP</a></li> 

disabled

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *