如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單-創(chuàng)新互聯(lián)
這篇文章主要講解了“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”吧！
1.下拉菜單
2.按鈕組
3.按鈕式下拉菜單
4.總結(jié)
再來熟悉一下這個開始建立一個頁面的代碼，首先新建一個測試網(wǎng)頁加入如下代碼
代碼如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body> 的 <script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
如果你有什么不太了解的話，我在之前的文章當(dāng)中有過介紹，你可以點擊鏈接進行查看http://www.cnblogs.com/aehyok/p/3398359.html
下拉菜單
用于顯示鏈接列表的可切換、有上下文的菜單。
案例
將下拉菜單觸發(fā)器和下拉菜單都包裹在.dropdown里，然后添加組成菜單的HTML代碼。
代碼如下:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
可以通過上面的代碼發(fā)現(xiàn)，里面可能有很多陌生的樣式類或者屬性。
一個Dropdown按鈕和右側(cè)有個小圖標(biāo)caret，當(dāng)然這個小圖標(biāo)和按鈕的文本是平級的。
首先看button按鈕中有個dropdown-toggle，還有一個data-toggle屬性，根據(jù)這個屬性來彈出下來列表。
緊接著ul標(biāo)簽的dropdown-menu應(yīng)該是和上面button按鈕的樣式類dropdown-toggle聯(lián)合使用，在通過aria-labelledby綁定上面的button按鈕。
下來第四個li標(biāo)簽中有個divider其實是一個分割線的樣式類。
大概我理解的就這個樣子，理解的肯定不到位。
對齊選項
給下拉菜單.dropdown-menu加上.text-right使文字右對齊。
代碼如下:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
只是在上面的代碼中的ul標(biāo)簽上添加了一個text-right的樣式類。
標(biāo)題
在任何下拉菜單中均可通過添加標(biāo)題來標(biāo)明一組動作。
代碼如下:
<h2>下拉菜單</h2>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li> 里面有個.dropdown-header的樣式類。
禁用的菜單項
給下拉菜單中的<li>加上.disabled禁用鏈接。
繼續(xù)修改上面的代碼將Something else here行的代碼進行替換
代碼如下:
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
主要是在li標(biāo)簽中添加.disabled的樣式類。
你運行之后可以查看效果，其實效果和上面的標(biāo)題樣式差不多，當(dāng)你點擊的時候會有一個禁用的圖標(biāo)顯示。截不到圖。
按鈕組
按鈕組中的工具提示和彈出框需要特別的設(shè)置
當(dāng)為.btn-group中的元素應(yīng)用工具提示或彈出框時，必須指定container: 'body'選項，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發(fā)時，會讓頁面元素變寬和/或失去圓角）。
基本案例
把一系列的.btn按鈕放入.btn-group。
代碼如下:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
通過.btn-group就可以將一組button按鈕并且為其添加樣式類btn
按鈕工具欄
把一組<div class="btn-group">組合進一個<div class="btn-toolbar">做成更復(fù)雜的組件。
代碼如下:
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">9</button>
</div>
</div>
尺寸
只要給.btn-group加上.btn-group-*，而不是給組中每個按鈕都應(yīng)用大小類。
代碼如下:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">9</button>
</div>
嵌套
想要把下拉菜單混合到一系列按鈕中，就把.btn-group放入另一個.btn-group中。
代碼如下:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button></p>
<p> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
垂直排列
讓一組按鈕豎直顯示而不是水平顯示。
代碼如下:
<div class="btn-group btn-group-vertical">
<a href="#">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
</a>
<div class="btn-group">
<a href="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
兩端對齊的鏈接排列
讓一組按鈕拉長為相同的尺寸，適應(yīng)父元素的寬度。
特定元素的用法
這只適用<a>元素因為<button>不能應(yīng)用這些樣式。
代碼如下:
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
按鈕式下拉菜單
把任何按鈕放入.btn-group然后加入正確的菜單標(biāo)記，就可以做成下拉菜單觸發(fā)器。
單按鈕下拉菜單
只要改變一些基本的標(biāo)記，就能把按鈕變成下拉菜單開關(guān)。
代碼如下:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
分裂式按鈕下拉菜單
相似地，分裂式按鈕下拉菜單也需要同樣的改變標(biāo)記，但只要多一個分開的按鈕。
代碼如下:
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
只能點擊小圖標(biāo)才能出現(xiàn)下來菜單額。
尺寸
下拉菜單按鈕適用所有尺寸的按鈕。
代碼如下:
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu"> ... </ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu"> ... </ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu"> ... </ul>
</div>
通過樣式類.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。
向上彈出式菜單
給父元素添加.dropup就能使觸發(fā)的下拉菜單在元素上方。
代碼如下:
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
感謝各位的閱讀，以上就是“如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
分享名稱：如何實現(xiàn)Bootstrap3.0的按鈕與下拉菜單-創(chuàng)新互聯(lián)
本文路徑：http://aaarwkj.com/article20/dpiijo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、定制網(wǎng)站、微信公眾號、App開發(fā)、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 海外推廣：提升外貿(mào)網(wǎng)站google排名的4個方向 2016-04-01
- Google回歸中國對SEO們意味著什么？ 2016-08-28
- 關(guān)于Google Play的ASO優(yōu)化要點淺析 2020-09-11
- 在線翻譯服務(wù)：百度研發(fā)2年，功能仍不及google 2016-07-01
- 網(wǎng)站設(shè)計中如何優(yōu)化應(yīng)對Bing與google的規(guī)則 2016-11-06
- 淺談Google Play ASO 優(yōu)化 2020-09-10
- google優(yōu)化怎樣做才能取得好的排名？ 2016-03-10
- Google推廣主要有兩種操作方式：1、競價廣告，2、優(yōu)化(SEO) 2016-04-17
- 分析Google Adwords和谷歌優(yōu)化比較 2016-04-05
- 網(wǎng)站優(yōu)化之什么會影響Google信任指數(shù) 2016-06-09
- 如何使用 Google Play 應(yīng)用內(nèi)購買結(jié)算功能銷售訂閱內(nèi)容 2015-02-06
- 優(yōu)化Google網(wǎng)站優(yōu)化SEO的7個技巧與關(guān)鍵字工具推薦 2019-12-01