This article will mainly introduce Bootstrap's menu and navigation.
Starting with this article, we will introduce JavaScript-related files, as follows:
<!-- Place it at the end of the body tag to make the page load faster->
<!-- If you want to use the js plugin of Bootstrap, you must first call jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- Includes 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>
In Bootstrap, the drop-down menu component is a standalone component. The interaction effect of Bootstrap's component is all based on plugins written by the jquery library, so before using bootstrap.min.js, you must first load jquery.min.js to take effect.
1. Pull-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" id="dropdownMenu1" data-toggle="dropdown"> Drop-down menu<span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu1</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu2</a></li> <!--Set the menu item status to the current status (.active) --> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu3</a></li> <!--Set the menu item status to disabled (.disabled) --> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li> <!--Pull-down divider--> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></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> <!-- Place it at the end of the document to make the page load faster--><!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><!-- Including all js plugins for bootstrap 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 bounce upward, so you only need to add the "dropup" class name to the "dropdown" class name.
The renderings are as follows:
2. Pull-down menu-alignment
The drop-down menu in Bootstrap is left-aligned by default. 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 to "dropdown-menu", as shown below:
<!--Omitted part such as code in 1-->...<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> dropdown menu<span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> dropdown menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> dropdown menu item</a></li> </ul></div> ...
The renderings are as follows:
3. Button-button group
The button group is also an independent component. It needs to rely on the button.js plugin to run normally. And bootstrap.js has integrated the button.js plug-in function.
Usage: Use the "btn-group" container and place multiple buttons into this container. As shown below:
<!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> <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><!-- Place it at the end of the document to make the page load faster--><!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><!-- Including all bootstrap js plugins or js plugins that can be called as needed --><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>The renderings are as follows:
4. Buttons - Nested Grouping
Many times, we often arrange the drop-down menu and ordinary button groups to achieve an effect similar to the navigation menu. When using the nested grouping of Bootstrap buttons, you only need to replace the container "dropdown" that made the dropdown menu with "btn-group" and place it on the same level as the ordinary buttons. As shown below:
<!--Omitted parts such as 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>...
The renderings are as follows:
In actual use, the vertical display effect will always be encountered. 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 realize the vertical grouping of the button.
5. Button-Equivalent Button
The implementation method of equalization button (adaptive grouping button) is also very simple. You only need to add a "btn-group-justified" class name to the button group "btn-group" as shown below:
<div> <a href="#">one third</a> <a href="#">one third</a> <a href="#">one third</a> <a href="#">one third</a></div>
The renderings are as follows:
6. Navigation - Basic Usage
The navigation bars are mainly made in Bootstrap through the ".nav" style. .nav" must be attached with another style to be effective, such as "nav-tabs", "nav-pills", etc.
<!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> <!--Tag-shaped tab navigation--> <li><a href="##">Forum</a></li> <!-- Disabled status--> <li><a href="##">Feedback</a></li></ul><!-- Place at the end of the document to make the page load faster--><!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><!-- Including all js plugins for bootstrap or js plugins that can be called as needed--><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>The renderings are as follows:
7. Navigation-capsule (pills) navigation
Capsule (pills) navigation, the current item is highlighted, and has a rounded corner effect. Just replace the class name "nav-tabs" with "nav-pills":
<ul> <!--Current Status--> <li><a href="##">Home</a></li> <!--Suspended Status--> <li><a href="##">News</a></li> <li> <a href="##" data-toggle="dropdown">Blog<span></span></a> <ul> <!--Second Menu--> <li><a href="##">Front-end Blog</a></li> <li><a href="##">Java Blog</a></li> </li> </li> <li><a href="##">Forum</a></li> <!--Disabled Status--> <li><a href="##">Feedback</a></li></ul>
The renderings are as follows:
8. Navigation - Vertical stacked navigation
To create vertical stack navigation, you only need to add a "nav-stacked" class name based on "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--> <li><a href="##">Feedback</a></li></ul>
The renderings are as follows:
9. Navigation - Adaptive Navigation
Adaptive navigation "nav-justified" (please refer to the bootstrap.css file, line 3585 to line 3607) needs to be used in conjunction with "nav-tabs" or "nav-pills". like:
<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--> <li><a href="##">Feedback</a></li></ul>
The renderings are as follows:
10. Navigation-Breadcrumb
Breadcrumb is also an independent module component, generally used for navigation, and its main function is to tell the user the current location of the page (current location). The usage method is very simple, add the breadcrumb class to ol:
<ol> <li><a href="#">Home</a></li> <li><a href="#">China</a></li> <li>Beijing</li></ol>
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.