快捷導(dǎo)航

BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)

更新時(shí)間：2017年01月03日 14:24:04 作者：Guddqs

這篇文章主要介紹了BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)的相關(guān)資料,需要的朋友可以參考下

布局組件

下拉按鈕

<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 分割線(xiàn); .dropdown-header:下拉菜單頭部(不可點(diǎn)擊); .dropdown-menu-right:向右對(duì)齊的菜單; .dropup:上拉樣式(給父類(lèi)容器添加)

按鈕組

<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)站的支持！

您可能感興趣的文章: