欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap組件(一)之菜單

 更新時(shí)間：2016年05月11日 16:32:58   作者：盛夏、光年  
本文主要給大家介紹bootstrap組件的知識(shí)，涉及到bootstrap, 組件, 字體圖標(biāo), 上拉菜單的相關(guān)知識(shí)，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

Glyphicons字體圖標(biāo)

基類.glyphicon {position/top/display/font-family/}

具體類 {content} --表現(xiàn)在偽元素上

使用要點(diǎn)：a.基類＋具體類 b.一般圖標(biāo)和文本之間添加一個(gè)空格

注意點(diǎn)：a.不要和其他組件混用，單獨(dú)使用一個(gè)標(biāo)簽，一般使用span，e.g.:<span class="glyphicon glyphicon-search"></span>

b.已使用字體圖標(biāo)類的標(biāo)簽不要再嵌套元素或包含文本

字體圖標(biāo)源文件位置更改：默認(rèn)相對(duì)于css位置，再../fonts/目錄內(nèi)，如需更改位置，則修改less或者已編譯的css

下拉上彈菜單

a.外包元素 b.下拉上彈觸發(fā)器 c.菜單列表

外包元素類.dropdown/.dropup {position}

下拉上彈觸發(fā)器data-toggle 用于js鉤子，切換外層元素open類的開啟和關(guān)閉

菜單列表dropdown-menu {position/top/left/z-index/float/padding/margin/border/box-shadow}

e.g.: div>(button+ul) (默認(rèn)為下拉) div可以添加類.dropdown或dropup或添加relative樣式

<div class="dropdown"> <!-- 此元素的class可設(shè)置為dropdown/dropup/ 或單獨(dú)設(shè)置樣式為position: relative; --> <!-- 外包元素 -->
<button class="btn btn-default" data-toggle="dropdown"> <!-- 彈出觸發(fā)器 -->
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-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>

下拉上彈菜單-對(duì)齊

默認(rèn)左對(duì)齊

左對(duì)齊.dropdown-menu-left {right/left}

右對(duì)齊.dropdown-menu-right {right/left}

由其它元素overflow引起的元素被遮擋需要自行解決

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

下拉上彈菜單-菜單標(biāo)題

標(biāo)題.drop-header {font-size/color}

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

 下拉上彈菜單-分割線

分割線.divider {height/margin/background-color} --role="separator"

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

下拉上彈菜單-禁用菜單

禁用.disabled {color}

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

以上內(nèi)容是小編給大家介紹的bootstrap 組件的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

相關(guān)文章

最新評(píng)論