Bootstrap style and drop-down menu

Bootstrap style and drop-down menu

Background Color bg-primary
Font color text-primary

Text center text-center

Button btn-primary btn-default btn-link
The default button size is md btn-lg/sm/xs.
Input box size: input-lg/sm/xs
Status active/disabled
Box alert-primary

 

Panel

Panel framework panel-primary
Panel title panel-heading
Panel Subject panel-body
Panel step panel-footer

<Div class = "panel-primary center"> <div class = "panel-heading"> 

Form
Form-group
Form-control: Alignment label with form line feed
Input button

The btn-group button group changes multiple buttons into one whole.

Btn-group-justified adaptive Size Based on the width of the parent container endpoint alignment (applies to a) if it is input/button, each element must be added with a class btn-group parent Element
Btn-group-vertical change the horizontal button group to vertical
Size btn-group-lg/sm/xs
 
Drop-down menu
Attribute
Data-triggers for interaction with js data-toggle = "dropdown" Switch
Aria-role-applications for special groups
The aria-haspopup screen reader reads this and prompts whether the following menu is displayed.
Whether the aria-expanded status is expanded
Role description current status
<! -- Drop-down menu arrow icon caret (down by default) not applicable to input --> <a class = "btn-primary"> a button <span class = "caret"> </span> </a> <! -- Add the up arrow to the parent class with dropup --> <! -- Add the dropdown arrow to the parent level --> <div class = "group dropup"> <button> button <span class = "caret"> </span> </button> </div>
Add the class name dropdown-menu-right to the list class in the drop-down menu to make it float right -->
Btn-block and parent class Same Width
Dropdown-header is equivalent to adding a split line to label divider
<! -- Add "open" to the parent class to display the drop-down list --> <! -- Class = "dropdown" must show the menu list down to make the menu list display up --> <div class = "dropdown"> <! -- Data-target = ". dropdown "controls one or more actions at the same time --> <button class =" btn-default dropdown-toggle "type =" button "id =" dropdownMenu1 "data-toggle =" dropdown "> <! -- Data-toggle = "dropdown" required --> Dropdown <span class = "caret"> </span> </button> <! -- Add the class name dropdown-menu-right to the drop-down list class to make it float right --> <! -- Btn-block same width as parent --> <! -- Dropdown-header is equivalent to label divider plus split line --> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Action </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Another action </a> </li> <li role = "presentation"> <a role = "menuitem "tabindex ="-1 "href =" # "> Something else here </a> </li> <! -- Text-center text center --> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#" class = "text- center "> Separated link </a> </li> </ul> </div>