Bootstrap component (1) menu, bootstrap component menu

Bootstrap component (1) menu, bootstrap component menu

Glyphicons font icon

Base class. glyphicon {position/top/display/font-family /}

Specific Class {content} -- represented on pseudo elements

Usage tips: a. base class + specific class B. Add a space between the icon and text

Note: a. Do not use one label with other components. Generally, use span, e.g.: <span class = "glyphicon-search"> </span>

B. Labels of the font icon class should not be nested with elements or contain text

Font icon source file location change: the default position relative to css, and then in the ../fonts/directory, if you want to change the location, modify less or compiled css

Drop-down and pop-up menu

A. Outsourcing Element B. Pull down the trigger c. Menu list

Outsourcing element class. dropdown/. dropup {position}

The trigger data-toggle is used for js hooks to switch the opening and closing of the open Class of the outer element.

Menu list dropdown-menu {position/top/left/z-index/float/padding/margin/border/box-shadow}

E.g.: div> (button + ul) (drop-down by default) You can add a class. dropdown or dropup or relative style to the div.

<Div class = "dropdown"> <! -- The class of this element can be set to dropdown/dropup/or separately set the style to position: relative; --> <! -- Outsourcing element --> <button class = "btn-default" data-toggle = "dropdown"> <! -- Trigger --> Dropdown <span class = "caret"> </span> </button> <ul class = "dropdown-menu"> <! -- Menu --> <li> <a href = "#"> Action </a> </li> <a href = "#"> Another action </ a> </li> <a href = "#"> Something else here </a> </li> <a href = "#"> Separated link </a> </li> </ul> </div>

Drop-down and pop-up menu-Alignment

Left alignment by default

Left alignment. dropdown-menu-left {right/left}

Right-aligned. dropdown-menu-right {right/left}

The elements caused by overflow of other elements need to be blocked.

<ul class="dropdown-menu dropdown-menu-right">...</ul> 

Drop-down menu-menu title

Title. drop-header {font-size/color}

<ul class="dropdown-menu">...<li class="dropdown-header">Dropdown header</li>...</ul>

Drop-down menu-split line

Split line. divider {height/margin/background-color} -- role = "separator"

<ul>...<li role="separator" class="divider" ></li>...</ul> 

Drop-down and pop-up menu-Disable menu

Disable. disabled {color}

<ul>...<li><a href="#">disabled link</a></li>...</ul>

The above content is the relevant knowledge of the bootstrap component introduced by the small Editor, and I hope to help you!