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

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

 更新時間：2017年01月03日 14:24:04   作者：Guddqs  
這篇文章主要介紹了BootStrap學習系列之布局組件(下拉,按鈕組[toolbar],上拉)的相關資料,需要的朋友可以參考下

布局組件

下拉按鈕     

<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="#"> 關于我們 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 關于我們 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 關于我們 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 關于我們 </a>
        </li>
      </ul>
    </div>

要構建一個下拉菜單,首先,需要一個div加class(dropdown)來包容所有代碼(不然下拉菜單定位找不到),然后在加一個觸發(fā)下拉菜單的按鈕(或者a標簽),再加一個下拉菜單ul

觸發(fā)者樣式: .dropdown-toggle ; 屬性:data-toggle=”dorpdown”

菜單樣式: .dropdown-menu 屬性:role=”menu” aria-labelledby='id'

其他:role=”presentation”; role=”menuitem”

樣式: .divider 分割線; .dropdown-header:下拉菜單頭部(不可點擊); .dropdown-menu-right:向右對齊的菜單; .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>

由多個按鈕組構成的一個toolbar!

每個按鈕組由一個div容器加 .btn-group樣式構成(同時可以搭配大小等其他樣式)

每個按鈕組中由幾個按鈕組成

利用按鈕組和單獨的下拉菜單構成分割下拉菜單

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默認
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">功能</a>
    </li>
    <li>
      <a href="#">另一個功能</a>
    </li>
    <li>
      <a href="#">其他</a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="#">分離的鏈接</a>
    </li>
  </ul>
</div>

以上所述是小編給大家介紹的BootStrap學習系列之布局組件(下拉,按鈕組[toolbar],上拉)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

最新評論