Glyphicons font icon
Base class.glyphicon {position/top/display/font-family/}
Concrete class {content} -- manifested on pseudo-elements
Key points of use: a. Base class + specific class b. Add a space between general icon and text
Note: a. Do not mix with other components, use a single tag, generally use span, eg:<span></span>
b. Tags that have used font icon classes should not nest elements or contain text anymore
Change the location of the font icon source file: default relative to the css position, and in the ../fonts/ directory, if you need to change the location, modify less or compiled css
Pull down the pop-up menu
a. Outsourcing element b. Pull down and flip-up trigger c. Menu list
Outsourcing element class.dropdown/.dropup {position}
Pull down and flip-up trigger data-toggle is used for js hooks, toggle the opening and closing of the outer element open class
Menu list dropdown-menu {position/top/left/z-index/float/padding/margin/border/box-shadow}
eg: div>(button+ul) (default is dropdown) div can add class.dropdown or dropup or add relative styles
<div> <!-- The class of this element can be set to dropdown/dropup/ or set to style separately to position: relative; --> <!-- Outsourcing element--><button data-toggle="dropdown"> <!-- Popup trigger-->Dropdown<span></span></button><ul> <!-- Popup menu--><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div>
Pull down pop-up menu - Align
Default left alignment
Left Alignment.dropdown-menu-left {right/left}
Right-aligned.dropdown-menu-right {right/left}
Elements caused by other elements overflow are blocked and need to be solved by themselves.
<ul>...</ul>
Pull down pop-up menu - Menu title
Title.drop-header {font-size/color}
<ul>...<li>Dropdown header</li>...</ul>
Pull down to pop-up menu-dividing line
Divider {height/margin/background-color} --role="separator"
<ul>...<li role="separator" ></li>...</ul>
Pull-down pop-up menu - Disable menu
Disabled {color}
<ul>...<li><a href="#">disabled link</a></li>...</ul>
The above content is the relevant knowledge of the bootstrap component introduced to you by the editor. I hope it will be helpful to you!