Bootstrap menu, buttons and navigation

Drop-down menu (basic usage)

Special statement: Because the bootstrap component interaction effect is dependent on the jquery library write plug-in, soYou must load the jquery.min.js before using bootstrap.min.js to have an effect

<div class= "dropdown" ><buttondropdown-toggledata-toggle= "dropdown " > Drop-down menu <span class= "Caret" ></span></button><ul class= "dropdown-menu "role=" menu "aria-labelledby=" dropdownMenu1 ">   <li role=" presentation "><a role=" MenuItem " tabindex= "-1" href= "#" > Drop-down menu items </a></li>   ...   <li role= "Presentation" class= "divider" ></li>   <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu item </a></li></ul></div>

Attention:

<span class= "Caret" ></span>

Add an arrow symbol to the drop-down menu button:

the TabIndex property in HTML allows you to set the order in which the TAB key in the keyboard moves in the control, that is, the order of focus. When you assign a value of TabIndex to 1, this element is ignored when the [Tab] key is used.  

How to use:

When using the drop-down menu component in the bootstrap framework, it is very important that the structure is used correctly, if the structure and the class name are not used correctly, which directly affects whether the component can be used properly. Let's take a quick look at:

1. Use a container called "dropdown" to wrap the entire drop-down menu element, in the example:

<div class="dropdown"></div>

2, using a <button> button As the parent menu, and define the class name "dropdown-toggle" and the Custom "data-toggle" property, And the value must be the same as the Outer container class name, this example is:

data-toggle="dropdown"

Add class to <button> btn. Btn-default will look better, and also try to declare type= "button". 3. The drop-down menu item uses a ulList, and define a class named " Dropdown-menu, this example is:

<ul class="dropdown-menu">

4. Li uses a to wrap the text   Drop -down menu (principle analysis)

The drop-down menu items in the bootstrap framework are hidden by default, as shown below:

Because the "Dropdown-menu" default style is set to "Display:none" when the user taps the parent menu item, the drop-down menu is displayed as follows:  When the user taps again, the drop-down menu continues to hide as follows:

Principle Analysis:

Now let us analyze the implementation of the principle, very simple, through the JS technology, to the parent container "Div.dropdown" to add or remove the class name "open" to control the drop-down menu to show or hide. That is, by default, "Div.dropdown" does not have the class name "open", and when the user first clicks, "Div.dropdown" adds the class name "open", and when the user taps again, the class name "open" in the "Div.dropdown" container will be removed again.

  Drop -down menu (drop-down split line)The drop-down menu in the bootstrap framework also provides a drop-down divider, assuming that the drop-down menu has two groups, then the group can add a drop-down divider to the group by adding an empty <li&gt, and adding the class name "divider" to the <li>.Note: this. Divider Li because it is empty, so can not need package <a>   Drop -down menu (menu title)In the previous section, you can group the drop-down menu by adding "divider" to make the grouping more visible, and you can add a header (title) to each group.

class= "Dropdown-header"> First part menu head </li>

Note: This Li does not have a parcel <a>, after the experiment found that only hope the mouse on the li above the background changes will be added to the Li <a>   Drop -down menu (alignment)The bootstrap Frame drop-down menu is left-aligned by default if you want the drop-down menu to be relative to the parent container Align RightCan be used on "Dropdown-menu"AddA "pull-right" or "Dropdown-menu-right" class name.Note: This alignment is relative to the parent container.   Drop -down menu (menu item status)The default status of a drop-down menu item is a suspended state (: hover) and Focus State (: Focus), both of which do not have to be deliberately set. The drop-down menu item has the current state (. Active) and disabled state (. Disabled) In addition to the above two states. Both of these state use methods only need to add the corresponding class name on the corresponding menu item.   button (Button group)

For the structural aspect, it is very simple. use a container called "btn-group" to place multiple buttons in this container . As shown below:

class= "Btn-group">  <button type= "button" class= "btn-default" >      Glyphicon-step-backward"></span>  </button> ...  <button type= "button" class= "btn-default" >     <span class= "Glyphicon Glyphicon-step-forward "></span>  </button></div>

The effect of the operation is as follows:

