Pull-down menu
Special statement: Because the interaction effect of Bootstrap's component is all based on plugins written by the jQuery library, you must first load jquery.min.js before using bootstrap.min.js to produce effects.
<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><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li></ul></div> <!--jquery must be imported before bootstrap, the latter is implemented on the basis of the former --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Reproduction picture:
Implementation principle:
At the beginning, there was a display:none in the class; take a look at css below
.dropdown-menu {position: absolute;/*Set absolute positioning, relative to the parent element div.dropdown*/top: 100%;/*Let the dropdown menu item at the bottom of the parent menu item. If the parent element does not set relative positioning, the element is relative to the body element*/left: 0;z-index: 1000;/*Set the dropdown menu item not be covered by other elements*/display: none;/*Hide the dropdown menu item by default*/float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;font-size: 14px;list-style: none;background-color: #fff;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}Then use the click event to control the removal and addition of the tag class to achieve display and hide
Through js technology, add or remove the class name "open" to the parent container "div.dropdown" to control the display or hiding of the drop-down menu. That is, by default,
"div.dropdown" does not have the class name "open". When the user clicks for the first time, the class name "open" will be added to the class name "open"; when the user clicks again, the class name "open" in the "div.dropdown" container will be removed again. We can view the entire process through the browser's firebug:
Default:
The user clicks for the first time:
The user clicks again:
open css
.open > .dropdown-menu {display: block;}Pull down menu split line
Let’s take a look at the above example, and then paste the code! Look at the effect, you still need to introduce the js file! There are not many things afterwards!
<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><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li></ul></div>
Reproduction picture:
Actually, there is one more line of code
<li role="presentation"></li>
Drop-down menu menu title
Directly upload the code
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown Menu<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation">Part 1 Menu Header</li><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><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation">Part 2 Menu Header</li><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><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li></ul></div>
Reproduction picture:
In fact, there is only one code added:
<li role="presentation">Part 2 Menu Header</li>
Pull-down menu alignment
<h4>Use pull-right class to align the drop-down menu with the right side of the parent container</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
Pull-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><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><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li></ul></div><br /><br /><h4>Use the dropdown-menu-right class to align the dropdown menu with the right side of the parent container</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
Pull-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><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><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li></ul></div><br /><br /><h4>The drop down menu is aligned with the left side of the parent container</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
Pull-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><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><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li></ul></div>
Actually, add a "pull-right" or "dropdown-menu-right" class name on "dropdown-menu", where the style code of css
.dropdown-menu.pull-right {right: 0;left: auto;}.dropdown-menu-right {right: 0;left: auto;}Pull-down menu (menu item status)
The default state of the drop-down menu item (no setting) has a suspended state (:hover) and a focus state (:focus)
In addition to the above two states, the drop-down menu items also have the current state (.active) and the disabled state (.disabled).
<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><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li></ul></div>
Put the mouse on it and a prohibited sign will be displayed on the disabled one. The screenshot cannot be inserted!
Buttons (button group)
The use of single buttons in web pages sometimes does not meet our business needs. We often see multiple buttons combined together, such as a set of small icon buttons in a rich text editor.
<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><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button type="button"><span></span></button></div>
Reproduction picture:
Here you can generate different icon buttons according to different icons! You can view it at this website: http://getbootstrap.com/components/#glyphicons
Buttons (button toolbar)
In a rich text editor, group button groups together, such as copy, cut and paste a group; left-align, middle-align, right-align and end-align a group, as shown in the figure below:
Then the Bootstrap frame button toolbar also provides such a method of making. You only need to put the button group "btn-group" in groups in a large container "btn-toolbar", as shown below:
<div><div><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button></div><div><button type="button"><span></span></button></div><div><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button><button></button><button></button><button></button></div><div><button type="button"><span></span></button><button></button><button><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button></div>
Reproduction picture:
The second set of icons on the figure is added with a class:
btn-group-lg: Large button group
btn-group-sm: Small button group
btn-group-xs: Ultra-small button group
Just add the corresponding class name to the ".btn-group" class name to get button groups of different sizes.
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 it, you only need to replace the container that made the "dropdown" that originally created the dropdown menu with "btn-group" and place it on the same level as the ordinary button.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profile</a></li><li><a href="##">Corporate Culture</a></li><li><a href="##">Organizational Structure</a></li><li><a href="##">Customer Service</a></li></ul></div></div>
Reproduction picture:
Buttons (Vertical Grouping)
In the example seen earlier, the button group is displayed horizontally. But in actual use, the vertical display effect will always be encountered. This style is also provided in the Bootstrap framework. We just need to change the "btn-group" class name of horizontal grouping to "btn-group-vertical"
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profile</a></li><li><a href="##">Corporate Culture</a></li><li><a href="##">Organizational Structure</a></li><li><a href="##">Customer Service</a></li></ul></div></div>
Reproduction picture:
Button (equal button)
The effect of the equal segment button is particularly practical on mobile terminals. The entire button group width is 100% of the container, and each button in the button group divides the entire container width. For example, if you have five buttons in a button group, then each button is 20% width, if there are four buttons, then each button is 25% width, and so on.
The equalization button is also often called an adaptive grouping button. The implementation method 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><div><a href="#">Home</a><a href="#">Product Display</a><a href="#">Case Analysis</a><a href="#">Contact Us</a></div></div>
Change the width of the screen
Special statement: When making aliquot button group, please try to use the <a> tag element to make buttons, because when using the <button> tag element, using display:table is not friendly to support it in some browsers.
The downward upward triangle of the button
The downward triangle of the button, we add a "" label element to the label and name it "caret":
Sometimes our drop-down menu will pop up (the next section will introduce it). At this time, our triangle direction needs to be displayed upward. Implementation method: you need to add the "dropup" class name to the ".btn-group" class (this is also the class name to use for the upward pop-up drop-down menu).
<div><button data-toggle="dropdown" type="button">Button drop-down menu<span></span></button><ul><li><a href="##">Button drop-down menu item</a></li><li><a href="##">Button drop-down menu item</a></li><li><a href="##">Button drop-down menu item</a></li></ul></div>
Reproduction picture:
Navigation (basic style)
Navigation is no stranger to a front-end person. It can be said that navigation is one of the important elements of a website, which can facilitate users to find the various functional services provided by the website. The navigation method is also very diverse and diverse.
The navigation bars are mainly made in the Bootstrap framework through the ".nav" style. The default ".nav" style does not provide the default navigation style. Another style must be attached to it to be effective, such as "nav-tabs", "nav-pills", etc. For example, there is an example of a tab navigation bar in the code editor on the right. His implementation method is to add two class styles to the ul tag.nav and nav-tabs.
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Navigation (tag-shaped tab navigation)
Tag-shaped navigation, also known as tab navigation. Especially when many contents are displayed in chunks, it is very suitable to use this tab to group them.
Tag-shaped navigation is implemented through the "nav-tabs" style. When creating tag-shaped navigation, you need to add this type of name to the original navigation "nav"
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
In fact, the effect of the above example is not consistent with the tab effects we usually see. Generally, the tab teaches a current selection. In fact, the Bootstrap framework is also provided accordingly. Suppose we want the "Home" item to be the currently selected item, just add the class name "class="active"" to its tag.
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
In addition to the current item, some tabs also have a disabled state. To achieve this effect, you only need to add "class="disabled"" to the tag item:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
Navigation (pills) navigation)
The capsule shape (pills) navigation sounds a bit awkward because it looks a bit like a capsule shape. But it is more like the mass navigation we usually see. The current item is highlighted with a rounded corner effect. The implementation method is similar to "nav-tabs". With the same structure, you only need to replace the class name "nav-tabs" with "nav-pills":
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
The same as mentioned above!
Navigation (vertical stacked navigation)
In actual use, in addition to horizontal navigation, there is also vertical navigation, just like the vertical arrangement buttons introduced earlier. Making vertical stack navigation only requires adding a "nav-stacked" class name based on "nav-pills"
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
In the drop-down menu section, there is a divider between the drop-down menu group and the group. In fact, vertical stack navigation also has this effect, you only need to add "
” Just:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
Adaptive Navigation (Use)
Adaptive navigation refers to the navigation occupying the entire width of the container, and the menu items can adapt to the width like the cells of a table. Adaptive navigation is the same as the adaptive button group made using "btn-group-justified". It's just that when making adaptive navigation, another class name "nav-justified". Of course, he needs to be used with "nav-tabs" or "nav-pills". like:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
Reproduction picture:
This is a different screen
Navigation plus pull-down menu (secondary navigation)
The previous examples are about using the Bootstrap framework to create first-level navigation, but in many cases, the effect of second-level navigation is inseparable from the web page. Then it is easier to make secondary navigation in the Bootstrap framework. Just treat li as the parent container, use the class name "dropdown", and nest another list ul in li, and use the method introduced in the previous drop-down menu:
<ul><li><a href="##">Home</a></li><li><a href="##" data-toggle="dropdown">Tutorial<span></span></a><ul><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></li><li><a href="##">About Us</a></li></ul>
Reproduction picture:
Through the browser debugging tool, it is not difficult to find that by clicking on the menu item with secondary navigation, the "open" class name will be automatically added. Clicking again will delete the added "open" class name and the implementation principle of the drop-down menu is the same!
Then, when using the dividing line in the secondary navigation, you only need to add an empty tag like "<li class="nav-divider"></li>".
Breadcrumb navigation
Breadcrumbs are generally used for navigation, and their main function is to tell the user the current location of the page (current location)
<ol><li><a href="#">Home</a></li><li><a href="#">My Book</a></li><li>"Illustrated CSS3"</li></ol>
Reproduction picture: