如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單-創(chuàng)新互聯(lián)
這篇文章主要講解了“如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單”吧！
1.下拉菜單
2.按鈕組
3.按鈕式下拉菜單
4.總結(jié)
再來(lái)熟悉一下這個(gè)開(kāi)始建立一個(gè)頁(yè)面的代碼，首先新建一個(gè)測(cè)試網(wǎng)頁(yè)加入如下代碼
代碼如下:
<!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)中有過(guò)介紹，你可以點(diǎn)擊鏈接進(jìn)行查看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>
可以通過(guò)上面的代碼發(fā)現(xiàn)，里面可能有很多陌生的樣式類(lèi)或者屬性。
一個(gè)Dropdown按鈕和右側(cè)有個(gè)小圖標(biāo)caret，當(dāng)然這個(gè)小圖標(biāo)和按鈕的文本是平級(jí)的。
首先看button按鈕中有個(gè)dropdown-toggle，還有一個(gè)data-toggle屬性，根據(jù)這個(gè)屬性來(lái)彈出下來(lái)列表。
緊接著ul標(biāo)簽的dropdown-menu應(yīng)該是和上面button按鈕的樣式類(lèi)dropdown-toggle聯(lián)合使用，在通過(guò)aria-labelledby綁定上面的button按鈕。
下來(lái)第四個(gè)li標(biāo)簽中有個(gè)divider其實(shí)是一個(gè)分割線的樣式類(lèi)。
大概我理解的就這個(gè)樣子，理解的肯定不到位。
對(duì)齊選項(xiàng)
給下拉菜單.dropdown-menu加上.text-right使文字右對(duì)齊。
代碼如下:
<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)簽上添加了一個(gè)text-right的樣式類(lèi)。
標(biāo)題
在任何下拉菜單中均可通過(guò)添加標(biāo)題來(lái)標(biāo)明一組動(dòng)作。
代碼如下:
<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> 里面有個(gè).dropdown-header的樣式類(lèi)。
禁用的菜單項(xiàng)
給下拉菜單中的<li>加上.disabled禁用鏈接。
繼續(xù)修改上面的代碼將Something else here行的代碼進(jìn)行替換
代碼如下:
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
主要是在li標(biāo)簽中添加.disabled的樣式類(lèi)。
你運(yùn)行之后可以查看效果，其實(shí)效果和上面的標(biāo)題樣式差不多，當(dāng)你點(diǎn)擊的時(shí)候會(huì)有一個(gè)禁用的圖標(biāo)顯示。截不到圖。
按鈕組
按鈕組中的工具提示和彈出框需要特別的設(shè)置
當(dāng)為.btn-group中的元素應(yīng)用工具提示或彈出框時(shí)，必須指定container: 'body'選項(xiàng)，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發(fā)時(shí)，會(huì)讓頁(yè)面元素變寬和/或失去圓角）。
基本案例
把一系列的.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>
通過(guò).btn-group就可以將一組button按鈕并且為其添加樣式類(lèi)btn
按鈕工具欄
把一組<div class="btn-group">組合進(jìn)一個(gè)<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-*，而不是給組中每個(gè)按鈕都應(yīng)用大小類(lèi)。
代碼如下:
<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放入另一個(gè).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>
兩端對(duì)齊的鏈接排列
讓一組按鈕拉長(zhǎng)為相同的尺寸，適應(yīng)父元素的寬度。
特定元素的用法
這只適用<a>元素因?yàn)?lt;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)記，就能把按鈕變成下拉菜單開(kāi)關(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)記，但只要多一個(gè)分開(kāi)的按鈕。
代碼如下:
<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>
只能點(diǎn)擊小圖標(biāo)才能出現(xiàn)下來(lái)菜單額。
尺寸
下拉菜單按鈕適用所有尺寸的按鈕。
代碼如下:
<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>
通過(guò)樣式類(lèi).btn-lg、 .btn-sm、.btn-xs來(lái)控制按鈕的大小。
向上彈出式菜單
給父元素添加.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>
感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
分享名稱：如何實(shí)現(xiàn)Bootstrap3.0的按鈕與下拉菜單-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article20/dpiijo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、定制網(wǎng)站、微信公眾號(hào)、App開(kāi)發(fā)、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- SpringBootDBUnit單元測(cè)試(小結(jié))-創(chuàng)新互聯(lián)
- 怎么安裝Python的pip-創(chuàng)新互聯(lián)
- PHP設(shè)計(jì)模式之工廠模式的示例分析-創(chuàng)新互聯(lián)
- Nginx如何啟用OCSPStapling-創(chuàng)新互聯(lián)
- python中類(lèi)和對(duì)象的區(qū)別-創(chuàng)新互聯(lián)
- AzureRedis系列之AzureRedis遷移-創(chuàng)新互聯(lián)
- 收藏|第一次有人把“分布式事務(wù)”講的這么簡(jiǎn)單明了-創(chuàng)新互聯(lián)
- 海外推廣：提升外貿(mào)網(wǎng)站google排名的4個(gè)方向 2016-04-01
- Google回歸中國(guó)對(duì)SEO們意味著什么？ 2016-08-28
- 關(guān)于Google Play的ASO優(yōu)化要點(diǎn)淺析 2020-09-11
- 在線翻譯服務(wù)：百度研發(fā)2年，功能仍不及google 2016-07-01
- 網(wǎng)站設(shè)計(jì)中如何優(yōu)化應(yīng)對(duì)Bing與google的規(guī)則 2016-11-06
- 淺談Google Play ASO 優(yōu)化 2020-09-10
- google優(yōu)化怎樣做才能取得好的排名？ 2016-03-10
- Google推廣主要有兩種操作方式：1、競(jìng)價(jià)廣告，2、優(yōu)化(SEO) 2016-04-17
- 分析Google Adwords和谷歌優(yōu)化比較 2016-04-05
- 網(wǎng)站優(yōu)化之什么會(huì)影響Google信任指數(shù) 2016-06-09
- 如何使用 Google Play 應(yīng)用內(nèi)購(gòu)買(mǎi)結(jié)算功能銷(xiāo)售訂閱內(nèi)容 2015-02-06
- 優(yōu)化Google網(wǎng)站優(yōu)化SEO的7個(gè)技巧與關(guān)鍵字工具推薦 2019-12-01