溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何實(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è)開始建立一個(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)，里面可能有很多陌生的樣式類或者屬性。
一個(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按鈕的樣式類dropdown-toggle聯(lián)合使用，在通過(guò)aria-labelledby綁定上面的button按鈕。
下來(lái)第四個(gè)li標(biāo)簽中有個(gè)divider其實(shí)是一個(gè)分割線的樣式類。
大概我理解的就這個(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的樣式類。
標(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的樣式類。
禁用的菜單項(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的樣式類。
你運(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按鈕并且為其添加樣式類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)用大小類。
代碼如下:
<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)記，就能把按鈕變成下拉菜單開關(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è)分開的按鈕。
代碼如下:
<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ò)樣式類.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)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
