Bootstrap，來自Twitter，是目前最受歡迎的前端框架。 Bootstrap 是基於HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得Web 開發更加快捷。
學習要點：
1.小圖標組件
2.下拉菜單組件
3.按鈕組組件
4.按鈕式下拉菜單
本節課我們主要學習一下Bootstrap 的三個組件功能：小圖標組件、下拉菜單組件和各種按鈕組件。
一．小圖標組件
Bootstrap 提供了免費的263 個小圖標（數了兩次），具體可以參考中文官網的組件鏈接：
http://v3.bootcss.com/components/#glyphicons。
部分圖標如下：
可以使用<i>或<span>標籤來配合使用，具體如下：
//使用小圖標<i></i><span></span> //也可以結合按鈕<button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button>
二．下拉菜單組件
下拉菜單，就是點擊一個元素或按鈕，觸發隱藏的列表顯示出來。
//基本格式<div><button data-toggle="dropdown">下拉菜單<span></span></button><ul><li><a href="#">首頁</a></li><li><a href="#">資訊</a></li><li><a href="#">產品</a></li><li><a href="#">關於</a></li></ul></div>
按鈕和菜單需要包裹在.dropdown 的容器裡，而作為被點擊的元素按鈕需要設置data-toggle="dropdown"才能有效。對於菜單部分，設置才能自動隱藏並添加固定樣式。設置表示箭頭，可上可下。
//設置向上觸發<div> //菜單項居右對齊，默認值是dropdown-menu-left<ul> //設置菜單的標題，不要加超鏈接<li>網站導航</li> //設置菜單的分割線<li></li> //設置菜單的禁用項<li><a href="#">產品</a></li> //讓菜單默認顯示<div>
三．按鈕組組件
按鈕組就是多個按鈕集成在一個容器裡形成獨有的效果。
//基本格式<div><button type="button">左</button><button type="button">中</button><button type="button">右</button></div> //將多個按鈕組整合起來便於管理<div><div><button type="button">左</button><button type="button">中</button><button type="button">右</button></div><div><button type="button"></button><button type="button"></button><button type="button"></button></div></div> //設置按鈕組大小<div><divbtn-group btn-group-sm"><div> //嵌套一個分組，比如下拉菜單<div><button type="button">左</button><button type="button">中</button><button type="button">右</button><div><buttondata-toggle="dropdown">下拉菜單<span></span></button><ul><li><a href="#">首頁</a></li><li><a href="#">資訊</a></li><li><a href="#">產品</a></li><li><a href="#">關於</a></li></ul></div></div>
注意：這裡<div>中並沒有實現，通過源碼分析知道嵌套本身已經有定位就不需要再設置。而右邊的圓角只要多加一個即可。
//設置按鈕組垂直排列<div> //設置兩端對齊按鈕組，使用<a>標籤<div><a type="button">左</a><a type="button">中</a><a type="button">右</a></div> //如果需要使用<button>標籤，則需要對每個按鈕進行群組<div><div><button type="button">左</button></div><div><button type="button">中</button></div><div><button type="button">右</button></div></div>
四．按鈕式下拉菜單
這個下拉菜單其實和第二個知識點一樣，只不過，這個是在群組裡，不需要<div>聲明class="dropdown"。
//群組按鈕下拉菜單<div><button type="button"data-toggle="dropdown">下拉菜單<span></span></button><ul><li><a href="#">首頁</a></li><li><a href="#">資訊</a></li><li><a href="#">產品</a></li><li><a href="#">關於</a></li></ul></div> //分裂式按鈕下拉菜單<div><button type="button">下拉菜單</button><button type="button"data-toggle="dropdown"><span></span></button><ul><li><a href="#">首頁</a></li><li><a href="#">資訊</a></li><li><a href="#">產品</a></li><li><a href="#">關於</a></li></ul></div> //向上彈出式<div>
以上內容是小編給大家介紹的BootStrap組件之菜單按鈕圖標組件，希望對大家有所幫助！