Bootstrap Framework Learning notes four (buttons, navigation, navigation bar)

menus, buttons, and navigation Drop down menu

Invoke a compressed "bootstrap.min.js" file before use.
Because the 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.
A simple example:

<div class= "dropdown" > <button class= "btn btn-default dropdown-toggle" Type= "
    Button "id=" Dropdownmenufood "data-toggle=" dropdown "> Choose your favorite fruit <span class=" caret "></span> </button> <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Dropdownmenufood" > <li role= "P Resentaiton "><a role=" MenuItem "tabindex="-1 "href=" # "> Apple </a></li> <li role=" Presentaiton " ><a role= "MenuItem" tabindex= "-1" href= "#" > Banana </a></li> <li role= "Presentaiton" ><a ro  Le= "MenuItem" tabindex= "-1" href= "#" > Pear </a></li> <li role= "Presentaiton" ><a role= "MenuItem" tabindex= "-1" href= "#" > Peach </a></li> </ul> </div> 

1. Customize the "Data-toggle" property and the value must be the same as the most outer container class name: data-toggle= "Dropdown"
2. Assign the TabIndex to-1, and the element is ignored when you use the [Tab] key.
3. Use the role attribute to tell a helper device (such as a screen reader) that this element plays a part in Wai-aria. For example, click on the button, is role= "button"
4.aria-label Properties:
Normally, a corresponding label is assigned to the input component in the form, and when the user tabs to the input box, the read-screen software reads the text from the corresponding label.
such as: <label for= "username" > Username: </label><input type= "text" id= "username"/>
The Aria-label property specifies a built-in text label for the component when the position of the corresponding label text is not given to the input box. It is not visually rendered.
such as: <input type= "text" aria-label= "User name"/>
At this point, when the focus falls on the input box, the read-screen software will read out the contents of the Aria-label, that is, "user name."
Aria-labelledby Properties:
When the desired label text already exists in another element, you can value it as the ID of the element

How to use:
1. Use a container named "dropdown" to wrap the entire Drop-down menu element, as in the example:

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

2. Use a 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 most outer container class name:

Data-toggle= "Dropdown"

3. The Drop-down menu item uses an UL list and defines a class named "Dropdown-menu", this example is:

<ul class= "Dropdown-menu" >

The effect is as follows:

Implementation Principle
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", and when the user first clicks, "Div.dropdown" adds the class name "Open" and the class name "open" in the "Div.dropdown" container when the user clicks again. will be removed again.

Drop down Split line

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

Implementation principle:

. dropdown-menu. Divider {
  height:1px;
  MARGIN:9PX 0;
  Overflow:hidden;
  Background-color: #e5e5e5;
}

Menu Title

<li role= "Presentation" class= "Dropdown-header" > The first part menu head </li>

Each part of the head
Example:

<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 "> Part One 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 item </a></li > <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu Items </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= "#" > 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> </ul> </div>

Effect:

Alignment Method
When the Drop-down menu is right-aligned relative to the parent container, you can add a "pull-right" or "Dropdown-menu-right" class name on "Dropdown-menu".
Class name "Dropdown-menu-left" opposite to "dropdown-menu-right", the effect is to have the Drop-down menu align to the left of the parent container

How to use:

<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-step-forward" ></ span>
  </button>
</div>

No matter what label you use, the label element in the ". Btn-group" container needs to have the class name ". Btn".
The effect is as follows:

The four corners of a button group are rounded corners.

<div class= "Btn-group" >
      <button type= "button" class= "btn btn-default" ><span class= "Glyphicon Glyphicon-search "></span></button>
      <button type=" button "class=" Btn Btn-default ">< Span class= "Glyphicon glyphicon-zoom-in" ></span></button>
      <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-zoom-out "></span></button>
      <button type = "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-download" ></span></button>
      <button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-upload" ></span ></button>     
</div>

The principle of its implementation is also very simple.
1, the default all buttons have rounded corners

2, except the first button and the last button (except the Drop-down button), all the other buttons to remove the fillet effect

3, the first button to leave the upper left corner and the lower left corner is rounded corner

4, the last button left only the upper right corner and the lower right corner is rounded corner

Button Toolbar
If you want to group the buttons together, simply place the group of buttons "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 operation effect is as follows:

button group Size setting
☑.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. As shown below:

<div class= "Btn-toolbar" >
  <div class= "Btn-group btn-group-lg" >
    ...
  </div>
  <div class= "Btn-group" >
    ...
  </div>
  <div class= "Btn-group btn-group-sm" >
    ...
  </div>
  <div class= "Btn-group btn-group-xs" >
   ...
  </div>
</div>

nested groupings
To implement similar to the following picture like this;

You only need to replace the "dropdown" container that originally made the Pull-down menu with "Btn-group", and put it at the same level as the normal button. As shown below:

<div class= "Btn-group" >
<button class= "Btnbtn-default" type= "button" > Home </button>
< Button class= "Btnbtn-default" type= "button" > Product show </button>
<button class= "Btnbtn-default" type= " Button "> Case Analysis </button>
<button class=" Btnbtn-default "type=" button "> contact us </button>
<div class= "Btn-group" >
   <button class= "Btnbtn-default dropdown-toggle" data-toggle= "dropdown" 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>

Vertical Grouping
You only need to change the "Btn-group" class name of the horizontal grouping to "btn-group-vertical". As shown below:

<div class= "btn-group-vertical" > <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" > <button class= "btnbtn-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= "##&quo