伴随着Bootstrap全局CSS樣式的結束，我們迎來的Bootstrap當中的元件，接下來的這幾天讓我們 一起來學習元件吧！！！！！!！！！
圖示元件
1、注意：必須把官方的fonts檔案夾引用到項目中【fonts檔案夾在Bootstrap庫裡】
2、使用圖示：
01、使用
<i>
實作圖示元件 —
<i class="glyphicon glyphicon-heart"></i>
02、使用
<span>
實作圖示元件—
<span class="glyphicon glyphicon-heart"></span>
3、結合按鈕使用圖示：
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-heart"></span>
</button>
下拉菜單元件
1、基本下拉菜單元件格式：
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
</ul>
</div>
2、注意事項：
01、按鈕和菜單需要包裹在.dropdown容器中
02、作為被點選的元素按鈕需要設定data-toggle="dropdown"才能有效
03、被點選的元素按鈕設定class="caret"表示箭頭
04、對于菜單部分，需要設定class="dropdown-menu"才能自動隐藏并添加強定樣式
3、下拉菜單向上觸發：class=“dropup”
<div class="dropup">
<button class="btn btn-default" data-toggle="dropdown">
檔案
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>建立</a></li>
<li><a>打開</a></li>
<li><a>儲存</a></li>
<li><a>删除</a></li>
</ul>
</div>
4、設定菜單的标題：不要加超連結
<li class="dropdown-header">
菜單标題名稱
5、設定菜單的分割線：
<li class="divider"></li>
6、設定菜單的禁用項:
<li class="disabled"><a>....</a></li>
<div class="dropup">
<button class="btn btn-default" data-toggle="dropdown">
檔案
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">File</li>
<li><a>打開</a></li>
<li class="divider"></li>
<li><a>儲存</a></li>
<li class="disabled"><a>删除</a></li>
</ul>
</div>
7、設定菜單預設顯示（打開）:
<div class="dropdown open"></div>
<div class="dropup open">
<button class="btn btn-default" data-toggle="dropdown">
檔案
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">File</li>
<li><a>打開</a></li>
<li class="divider"></li>
<li><a>儲存</a></li>
<li class="disabled"><a>删除</a></li>
</ul>
</div>
按鈕組元件
1、概念：按鈕組就是多個按鈕內建在一個容器裡形成獨有的效果
2、基本按鈕組：
<div class="btn-group">
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</div>
3、多個按鈕組整合【效果不明顯】：
<div class="btn-toolbar">
<div class="btn-group"><button>按鈕1</button></div>
<div class="btn-group"><button>按鈕1</button></div>
</div>
4、設定按鈕組大小：
<div class="btn-group btn-group-lg">
<div class="btn-group 預設">
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">
5、 按鈕組中嵌套下拉菜單：
<div class="btn-group">
<button class="btn btn-default">按鈕1</button>
<button class="btn btn-default">按鈕2</button>
<div class="btn-group">
<button class="btn btn-default"data-toggle="dropdown">
File
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>建立</a></li>
<li><a>儲存</a></li>
<li><a>打開</a></li>
<li><a>删除</a></li>
</ul>
</div>
<button class="btn btn-default">按鈕4</button>
</div>
6、設定按鈕組垂直排列：
<div class="btn-group-vertical">
<button class="btn btn-default">按鈕1</button>
<button class="btn btn-default">按鈕2</button>
<button class="btn btn-default">按鈕3</button>
<button class="btn btn-default">按鈕4</button>
</div>
7、設定兩端對齊按鈕組：
01、使用
<a>
【推薦使用】：
<div class="btn-group btn-group-justified">
<a class="btn btn-default">按鈕1</a>
<a class="btn btn-default">按鈕2</a>
<a class="btn btn-default">按鈕3</a>
<a class="btn btn-default">按鈕4</a>
</div>
02、使用
<button>:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">按鈕1</button>
</div>
<div class="btn-group">
<button class="btn btn-default">按鈕2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">按鈕3</button>
</div>
<div class="btn-group">
<button class="btn btn-default" >按鈕4</button>
</div>
</div>
按鈕式下拉菜單
1、單按鈕下拉菜單：
<div class="btn-group">
<button class="btn btn-default" data-toggle="dropdown">
File
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>建立</a></li>
<li><a>打開</a></li>
<li><a>儲存</a></li>
<li><a>删除</a></li>
</ul>
</div>
2、分列式按鈕下拉菜單：
<div class="btn-group">
<button class="btn btn-default">檔案</button>
<button class="btn btn-default"data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>打開</a></li>
<li><a>儲存</a></li>
<li><a>建立</a></li>
<li><a>删除</a></li>
</ul>
</div>
3、向上彈出：
<div class="btn-group dropup">
<button class="btn btn-default">檔案</button>
<button class="btn btn-default"data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>打開</a></li>
<li><a>儲存</a></li>
<li><a>建立</a></li>
<li><a>删除</a></li>
</ul>
</div>
![web OS —— goowy.com[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)