In addition to the use of <button> elements, other label elements, such as <a> tags, can be used. The only thing to ensure is:regardless of the label used, the button element in the ". Btn-group" container needs to have the class name ". Btn". Note: Glyphicon-step-backward and so on represent the corresponding icon.

button (Button toolbar)For more than one button, you want to have a subset of them, another part of which is another group:

You only need to place the button group "Btn-group" in a large container "Btn-toolbar" as follows:

<div class= "Btn-toolbar" >  <div class= "Btn-group" >    ...  </div>  <div class= "Btn-group" >    ...  </div>  <div class= "Btn-group" >    ...  </div>  <div class= "Btn-group" >    ...  </div></div>

The main implementation principle is to let the container's multiple grouping "btn-group" elements float, and the group and the group to maintain a 5px left outer margin.Note: The Div.toolbar wraps the Div.btn-group and then Div.btn-group wraps the button with the same group

Button group Size setting

In the Introduction button section, we know that buttons change the button size by adjusting the values of the padding, font-size, Line-height, and Border-radius properties by using the BTN-LG, BTN-SM, and Btn-xs three class names. So the size of the button group, we can also use a similar method:

? . BTN-GROUP-LG: Large button Group

? . BTN-GROUP-SM: Small button Group

? . BTN-GROUP-XS: Super Small button Group

Just append the class name to the ". Btn-group" class name to get a different size group of buttons.

  button (nested grouping)Many times, we often arrange the drop-down menu with the normal group of buttons to achieve the same effect as the navigation menu.

When using, only need to make the drop-down menu "dropdown" Container for "Btn-group", and with the normal button on the same level. As shown below:

<div class= "Btn-group" ><button class= "Btnbtn-default" type= "button" > Home </button><button class= "Btnbtn-default" type= "button" > Product </button><button class= "Btnbtn-default" type= "button" > Case Analysis </ Button><button class= "Btnbtn-default" type= "button" > Contact us </button><div class= "Btn-group" >   dropdown-toggledata-toggle= "dropdown" type= "button" > About us <span class= "caret" >< /span></button>   <ul class= "dropdown-menu" >         <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>

  button (vertical grouping)As seen earlier, the button groups are displayed horizontally. But in the actual use, always encounter the effect of vertical display. This style is also provided in the bootstrap framework. We just need toReplace the "Btn-group" class name of the horizontal group with "btn-group-vertical"Can. button (equal button)

The effect of the equal button is particularly useful on the mobile side. The entire button group width is 100% of the container, and each button inside the button group is evenly divided across the container width. For example, if you have five buttons in a button group, then each button is 20% width, and if there are four buttons, then each button is 25% width, and so on.

The equal button is often referred to as the Adaptive Grouping button, and its implementation is very simple, just need to append a "btn-group-justified" to the button group "Btn-group" the class name

Special Statement：Use the <a> tag element to make a button when making a group of equal buttons, because using the <button> tag element, using display:table in some browsers is not friendly.

<a class= "btn Btn-default" href= "#" > Home </a>

  the downward-pointing triangle of the buttonThe downward triangle of the button, we are adding an "<span>" tag element to the <button> tag, and named "Caret"  Sometimes our drop-down menu will bounce up (the next section will be introduced), this time our triangular direction needs to be shown up, the implementation method: the ". Btn-group" class must be appended with the "Dropup" class name (which is also to do the pop-up drop-down menu to use the class name). Note: A span.caret is still required for the button   Bounce Up drop-down menuSome menus need to pop up, for example, your menu at the bottom of the page, and this menu has a drop-down menu, in order to let users have a better experience, you have to let the drop-down menu up. A class name "Dropup" is specifically introduced for this effect in the bootstrap framework. Using the method as shown earlier, just add the class name on "Btn-group" (of course, if it is a normal up pop-up drop-down menu, you only need to append "dropdown" to the class name). Dropup"Class name.") navigation (base style)

Navigating the underlying style

