布局組件
下拉按鈕
<div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 幫助<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> <li role="presentation"> <a role="menuitem" href="#"> 關(guān)于我們 </a> </li> </ul> </div>
要構(gòu)建一個(gè)下拉菜單,首先,需要一個(gè)div加class(dropdown)來(lái)包容所有代碼(不然下拉菜單定位找不到),然后在加一個(gè)觸發(fā)下拉菜單的按鈕(或者a標(biāo)簽),再加一個(gè)下拉菜單ul
觸發(fā)者樣式: .dropdown-toggle ; 屬性:data-toggle=”dorpdown”
菜單樣式: .dropdown-menu 屬性:role=”menu” aria-labelledby='id'
其他:role=”presentation”; role=”menuitem”
樣式: .divider 分割線; .dropdown-header:下拉菜單頭部(不可點(diǎn)擊); .dropdown-menu-right:向右對(duì)齊的菜單; .dropup:上拉樣式(給父類容器添加)
按鈕組
<div class="btn-group" role="toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">按鈕 1</button> <button type="button" class="btn btn-default">按鈕 2</button> <button type="button" class="btn btn-default">按鈕 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">按鈕 4</button> <button type="button" class="btn btn-default">按鈕 5</button> <button type="button" class="btn btn-default">按鈕 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">按鈕 7</button> <button type="button" class="btn btn-default">按鈕 8</button> <button type="button" class="btn btn-default">按鈕 9</button> </div></div>
由多個(gè)按鈕組構(gòu)成的一個(gè)toolbar!
每個(gè)按鈕組由一個(gè)div容器加 .btn-group樣式構(gòu)成(同時(shí)可以搭配大小等其他樣式)
每個(gè)按鈕組中由幾個(gè)按鈕組成
利用按鈕組和單獨(dú)的下拉菜單構(gòu)成分割下拉菜單
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默認(rèn) <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一個(gè)功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分離的鏈接</a> </li> </ul></div>
以上所述是小編給大家介紹的BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
