Difference between revisions of "Bootstrap navigation bar"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) |
Karl Jones (Talk | contribs) (→General) |
||
| Line 38: | Line 38: | ||
* [http://getbootstrap.com/examples/starter-template/ Starter template] @ getbootstrap.com | * [http://getbootstrap.com/examples/starter-template/ Starter template] @ getbootstrap.com | ||
* [http://getbootstrap.com/components/#navbar Navbar component] @ getbootstrap.com | * [http://getbootstrap.com/components/#navbar Navbar component] @ getbootstrap.com | ||
| − | * [http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 | + | * [http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 Bootstrap navbar generator] @ smarchal.com |
| + | * [http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 Change navbar color in Twitter Bootstrap 3] @ stackoverflow | ||
=== code.karljones.com === | === code.karljones.com === | ||
Revision as of 05:01, 3 May 2016
In Bootstrap (framework), the navigation bar provides a responsive navigational menu.
Contents
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
- Starter template @ getbootstrap.com
- Navbar component @ getbootstrap.com
- Bootstrap navbar generator @ smarchal.com
- Change navbar color in Twitter Bootstrap 3 @ stackoverflow
