bootstrap navigation

A navigation bar is a navigation header that is placed at the top of the page. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">.

Bootstrap provides an alternative black navbar as well that we can get by changing the navbar-default class into navbar-inverse.

Dropdowns can also be added to the navbar.

The navbar-right class is used to right-align navigation bar buttons.

To add buttons inside the navbar, add the navbar-btn class on a button after the <ul> ends.

  <button class="btn btn-danger navbar-btn">Button</button>

To add form elements inside the navbar, add the navbar-form class to a form element and add an inputs.

  <form class="navbar-form navbar-left">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
  </form>

You can also use the input-group and input-group-addon classes to attach an icon or help text next to the input field.

  <form class="navbar-form navbar-left">
  <div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-btn">
  <button class="btn btn-default" type="submit">
  <i class="glyphicon glyphicon-search"></i>
  </button>
  </div>
  </div>
  </form>  

The navigation bar can also be fixed at the top or at the bottom of the page. The navbar-fixed-top class beside the navbar class makes the navigation bar fixed at the top.

  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span> 
  </button>
  <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1 <span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">Page 1-1</a></li>
  <li><a href="#">Page 1-2</a></li>
  <li><a href="#">Page 1-3</a></li>
  </ul>
  </li>
  <li><a href="#">Page 2</a></li> 
  <li><a href="#">Page 3</a></li> 
  </ul>
  <ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
  </div>
  </div>
  </nav>  

Breadcrumbs

The breadcrumb class indicates the current page's location within a navigational hierarchy:

1. Home
2. Private
3. Pictures
4. Vacation

  <ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>        
  </ol>  

Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page. To create a basic pagination, add the pagination class to an <ul> element. Add class active to let the user know which page he/she is on. Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

• 1
• 2
• 3
• 4
• 5

  <ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  </ul>  

---

0 Like 0 Dislike 0 Comment Share Tweet