Home>

This article will mainly introduce the menu and navigation of bootstrap.

At the beginning of this article, JavaScript related files will be introduced.as follows:

<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

In bootstrap, the drop-down menu component is a separate component.Boottrap's component interaction effects are dependent on plugins written by the jquery library.So before using bootstrap.min.js, you must load jquery.min.js to take effect.

1. Drop-down menu-basic usage

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic usage of drop-down menu</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-Css style->
  <style>
    body {margin:50px;padding:50px;}
  </style>
</head>
<body>
<div>
  <button type="button" data-toggle="dropdown">
    Drop-down menu<span></span>
  </button>
  <ul role="menu" aria-labelledby="dropdownmenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 2</a></li>
    <!-Set the menu item state to the current state (.active)->
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 3</a></li>
    <!-Set the menu item status to disabled (.disabled)->
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li>
    <!-Drop-down divider->
    <li role="presentation"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li>
    <li role="presentation"></li>
    <li role="presentation">menu title</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 5</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 6</a></li>
  </ul>
</div>
<!-Placed at the end of the document,Make pages load faster->
<!-If i want to use bootstrap's js plugin, you must first call into jquery->
<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>
<!-Including all bootstrap js plugins or js plugins that can be used as needed->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

note:Sometimes there is a need to pop up,Then just add the "dropup" class name to the "dropdown" class name.

2. Drop-down menu-alignment

The drop-down menu in bootstrap is left-aligned by default.If i 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 to "dropdown-menu" as shown below:

<!-Omitted as in the code in 1->
...
<div>
  <button type="button" data-toggle="dropdown">
    Drop-down menu<span></span>
  </button>
  <ul 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="#">drop-down menu item</a></li>
  </ul>
</div>
...

3. Button-button group

The button group is also a separate component.Need to rely on the button.js plugin to run properly.The bootstrap.js has integrated the button.js plugin function.

Usage:Use the "btn-group" container to put multiple buttons into this container.As follows:

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>button group</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-Css style->
  <style>
    body {margin:30px;padding:30px;}
  </style>
</head>
<body>
<div>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
  <button type="button"><span></span></button>
</div>
<!-Placed at the end of the document,Make pages load faster->
<!-If i want to use bootstrap's js plugin, you must first call into jquery->
<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>
<!-Including all bootstrap js plugins or js plugins that can be used as needed->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

4. Buttons-Nested Grouping

most of the time,We often arrange drop-down menus with ordinary button groups,Achieve an effect similar to the navigation menu.When using bootstrap buttons with nested groups,Just replace the "dropdown" container that originally made the drop-down menu with "btn-group" and put it on the same level as the ordinary buttons.As follows:

<!-Omitted as in the code in 3->
...
<div>
  <button type="button">Home</button>
  <div>
    <button data-toggle="dropdown" type="button">Mobile Development<span></span></button>
    <ul>
      <li><a href="##">android</a></li>
      <li><a href="##"&ios;</a></li>
    </ul>
  </div>
  <button type="button">java web development</button>
  <button type="button">php development</button>
  <button type="button">Big Data</button>
</div>
...

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

5. Button-Split Button

The method of equally dividing buttons (adaptive grouping buttons) is also very simple.Just add a "btn-group-justified" class name to the button group "btn-group", as shown below:

<div>
  <a href="#">third</a>
  <a href="#">third</a>
  <a href="#">third</a>
</div>

6. Navigation-Basic Usage

Making navigation bars in bootstrap is mainly through the ".nav" style. .nav "must have another style attached to it to work,Such as "nav-tabs", "nav-pills" and so on.

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Navigation-Basic Usage</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-Css style->
  <style>
    body {margin:30px;padding:30px;}
  </style>
</head>
<body>
<ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">News</a></li>
  <li><a href="##">Blog</a></li>
  <!-Tab-shaped tab navigation->
  <li><a href="##">Forum</a></li>
  <!-Disabled state>
  <li><a href="##">Feedback</a></li>
</ul>
<!-Placed at the end of the document,Make pages load faster->
<!-If i want to use bootstrap's js plugin, you must first call into jquery->
<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>
<!-Including all bootstrap js plugins or js plugins that can be used as needed->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

7. Navigation-Pills Navigation

Capsule navigation, with the current item highlighted,And with rounded effect.Just replace the class name "nav-tabs" with "nav-pills":

<ul>
  <!-Current status>
  <li><a href="##">Home</a></li>
  <!-Suspended state>
  <li><a href="##">News</a></li>
  <li>
    <a href="##" data-toggle="dropdown">Blog<span></span></a>
    <ul>
      <!-Secondary menu->
      <li><a href="##">Front-end blog</a></li>
      <li><a href="##">java blog</a></li>
    </ul>
  </li>
  <li><a href="##">Forum</a></li>
  <!-Disabled state>
  <li><a href="##">Feedback</a></li>
</ul>

8. Navigation-Vertically stacked navigation

To make vertical stacked navigation, just add a "nav-stacked" class name on the basis of "nav-pills":

<ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">News</a></li>
  <li><a href="##">Blog</a></li>
  <li><a href="##">Forum</a></li>
  <!-Disabled state>
  <li><a href="##">Feedback</a></li>
</ul>

9. Navigation-adaptive navigation

The adaptive navigation "nav-justified" (source code please refer to bootstrap.css file, lines 3585 to 3607) needs to be used together with "nav-tabs" or "nav-pills".Such as:

<ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">News</a></li>
  <li><a href="##">Blog</a></li>
  <li><a href="##">Forum</a></li>
  <!-Disabled state>
  <li><a href="##">Feedback</a></li>
</ul>

10. Navigation-Breaded

Breadcrumb is also a separate module component,Generally used for navigation,The main role is to tell the user where the page is (the current position). It ’s easy to use,Add breadcrumb class for ol:

<ol>
  <li><a href="#">Home</a></li>
  <li><a href="#">China</a></li>
  <li>Beijing</li>
</ol>
  • Previous Ng-class instruction usage in AngularJS introductory tutorial
  • Next Summarize MD style related controls in Android