Bootstrap menu buttons and navigation examples _javascript tips

Drop down Menu

Special statement: Because Bootstrap component interaction effect is dependent on the jquery library to write Plug-ins, so before using bootstrap.min.js must be loaded before the effect of jquery.min.js.

 <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" 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=" # "> Dropdown menu item </a></li> </ul> </div> <!--jquery must be imported before bootstrap, The latter is achieved on the basis of the former--> <script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> <script Src= "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></SCRIPT> 

Effect Chart:

Implementation principle:

At the beginning, there is a display:none in class; look at the CSS below

. dropdown-menu {
position:absolute;/* sets absolute positioning, relative to the parent element div.dropdown*/
top:100%;/* Let the Drop-down 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;/* Let the Pull-down menu item not be covered by other elements * *
display:none;/* default hidden drop-down menus
/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,.);
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, which is used to display and hide
Through the JS technical means, to the parent container "Div.dropdown" Add or Remove class name "open" to control the Drop-down menu to show or hide. In other words, by default,

"Div.dropdown" does not have the class name "open", when the user first clicks, "Div.dropdown" will add the class name "open", and when the user clicks again, the class name "open" in the "Div.dropdown" container will be removed. We can view the entire process through the browser's Firebug:

Default condition:

The first time users click:

User clicks again:

Open CSS

. Open > Dropdown-menu {
display:block
}

Drop down menu Split line

Or the above example, and then put the code! Look at the effect, or to introduce JS file! It's not much back there!

<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" 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" class= "divider" ></li>
<li role= "Presentation" >
<a role= " MenuItem "tabindex="-1 "href=" # "> Dropdown menu item </a>
</li>
</ul>
</div>

Effect Chart:

Actually, that's a line of code.

<li role= "Presentation" class= "divider" ></li>

Drop-down Menu Menu Title

Directly on the code

<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" Role= "Menu" aria-labelledby= "dropdownMenu1" > <li role= "Presentation" class= "Dropdown-header" > First part Menu head <
/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> <li role = "Presentation" > <a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu item </a> </li> <li role= " Presentation "class=" divider "></li> <li role=" presentation "class=" Dropdown-header "> Part two menu head </li > <li role= "Presentation" > <a role= "MenuItem" tabindex= "-1" href= "#" > Pull-down 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= "#" > Dropdown menu item </a> </li> </ul> </div>

Effect Chart:

In fact, it adds a code:

<li role= "Presentation" class= "Dropdown-header" > Part II menu head </li>

Drop-down Menu Alignment

Drop 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 items </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= "#" > Dropdown menu item </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>
<br/>
<br/>
 
 

Drop down Menu

<span class= "Caret" ></span>
</button>
<ul class= "Dropdown-menu dropdown-menu-right" 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" class= " Divider "></li>
<li role=" Presentation ">
<a role=" MenuItem "tabindex="-1 "href=" # "> Drop-down menu Items </a>
</li>
</ul>
</div>
<br/>
<br/>
 
 

Drop down Menu

<span class= "Caret" ></span>
</button>
<ul class= "Dropdown-menu dropdown-menu-left" 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" class= " Divider "></li>
<li role=" Presentation ">
<a role=" MenuItem "tabindex="-1 "href=" # "> Drop-down menu Items </a>
</li>
</ul>
</div>

In fact, add a "pull-right" or "Dropdown-menu-right" class name on "Dropdown-menu," where the CSS style code

. dropdown-menu.pull-right {
right:0;
Left:auto
}
. dropdown-menu-right {
right:0;
Left:auto;
}

Drop-down Menu (menu item status)

The default state (without setting) of the Drop-down menu item has a suspended state (: hover) and focus state (: Focusing)

The Drop-down menu item has the current state (. Active) and the disabled state (. Disabled), in addition to the above two states.

<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" role= "menu" aria-labelledby= "dropdownMenu1" > <li role= "Presentation" class= "
active "><a role=" MenuItem "tabindex="-1 "href=" # "> Drop-down menu item </a></li>
<li role=" Presentation " class= "Disabled" ><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 "class=" divider "></li> <li role=" presentation "class=" disabled "><a role="
MenuItem "tabindex="-1 "href=" # "> Dropdown menu item </a></li>
</ul>

Mouse to put up, in the disabled above will show a prohibited sign, screenshots can not be intercepted!

button (Button group)

The use of a single button in a Web page sometimes does not meet our business needs, often see the combination of multiple buttons, such as the Rich Text editor in a group of small icon buttons, etc.

<div class= "Btn-group" > <button type= "button" class= "btn btn-default" ><span class= "Glyphicon Glyphicon-step-backward "></span></button> <button type=" button "class=" Btn Btn-default ">< Span class= "Glyphicon glyphicon-fast-backward" ></span></button> <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-backward "></span></button> <button type=" Button "class=" btn btn-default "><span class=" Glyphicon glyphicon-play "></span></button> < Button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-pause" ></span></ button> <button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-stop" ></ span></button> <button type= "button" class= "btn btn-default" ><span class= "Glyphicon" Glyphicon-forward "></span></button> <button type=" button "class=" Btn Btn-default "><span class= "Glyphicon glyphicon-fast-forward" ></span></button> <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-step-forward "></span></button> </div>

Effect Chart:

Here you can generate different icon buttons based on different icons! can be viewed on this site: http://getbootstrap.com/components/#glyphicons

button (Button toolbar)

In a rich text editor, group groups of button groups, such as copying, cutting, and pasting a set of left, middle, right, and justified groups, as shown in the following illustration:

The Bootstrap Frame button toolbar also provides a way to make the button group "Btn-group" in a large container "Btn-toolbar" as follows:

<div class= "Btn-toolbar" > <div class= "Btn-group" > <button type= "button" class= "Btn Btn-default" > <span class= "Glyphicon glyphicon-align-left" ></span></button> <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-align-center "></span></button> <button type= "Button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-align-right" ></span></button > <button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-align-justify" ></ span></button> </div> <div class= "Btn-group" > <button type= "button" class= "Btn Btn-default" ><span class= "Glyphicon glyphicon-indent-left" ></span></button> <button type= "button" class = "Btn Btn-default" ><span class= "Glyphicon glyphicon-indent-right" ></span></button> </div > <div class= "Btn-group" > <button type= "button" class= "Btn Btn-default" ><span class= "Glyphicon glyphicon-font" ></span></button> <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-bold "" button "></span></button> <button type=" class= "Btn btn-default" ><span class= "Glyphicon glyphicon-italic" ></span></button> </div > <div class= "Btn-group" > <button type= "button" class= "btn btn-default" ><span class= "Glyphicon Glyphicon-text-height "></span></button> <button type=" button "class=" Btn Btn-default ">< Span class= "Glyphicon glyphicon-text-width" ></span></button> </div> </div>

Effect Chart:

The second picture of the icon is added with a class:

BTN-GROUP-LG: Large button Group

BTN-GROUP-SM: Small button Group

BTN-GROUP-XS: Super Small button Group

You can get a group of buttons of different sizes simply by appending the corresponding class name to the ". Btn-group" class name.
Buttons (nested groupings)

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 you use it, simply replace the "dropdown" container of the original Pull-down menu with "Btn-group" and put it on the same level as the regular button.

<div class= "Btn-group" >
<button type= "button" class= "Btn Btn-default" > Home </button>
< Button type= "button" class= "btn Btn-default" > Product show </button>
<button type= "button" class= "BTN" Btn-default "> Case Analysis </button>
<button type=" button "class=" btn Btn-default "> Contact Us </button>
<div class= "Btn-group" > <button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown"
Type= "button" > About us <span class= "caret" ></span></button>
<ul class= "Dropdown-menu" Dropdown-menu-left ">
<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>

Effect Chart:

Buttons (vertical grouping)

For the example shown earlier, the button groups are displayed horizontally. But in the actual application, always encounter the effect of vertical display. This style is also provided in the bootstrap framework. All we need to do is to change the "Btn-group" class name of the horizontal group into "btn-group-vertical"

<div class= "btn-group-vertical" >
<button class= "btn btn-default" type= "button" > Home </button>
<button class= "btn btn-default" type= "button" > Product show </button>
<button class= "Btn Btn-default" Type= "button" > Case Analysis </button>
<button class= "btn btn-default" type= "button" > Contact us </button>
<div class= "Btn-group" > <button class= "btn btn-default dropdown-toggle" data-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>

Effect Chart:

button (divide-and-divide button)

The effect of the divide button is particularly practical on the mobile end. The entire button group width is 100% of the container, and each button inside the button group splits the width of the entire container. For example, if you have five buttons in the button group, each button is 20% width, and if there are four buttons, then each button is 25% width, and so on.

The divide-and-drop button is also often called the Adaptive Group button, and its implementation is very simple, just append a "btn-group-justified" class name to the button group "Btn-group", as follows:

<div class= "Btn-wrap" >
<div class= "Btn-group btn-group-justified" >
<a class= "Btn Btn-default "Href=" # "> Home </a>
<a class=" btn Btn-default "href=" # "> Products </a>
<a class=" btn Btn-default "href=" > Case Analysis </a>
<a class= "btn Btn-default" href= "#" > Contact us </a>
</div >
</div>

Change the width of the screen

Special statement: When making a button group, try to use the <a> tag elements to make the button, because using the <button> tag elements, using display:table in the partial browser support is not friendly.

The downward triangle of the button

The downward triangle of the button, we add a "" tab element to the label and name "caret":
Sometimes our Pull-down menu bounces up (the next section describes), this time our triangular direction needs to show up, implementation method: You need to append the "Dropup" class name on the ". Btn-group" Class (This is also the name of the class to use to bounce up the Drop-down menu).

<div class= "Btn-group dropup" > <button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown"
Type= button > Drop-down menu <span class= "Caret" ></span></button>
<ul class= "Dropdown-menu" >
<li><a href= "# #" > button pull-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>
<li><a href= "# #" > Button drop-down Menu items </a></li>
</ul>
</div>

Effect Chart:

Navigation (base style)

Navigation is no stranger to a front-end person. It can be said that navigation is one of the important elements of a Web site, you can easily find the site to provide the various functional services. Navigation is also a variety of ways to make a variety of.

The bootstrap frame is made of navigation bar mainly through the ". Nav" style. The default ". Nav" style does not provide a default navigation style and must be attached to another style to be effective, such as "Nav-tabs", "Nav-pills", and so on. For example, the right code Editor has a tab navigation bar example, his implementation is for the UL tag to join. Nav and Nav-tabs two class styles.

<ul class= "Nav nav-tabs" >
<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 (Tab tab navigation)

Label-shaped navigation, also known as tabbed navigation. Especially when many pieces of content are displayed, using this tab to group is ideal.
Tabbed navigation is done through the "nav-tabs" style. You need to append this class name to the original navigation "NAV" when making a label navigation

<ul class= "Nav nav-tabs" >
<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 previous example and we usually see the effect of the tab is not consistent. In general, the TAB church has a currently selected item. In fact, the bootstrap framework is also provided accordingly. Let's say we want the "home" item to be the current item, just add the class name "class=" active "to its label."

<ul class= "Nav nav-tabs" >
<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>

Effect Chart:

In addition to the current item, some tabs also have a disabled state, to achieve this effect, just add "class=" disabled on the label item:

<ul class= "Nav nav-tabs" >
<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>

Effect Chart:

Navigation (capsule-shaped (pills) navigation)

Capsule-shaped (pills) navigation sounds a bit awkward because it looks a bit like a capsule shape. But it's more like the popular type of navigation we see. The current item is highlighted with rounded corners. Its realization method and "Nav-tabs" similar, the same structure, only need to replace the class name "Nav-tabs" with "Nav-pills" can:

<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>

Effect Chart:

It's the same as what it says!

Navigation (vertical stacked navigation)

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

<ul class= "nav 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>

Effect Chart:

In the Drop-down menu section, there is a separator line between the Drop-down menu group and the group. In fact, vertical stacked navigation has the same effect, just add the "

To

<ul class= "nav 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= "Nav-divider" ></ li>
<li class= "disabled" ><a href= "# #" >Responsive</a></li>
</ul>

Effect Chart:

Adaptive navigation (use)

Adaptive navigation means that the navigation occupies the entire width of the container, and the menu item can be as adaptive as the width of a table cell. Adaptive navigation is the same as the Adaptive button group that was previously made using "btn-group-justified". Only another class name, "Nav-justified", was replaced while making adaptive navigation. Of course he needs to work 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= "# #" >CSS3</a></li>
<li><a href= "# #" >Sass</a> </li>
<li><a href= "# #" >jQuery</a></li>
<li><a href= "# #" > Responsive</a></li>
</ul>

Effect Chart:

This is a different screen.

Navigation plus pull-down menu (level two navigation)

The previous introduction is to use the bootstrap framework to create a level of navigation, but many times, in the Web page is inseparable from the two-level navigation effect. It's much easier to make two-level navigation in the bootstrap frame. Just use the Li as a parent container, using the class name "dropdown" and nesting another list of UL in Li, using the previous Drop-down menu method to:

<ul class= "Nav nav-pills" >
<li class= "active" ><a href= "# #" > Home </a></li>
< Li class= "dropdown" >
<a href= "# #" class= "Dropdown-toggle" data-toggle= "dropdown" > Tutorials <span class= " Caret "></span></a>
<ul class=" Dropdown-menu ">
<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>
</li>
<li><a href= "# #" > About us </a></li>
</ul>

Effect Chart:

Through the browser debugging tools, it is not difficult to find, click on the two-level navigation menu items, will automatically add the "open" class name, click again will delete the added "open" class name and that Drop-down menu implementation principle is the same!
Then use the split line in level two navigation, just add "<li class=" Nav-divider "></li>" such an empty tag.

Breadcrumbs-type navigation

Breadcrumbs (BREADCRUMB) are generally used for navigation, primarily to tell the user where the page is now (current position)

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

Effect Chart: