1. 程式人生 > 實用技巧 >bootstrap 使用(三)

bootstrap 使用(三)

元件

1、Glyphicons
使用

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

圖示類不能和其它元件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該建立一個巢狀的 標籤,並將圖示類應用到這個 標籤上。
圖示類只能應用在不包含任何文字內容或子元素的元素上。
2、下拉選單
將下拉選單觸發器和下拉選單都包裹在 .dropdown 裡,或者另一個聲明瞭 position: relative; 的元素

<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>

(1)彈出方式
div.dropdown向下彈出
div.dropup向上彈出
3、按鈕組
4、按鈕式下拉選單
5、輸入框組
6、導航
7、導航條
8、路徑導航
9、分頁
10、標籤
11、徽章

媒體物件:預設樣式的媒體物件元件允許在一個內容塊的左邊或右邊展示一個多媒體內容(影象、視訊、音訊)。