Bootstrap組件介紹

1、下拉菜單

　　用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。

一、實例

　　將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。

　　aria-expanded:表示展開狀態。默認爲undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的

　　aria-labelledby：當想要的標籤文本已在其餘元素中存在時，可使用aria-labelledby，並將其值爲全部讀取的元素的id。以下：

　　當ul獲取到焦點時，屏幕閱讀器是會讀：「選擇您的職位」

　　data-toggle: 表示什麼事件類型發生

2、按鈕式下拉菜單

　　把任意一個按鈕放入 .btn-group 中，而後加入適當的菜單標籤，就可讓按鈕做爲菜單的觸發器了。

 

一、單按鈕下拉菜單

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　鼠標指向時，顯示背景顏色。

二、分裂式下拉菜單

　　只是多一個分開的按鈕。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　能夠看到分紅了左右兩個按鈕。

 

 3、面板

 　　某些時候你可能須要將某些 DOM 內容放到一個盒子裏。對於這種狀況，能夠試試面板組件。

 一、基本實例

　　默認的 .panel 組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

　　顯示效果：

　　

二、帶標題的面板

　　經過 .panel-heading 能夠很簡單地爲面板加入一個標題容器。你也能夠經過添加設置了 .panel-title 類的 <h1>-<h6> 標籤，添加一個預約義樣式的標題。不過，<h1>-<h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。

　　爲了給連接設置合適的顏色，務必將連接放到帶有 .panel-title 類的標題標籤內。