First contact with the Magical bootstrap menu and navigation _javascript tips

This article will mainly introduce the bootstrap menu, navigation.

JavaScript related files will be introduced at the beginning of this article as follows:

<!--placed at the end of the body tag to make the page load faster-->
<!--If you want to use the bootstrap JS plug-in, you must first transfer into the jquery-->
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.min.js" ></script>
<!--including all bootstrap JS Plug-ins or can be used according to the JS plug-in-->
<script src= "Http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>

In Bootstrap, the Drop-down menu component is a stand-alone component. Bootstrap component interaction effect is dependent on the jquery library to write Plug-ins, so before using bootstrap.min.js must first load jquery.min.js will not take effect.

1. Drop down menu-basic usage

<!  DOCTYPE html>  

Note: Sometimes there is a need to bounce up, then only need to "dropdown" class name on the basis of appending the "Dropup" class name.

The effect chart is as follows:

2. Drop-down Menu-Alignment

The bootstrap Drop-down menu is left-aligned by default, and if you want the Drop-down menu to be right-aligned relative to the parent container, you can add a "pull-right" or "Dropdown-menu-right" class name on "Dropdown-menu," as follows:

<!--omitted parts such as code-->
in 1 ... <div class= "dropdown" >
  <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" >
    pull-down menu <span class= "Caret" ></span>
  </button>
  <ul class= "Dropdown-menu pull-right" role= "menu" aria-labelledby= "dropdownMenu1" >
    <li role= "Presentation" ><a Role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu item </a></li>
    <li role= "presentation" ><a role = "MenuItem" tabindex= "-1" href= "#" > Dropdown menu item </a></li>
  </ul>
</div> 
...

The effect chart is as follows:

3. button-button group

The button group is also a stand-alone component. You need to rely on the Button.js plug-in to function properly. And Bootstrap.js has integrated the Button.js plug-in functionality.

Usage: Use the "Btn-group" container to put multiple buttons into this container. As shown below:

<! DOCTYPE html>  

The effect chart is as follows:

4. button-Nested grouping

Most of the time, we often put the Drop-down menu and the normal button group together, to achieve similar to the navigation menu effect. When using the nested grouping of the bootstrap button, simply replace the "dropdown" container with the "Btn-group" that originally made the Drop-down menu, and put it at the same level as the normal button. As shown below:

<!--omitted parts such as code-->
in 3 ... <div class= "Btn-group" >
  <button class= "btn btn-default" type= "button" > Home </button>
  < Div class= "Btn-group" >
    <button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" button "> Mobile development <span class=" caret "></span></button>
    <ul class=" Dropdown-menu ">
      <li ><a href= "# #" >Android</a></li>
      <li><a href= "# #" >IOS</a></li>
    </ul>
  </div>
  <button class= "btn btn-default" type= "button" >java Web development </button >
  <button class= "btn btn-default" type= "button" >php development </button>
  <button class= "btn Btn-default "type=" button "> Big Data </button>
</div>
...

The effect chart is as follows:

In practical use, always encounter the effect of vertical display. This style is also provided in the bootstrap. We only need to change the horizontal grouping of "Btn-group" class name to "Btn-group-vertical" to achieve the vertical grouping of buttons.

5. Button-Divide button

The divide-and-drop button (Adaptive Group button) implementation is also very simple, only need to add a "btn-group-justified" class name on the button group "Btn-group", as follows:

<div class= "Btn-group btn-group-justified" > <a class= "btn
  btn-default" href= "#" > One-third </a>
  <a class= "btn Btn-default" href= "#" > One-third </a>
  <a class= "btn Btn-default" href= "#" > One-third </a >
</div>

The effect chart is as follows:

6. Navigation-Basic usage

Bootstrap in the production of navigation bar mainly through the ". Nav" style ... nav "must attach another style to be effective, such as" Nav-tabs "," Nav-pills "and so on.

<! DOCTYPE html>  

The effect chart is as follows:

7. Navigation-capsule-shaped (pills) navigation

Capsule-shaped (pills) navigation with the current item highlighted with rounded corners. Only need to replace the class name "Nav-tabs" with "Nav-pills" can be:

<ul class= "Nav nav-pills" >
  <!--current status--> <li class=
  "active" ><a href= "# #" > Home </a ></li>
  <!--suspension State-->
  <li><a href= "# #" > News </a></li>
  <li class= "Dropdown" >
    <a href= "# #" class= "Dropdown-toggle" data-toggle= "dropdown" > Blog <span class= "Caret" > </span></a>
    <ul class= "Dropdown-menu" >
      <!--Level two menu-->
      <li><a href= "# # "> Front-End blog </a></li>
      <li><a href=" # # ">java blog </a></li>
    </ul>
  </li>
  <li><a href= "# #" > Forum </a></li>
  <!--disable status-->
  <li class= "Disabled" ><a href= "# #" > Feedback </a></li>
</ul>

The effect chart is as follows:

8. Navigation-vertical stacking of navigation

To make a vertical stacked navigation you only need to add a "nav-stacked" class name on the basis of "nav-pills":

<ul class= "nav nav-pills nav-stacked" >
  <li class= "active" ><a href= "# #" > Home </a></li >
  <li><a href= "# #" > News </a></li>
  <li><a href= "# #" > Blog </a></ li>
  <li><a href= "# #" > Forum </a></li>
  <!--disabled status-->
  <li class= "disabled "><a href=" # # > Feedback </a></li>
</ul>

The effect chart is as follows:

9. Navigation-Adaptive Navigation

Adaptive navigation "nav-justified" (source code please refer to the Bootstrap.css file No. 3585 line ~ No. 3607 Line) needs to be combined with "nav-tabs" or "nav-pills". Such as:

<ul class= "nav nav-tabs nav-justified" >
  <li class= "active" ><a href= "# #" > Home </a></li >
  <li><a href= "# #" > News </a></li>
  <li><a href= "# #" > Blog </a></ li>
  <li><a href= "# #" > Forum </a></li>
  <!--disabled status-->
  <li class= "disabled "><a href=" # # > Feedback </a></li>
</ul>

The effect chart is as follows:

10. Navigation-Crumb Type

Breadcrumbs (Breadcrumb) is also a stand-alone modular component that is generally used for navigation, primarily to tell the user where the page is now (current position). Use the way is very simple, for OL to join the Breadcrumb class:

<ol class= "breadcrumb" >
  <li><a href= "#" > Home </a></li>
  <li><a href= "#" > China </a></li>
  <li class= "active" > Beijing </li>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.