B3-Bootstrap 3 Navbar Quick Start Guide

Content

b3navbar.zip
├─ css
│  ├─ b3.css
│  ├─ b3_default_icons.html
│  ├─ b3_default_text.html
│  ├─ b3_default_text+icons.html
│  ├─ b3_inverse_icons.html
│  ├─ b3_inverse_text.html
│  └─ b3_inverse_text+icons.html
├─ css+js
│  ├─ b3.css
│  ├─ b3.css
│  ├─ b3_default_icons.html
│  ├─ b3_default_text.html
│  ├─ b3_default_text+icons.html
│  ├─ b3_inverse_icons.html
│  ├─ b3_inverse_text.html
│  ├─ b3_inverse_text+icons.html
│  └─ b3.js
├─ js
│  ├─ b3.css
│  ├─ b3_default_icons.html
│  ├─ b3_default_text.html
│  ├─ b3_default_text+icons.html
│  ├─ b3_inverse_icons.html
│  ├─ b3_inverse_text.html
│  ├─ b3_inverse_text+icons.html
│  └─ b3.js
├─ assets
│  ├─ html5shiv.js
│  └─ respond.js
├─ quickstart.html
└─ readme.html

How to add the navigation bar

Select between 3 different versions of the navigation bar: css, jquery or css+jquery and open selected folder. Select between default or inverse color and type: text, icons or text+icons and open the selected file.

To an existing project

Copy the lines inside <head> tag referencing Bootstrap 3 and jQuery, the line/s referencing b3.css, b3.js or b3.css + b3.js depending on selected version. Copy <nav> tag and all the code inside of it and paste it into your project. This is an example of the code to be copied using css+js/b3_default_icon file:

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="b3.css">
  <script src="http://code.jquery.com/jquery-1.9.0.min.js">
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
  <script src="b3.js">
</head>

<!-- Default icons navigation bar -->
<nav class="navbar navbar-default" role="navigation">
  .
  .
  .
</nav>

To an existing Bootstrap 3 project

Copy <nav> tag and all the code within this tag and paste it into your project. This is an example of the code to be copied using js/b3_inverse_text file:

<!-- Inverse text navigation bar -->
<nav class="navbar navbar-inverse" role="navigation">
  .
  .
  .
</nav>

To a new project

You can use selected file to start your project. Start writing all the code after </nav> tag. If you want to start a new project copy all the code of the selected file and paste it into a blank file. If you want to use the code into an already started new project, copy all the code within <head> and all the code within <nav> including this tag line and paste it into your project. This is an example of the code to be copied to an already started new project using css/b3_inverse_text file:

<head>
  .
  .
  .
</head>

<!-- Inverse text navigation bar -->
<nav class="navbar navbar-inverse" role="navigation">
  .
  .
  .
</nav>

Creating a submenu

You can create submenus inside a menu item. You need to add dropdown-submenu class to a list item first, then you have to create an unordered list inside this item with bootstrap's dropdown-menu class and add list items to it. You can add bootstrap's caret class after the text of the item with the dropdown-submenu class. This is an example of how to create a submenu:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="dropdown-submenu"><a href="#">Options <b class="caret"></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</li>

Navbar display variations

There are different ways to display a navbar. Bootstrap 3 features some classes to achieve this. You can make the navbar to be static at the top or bottom, fixed to top or bottom of the page or wrap the navbar in a container. To view a further explanation visit Bootstrap 3's navbar section. This is an example of a navbar displayed inside a container and fixed to top of the page:

<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    ...
  </nav>
</div>