這篇文章主要講解了“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”吧！

創(chuàng)新互聯(lián)建站是專業(yè)的城關(guān)網(wǎng)站建設(shè)公司，城關(guān)接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行城關(guān)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

1.下拉菜單

2.按鈕組

3.按鈕式下拉菜單

4.總結(jié)

再來熟悉一下這個開始建立一個頁面的代碼，首先新建一個測試網(wǎng)頁加入如下代碼

代碼如下:

的

如果你有什么不太了解的話，我在之前的文章當中有過介紹，你可以點擊鏈接進行查看http://www.cnblogs.com/aehyok/p/3398359.html

下拉菜單

用于顯示鏈接列表的可切換、有上下文的菜單。

案例

將下拉菜單觸發(fā)器和下拉菜單都包裹在.dropdown里，然后添加組成菜單的HTML代碼。

代碼如下:

可以通過上面的代碼發(fā)現(xiàn)，里面可能有很多陌生的樣式類或者屬性。

一個Dropdown按鈕和右側(cè)有個小圖標caret，當然這個小圖標和按鈕的文本是平級的。

首先看button按鈕中有個dropdown-toggle，還有一個data-toggle屬性，根據(jù)這個屬性來彈出下來列表。

緊接著ul標簽的dropdown-menu應(yīng)該是和上面button按鈕的樣式類dropdown-toggle聯(lián)合使用，在通過aria-labelledby綁定上面的button按鈕。

下來第四個li標簽中有個divider其實是一個分割線的樣式類。

大概我理解的就這個樣子，理解的肯定不到位。

對齊選項

給下拉菜單.dropdown-menu加上.text-right使文字右對齊。

代碼如下:

只是在上面的代碼中的ul標簽上添加了一個text-right的樣式類。

標題

在任何下拉菜單中均可通過添加標題來標明一組動作。

代碼如下:

下拉菜單

主要是添加了

禁用的菜單項

給下拉菜單中的

主要是在li標簽中添加.disabled的樣式類。

你運行之后可以查看效果，其實效果和上面的標題樣式差不多，當你點擊的時候會有一個禁用的圖標顯示。截不到圖。

按鈕組

按鈕組中的工具提示和彈出框需要特別的設(shè)置

當為.btn-group中的元素應(yīng)用工具提示或彈出框時，必須指定container: 'body'選項，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發(fā)時，會讓頁面元素變寬和/或失去圓角）。

基本案例

把一系列的.btn按鈕放入.btn-group。

代碼如下:

通過.btn-group就可以將一組button按鈕并且為其添加樣式類btn

按鈕工具欄

把一組

按鈕式下拉菜單

把任何按鈕放入.btn-group然后加入正確的菜單標記，就可以做成下拉菜單觸發(fā)器。

單按鈕下拉菜單

只要改變一些基本的標記，就能把按鈕變成下拉菜單開關(guān)。

代碼如下:

分裂式按鈕下拉菜單

相似地，分裂式按鈕下拉菜單也需要同樣的改變標記，但只要多一個分開的按鈕。

代碼如下:

只能點擊小圖標才能出現(xiàn)下來菜單額。

尺寸

下拉菜單按鈕適用所有尺寸的按鈕。

代碼如下:

通過樣式類.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。

向上彈出式菜單

給父元素添加.dropup就能使觸發(fā)的下拉菜單在元素上方。

代碼如下:

感謝各位的閱讀，以上就是“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！