The bootstrap framework makes navigation bars primarily through the ". Nav" style. The default ". Nav" style does not provide a default navigation style, and you must attach another style to be effective, such as "Nav-tabs", "Nav-pills", and so on. For example, in the right-hand code Editor There is a tab navigation bar, and his implementation is to add to the UL tag . Nav and Nav-tabs two class styles . Attention is given to the UL label instead of Div

  navigation (capsule-shaped (pill) navigation)  Capsule-shaped (pills) navigation sounds a bit awkward, because it looks a bit like a capsule shape. But it's more like the VW-shaped navigation we usually see. The current item is highlighted with a rounded effect. The implementation method is similar to "Nav-tabs", the same structure, only need to change the class name "Nav-tabs" to " Nav-pillsTo

<ul class= "nav nav-pills" >      <li class= "active" ><a href= "# #" >Home</a> </li>      <li><a href= "# #" >CSS3</a></li>      <li><a href= "# #" >Sass< /a></li>      <li><a href= "# #" >jQuery</a></li>      <li class= "disabled "><a href=" # # >Responsive</a></li></ul>

Note: The contents of Li are to be placed in a. navigation (vertically stacked navigation)

In practical use, in addition to horizontal navigation, there are vertical navigation, similar to the vertical arrangement of buttons described earlier. To create a vertical stack navigation, you only need to add a "nav-stacked" class name on the basis of "Nav-pills" :

nav-stacked">     <li class=" active "><a href=" # # ">Home</a></li>     <li ><a href= "# #" >CSS3</a></li>     <li><a href= "# #" >Sass</a></li>     <li><a href= "# #" >jQuery</a></li>     <li class= "disabled" ><a href= "# #" > Responsive</a></li></ul>

The results are as follows:

Do you remember that in the drop-down menu section, there is a separator line between the drop-down menu group and the group. In fact, the vertical stacking navigation also has this effect, only need to add between navigation items to add "<li class=" Nav-divider "></li>" can   Adaptive Navigation (use)

Adaptive navigation refers to the navigation that occupies the full width of the container, and the menu item can be adapted to the width as the table cell. Adaptive navigation is the same as the group of adaptive buttons previously made using "btn-group-justified". Just replaced another class name "nav-justified" when making adaptive navigation. Of course he needs to work with "nav-tabs" or "Nav-pills ". Such as:

nav-justified">     <li class=" active "><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>

  Adaptive Navigation (Implementation principle)The implementation principle is not difficult, the list (<ul>) set the width to "100%", and then each menu item (<li>) set the "Display:table-cell", so that the list items in the form of a simulated table cell display. Here is a media query condition: "@media (min-width:768px) {...}" Indicates that adaptive navigation only appears in the browser window with a width greater than 768px to be displayed by style. When your browser window is less than 768px wide, it will be displayed in the following style:     Navigation Plus drop-down menu (Level two navigation)It's much easier to make level two navigation in the bootstrap framework. Just use Li as the parent container, using the class name "dropdown", and nesting another list of UL in Li, using the method described in the previous drop-down menu to:

<ul class= "Nav nav-pills" >     <li class= "active" ><a href= "# #" > Home </a></li>     < Li class= "dropdown" >        class= "Dropdown-toggle" data-toggle= "dropdown" > Tutorials <span class= "Caret" ></span></a>        <ul class= "dropdown-menu" >            <li><a href= "# #" >CSS3</a></li> ...       </ul>     </li>     <li><a href= "# #" > About Us </a></li></ul>

Note that the dropdown is added on top of Li, but instead. Dropdown-toggle is no longer added to the button but adds it on top of a, so a is not required. BTN and. Btn-default, plus a must have href= "# # "or the mouse cursor will not change when it is placed.  

You only need to add "<li class=" Nav-divider "></li>" as an empty label in level two navigation with the divider line.

  breadcrumb -style navigationBread crumbs (Breadcrumb) are generally used for navigation,The main function is to tell the user where the page is now (current position)。

How to use:

Use the way is very simple, for OL join Breadcrumb class:

<ol class= "breadcrumb" >  <li><a href= "#" > Home </a></li>  <li> <a href= "#" > My book </a></li>  <li class= "active" > "Diagram CSS3" </li></ol>

Note: Is ol rather than UL   from: http://www.imooc.com/code/2881 finishing  

Bootstrap menu, buttons and navigation