Every day, Bootstrap must learn the navigation bar (2 ).

Every day, Bootstrap must learn the navigation bar (2 ).

I. basic navigation bar

When creating a basic navigation bar, take the following steps:

Step 1: First add the class name "navbar-nav" based on the navigation list (<ul class = "nav">"

Step 2: Add a container (div) outside the list and use the class name "navbar" and "navbar-default"

<Div class = "navbar-default"> <! -- Navigation bar title --> <div class = "navbar-header"> <a href = "#" class = "navbar-brand"> LOGO </a> </div> <! -- Basic navigation bar --> <ul class = "nav navbar-nav"> <li> <a href = "#"> website homepage </a> </li> <! -- Level 2 menu --> <li class = "dropdown"> <a href = "#" data-toggle = "dropdown" class = "dropdown-toggle"> series of tutorials <span class = "caret"> </span> </a> <ul class = "dropdown-menu"> <li> <a href = "##"> CSS3 </> </li> <a href = "#"> JavaScript </a> </li> <li class = "disabled"> <a href = "# # "> PHP </a> </li> </ul> </li> <a href =" # "> introduction to famous teachers </a> </ li> <a href = "#"> success stories </a> </li> <a href = "#"> about us </ a> </li> </ul> <! -- Search form --> <form action = "#" class = "navbar-form navbar-left"> <div class = "form-group"> <input type = "text "class =" form-control "placeholder =" Enter keywords "/> </div> <button type =" submit "class =" btn-default "> Search </ button> </form> </div>

1. In Web page creation, there is often a title in front of the menu (the text font size is slightly larger than other text ), it is implemented through "navbar-header" and "navbar-brand.

<! -- Navigation bar title --> <div class = "navbar-header"> <a href = "#" class = "navbar-brand"> LOGO </a> </div>

2. The level-2 menu is implemented through <ul> nesting.

<! -- Level 2 menu --> <li class = "dropdown"> <a href = "#" data-toggle = "dropdown" class = "dropdown-toggle"> series of tutorials <span class = "caret"> </span> </a> <ul class = "dropdown-menu"> <li> <a href = "##"> CSS3 </> </li> <a href = "#"> JavaScript </a> </li> <li class = "disabled"> <a href = "# # "> PHP </a> </li> </ul> </li>

3. A "navbar-form" is provided in the Bootstrap framework, which is easy to use. Put a form with the navbar-form class name in the navbar container.

"Navbar-left" float the left of the form and the "navbar-right" style to align the elements on the navigation bar to the right.

<! -- Search form --> <form action = "#" class = "navbar-form navbar-left"> <div class = "form-group"> <input type = "text "class =" form-control "placeholder =" Enter keywords "/> </div> <button type =" submit "class =" btn-default "> Search </ button> </form>

Ii. Reversed navigation bar

The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework for everyone. It only replaces the "navbar-deafult" class name with "navbar-inverse ".

<Div class = "navbar-inverse" role = "navigation"> <div class = "navbar-header"> <a href = "#" class = "navbar-brand "> LOGO </a> </div> <ul class =" nav navbar-nav "> <li class =" active "> <a href =" "> homepage </ a> </li> <a href = ""> tutorial </a> </li> <a href = ""> about us </> </li> </ul> </div>

3. Fixed navigation bar

In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser.

The Bootstrap framework provides two fixed navigation bar methods:

☑. Navbar-fixed-top: the navigation bar is fixed at the top of the browser window.

☑. Navbar-fixed-bottom: the navigation bar is fixed at the bottom of the browser window.

The method is simple. You only need to append the corresponding class name to navbar, the most external container of the navigation bar.

<! -- The navigation bar is fixed at the top of the browser window --> <div class = "navbar-default navbar-fixed-top">... </Div> <! -- The navigation bar is fixed at the bottom of the browser window --> <div class = "navbar-default navbar-fixed-bottom">... </Div>

Iv. Responsive navigation bar

<Div class = "navbar-default"> <div class = "navbar-header"> <! --. The navbar-toggle style is used to shrink the content of toggle, that is, the element of the nav-collapse style --> <button class = "navbar-toggle" type = "button" data-toggle = "collapse" data-target = "# demo"> <span class = "sr-only"> Toggle Navigation </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> </button> <! -- Make sure that the screen is either wide screen or narrow screen, navbar-brand display --> <a href = "#" class = "navbar-brand"> LOGO </a> </div> <! -- When the screen width is less than 768px, the content in the div. navbar-responsive-collapse container is hidden and the icon-bar is displayed. When you click the icon-bar icon, expand it. When the screen is greater than 768px, it is displayed by default. --> <Div class = "collapse navbar-responsive-collapse" id = "demo"> <ul class = "nav navbar-nav"> <li> <a href = "#"> homepage </a> </li> <a href = "#"> series of tutorials </a> </li> <li> <a href = "#"> introduction to famous teachers </a> </li> <a href = "#"> success stories </a> </ li> <a href = "#"> about us </a> </li> </ul> </div>

In the wide screen mode:

In narrow screen mode:

Usage:

1. Ensure that the content to be folded in the narrow screen must be wrapped in a div with two class names: collapse and navbar-collapse. Add a class name or id name for this div.

2. Ensure the icon style to be displayed when the screen is narrow (fixed ):

<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>

3. Add data-target = ". Class Name/# id name" to the button"

The above is all the content of this article, hoping to help you learn.

You can also combineA daily guide to BootstrapThis article will be learned.

Articles you may be interested in:

• Every day, Bootstrap is a simple entry
• Introduction to Bootstrap (zero) Bootstrap
• Bootstrap getting started book (I) typographical
• Bootstrap entry books (iii) raster System
• Bootstrap getting started book (4) menus, buttons and navigation
• Bootstrap entry books (5) navigation bar and paging navigation