Bootstrap3 Navigation bar

Navigation bar

1. Navigation bar
2. Header and title
3. Navigation link

Example

<nav class="navbar navbar-default" role="navigaton">
   <div class="container">
      <div class="navigation-header">
         <a class="navbar-brand" href="#">Header</a>
      </div>
      <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Customer</a></li>
         <li><a href="#">Product</a></li>
         <li><a href="#">Order</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-left">
         <li><a href="#">Print</a></li>
       </ul>
      <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">Search</button>
      </form>
     
      <p class="navbar-text">Text</p>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Setting</a></li>
      </ul>
   </div>
</nav>
<div class="container">
   <p>Contents</p>
</div>		

Text

<p class="navbar-text">Text</p>

Link

<a href="#" class="navbar-link">Link</a>

Button

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

Reverse color

<nav class="navbar navbar-inverse" role="navigaton"></nav>

Position

navbar-fixed-top, navbar-fixed-bottom

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

Navigation tab

Navigation bar and collapse control

<ul class="nav nav-tabs" id="mytab">
   <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
   <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
   <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane active" id="tab1">TabContents1</div>
   <div class="tab-pane" id="tab2">TabContents2</div>
   <div class="tab-pane" id="tab3">TabContents3</div>
</div>