Glyphicons字體圖標
基類.glyphicon {position/top/display/font-family/}
具體類{content} --表現在偽元素上
使用要點：a.基類＋具體類b.一般圖標和文本之間添加一個空格
注意點：a.不要和其他組件混用，單獨使用一個標籤，一般使用span，eg:<span></span>
b.已使用字體圖標類的標籤不要再嵌套元素或包含文本
字體圖標源文件位置更改：默認相對於css位置，再../fonts/目錄內，如需更改位置，則修改less或者已編譯的css
下拉上彈菜單
a.外包元素b.下拉上彈觸發器c.菜單列表
外包元素類.dropdown/.dropup {position}
下拉上彈觸發器data-toggle 用於js鉤子，切換外層元素open類的開啟和關閉
菜單列表dropdown-menu {position/top/left/z-index/float/padding/margin/border/box-shadow}
eg: div>(button+ul) (默認為下拉) div可以添加類.dropdown或dropup或添加relative樣式
<div> <!-- 此元素的class可設置為dropdown/dropup/ 或單獨設置樣式為position: relative; --> <!-- 外包元素--><button data-toggle="dropdown"> <!-- 彈出觸發器-->Dropdown<span></span></button><ul> <!-- 彈出菜單--><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>
下拉上彈菜單-對齊
默認左對齊
左對齊.dropdown-menu-left {right/left}
右對齊.dropdown-menu-right {right/left}
由其它元素overflow引起的元素被遮擋需要自行解決
<ul>...</ul>
下拉上彈菜單-菜單標題
標題.drop-header {font-size/color}
<ul>...<li>Dropdown header</li>...</ul>
下拉上彈菜單-分割線
分割線.divider {height/margin/background-color} --role="separator"
<ul>...<li role="separator" ></li>...</ul>
下拉上彈菜單-禁用菜單
禁用.disabled {color}
<ul>...<li><a href="#">disabled link</a></li>...</ul>
以上內容是小編給大家介紹的bootstrap 組件的相關知識，希望對大家有所幫助！