Bootstrap Nav-bar

The navbar is a nice prominent feature of Bootstrap. Navbars are responsive meta components that serve as navigation headers. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.
Creating a default navbar:
As we all know how much important a nav-bar could be, we also learn how develop.We have a basic steps for creating a nav-bar following aset of codec.
1.Add classes .navbar, .navbar-default to the nav tag.
2.Add role=”navigation” to the above element, to help with accessibility.
3.Add a header class .navbar-header to the div element. This will give the text a slightly larger size.
4.To add links to the navbar, simply add an unordered list with a classes of .nav, .navbar-nav.

<!DOCTYPE html>
<html>
  <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>
    <nav class="navbar navbar-default" role="navigation">

   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Nav-Sample 1</a></li>
         <li><a href="#">Nav-Sample 2</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Nav-Sample 3
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">javascript</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Bootstrap</a></li>
                </ul>
         </li>
      </ul>
   </div>
</nav>
  </body>
</html>

Converted_file_908a71ca

In the above we have learned how to create a nav-bar. As nav-bar helps us navigating through the web page. It is also imperative that we should decide where to put it in the page for better view.In the next codec we are trying to learn to position a nav-bar in the very bottom of a browser.

<!DOCTYPE html>
<html>
<head>
 <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js">&Lt;/script>
 <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">&Lt;/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">&Lt;/script>
</head>
<body>
 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div>
      <ul class="nav navbar-nav">
        <li class="active">&Lt;a href="#">Nav-Sample 1&Lt;/a>
        </li>
        <li>&Lt;a href="#">Nav-Sample 2&Lt;/a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Nav-Sample 3
               <b class="caret">&Lt;/b>
            </a>
          <ul class="dropdown-menu">
            <li>&Lt;a href="#">javascript&Lt;/a>
            </li>
            <li>&Lt;a href="#">EJB&Lt;/a>
            </li>
            <li>&Lt;a href="#">Bootstrap&Lt;/a>
            </li>
          </ul>
        </li>
      </ul>
</div>
</nav>
</body>
</html>

Converted_file_580259e1

The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. If you want the navbar fixed to the top, add class .navbar-fixed-top to the .navbar class. Following example demonstrates this:

<!DOCTYPE html>
<html>

<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>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Nav-Sample 1</a></li>
         <li><a href="#">Nav-Sample 2</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Nav-Sample 3
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">javascript</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Bootstrap</a></li>
                </ul>
         </li>
      </ul>
   </div>
</nav>
</body>
</html>

To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding the padding to the . Following example demonstrates this:

  <nav class="navbar navbar-default navbar-static-top" role="navigation">

   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Nav-Sample 1</a></li>
         <li><a href="#">Nav-Sample 2</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Nav-Sample 3
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">javascript</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Bootstrap</a></li>
                </ul>
         </li>
      </ul>
   </div>
</nav>

For other useful articles on bootstrap stay connected with us.

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

Enter your email address:

Delivered by FeedBurner