Difference between revisions of "Bootstrap navigation bar"

From Wiki @ Karl Jones dot com
Jump to: navigation, search
(Example)
Line 34: Line 34:
 
== External links ==
 
== External links ==
  
=== General ==
+
=== General ===
  
 
* [http://getbootstrap.com/examples/starter-template/ Starter template] @ getbootstrap.com
 
* [http://getbootstrap.com/examples/starter-template/ Starter template] @ getbootstrap.com
Line 40: Line 40:
 
* [http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 Gerate your own Bootstrap navbar] @ smarchal.com
 
* [http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 Gerate your own Bootstrap navbar] @ smarchal.com
  
=== code.karljones.com ==
+
=== code.karljones.com ===
  
 
* [http://code.karljones.com/bootstrap-examples Bootstrap examples]
 
* [http://code.karljones.com/bootstrap-examples Bootstrap examples]

Revision as of 03:57, 3 May 2016

In Bootstrap (framework), the navigation bar provides a responsive navigational menu.

Navigation bar and hamburger menu

On wider screens, the navigation bar displays at full width.

On narrow screen (mobile phones), the hamburger menu displays instead.

Requires Bootstrap CSS and JavaScript

Using the Bootstrap navigation bar requires both Bootstrap CSS and Bootstrap JavaScript.

Example

Here is the HTML for a pills-style navigation bar:

<nav>
 <ul class="nav nav-pills pull-right">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact</a></li>
 </ul>
</nav>

Source: http://getbootstrap.com/examples/jumbotron-narrow/

See also

External links

General

code.karljones.com