Bootstrap3.0學(xué)習(xí)筆記之按鈕與下拉菜單
我要評(píng)論前面的文章算是把Bootstrap CSS部分簡單的學(xué)習(xí)了一遍，應(yīng)該忽視了比較多的細(xì)節(jié)問題。不過大部分的內(nèi)容我都過了一遍，并且用代碼實(shí)現(xiàn)了一遍，而且看到了真實(shí)的效果。挺不錯(cuò)的。那么接下來的幾篇文章主要來講解Bootstrap的組件。那么本文主要來講解以下內(nèi)容
再來熟悉一下這個(gè)開始建立一個(gè)頁面的代碼，首先新建一個(gè)測試網(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 ></script</a>>
<script src="<a ></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)中有過介紹，你可以點(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>
可以通過上面的代碼發(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è)屬性來彈出下來列表。
緊接著ul標(biāo)簽的dropdown-menu應(yīng)該是和上面button按鈕的樣式類dropdown-toggle聯(lián)合使用，在通過aria-labelledby綁定上面的button按鈕。
下來第四個(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)題
在任何下拉菜單中均可通過添加標(biāo)題來標(biāo)明一組動(dòng)作。
<h1>下拉菜單</h1>
<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標(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ì)讓頁面元素變寬和/或失去圓角）。
基本案例
把一系列的.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">組合進(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ì)齊的鏈接排列
讓一組按鈕拉長為相同的尺寸，適應(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)下來菜單額。
尺寸
下拉菜單按鈕適用所有尺寸的按鈕。
<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>
本文主要學(xué)習(xí)了按鈕和下拉菜單，然后是對(duì)于按鈕和下拉菜單的組合，變化還是蠻多的，樣式也不錯(cuò)，但是開始使用還是沒那么方便，因?yàn)檫@里的介紹并沒有那么詳細(xì)，學(xué)習(xí)起來還是有點(diǎn)費(fèi)勁的。不過沒關(guān)系，自己多多的實(shí)踐就可以了，慢慢的領(lǐng)悟吧。
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章，我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站，這些網(wǎng)站上提供了很多編程教程，圖書以及編程練習(xí)，希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt，em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位，一般用于pc端網(wǎng)頁開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸，是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮，各有優(yōu)點(diǎn)，選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情！！在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進(jìn)程的，有瀏覽器主進(jìn)程，網(wǎng)絡(luò)進(jìn)程，渲染進(jìn)程，插件進(jìn)程等，在將html，css，javascript解析成一個(gè)頁面的時(shí)候，就需要多個(gè)進(jìn)程的分工合作2023-05-01
- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案，稱為Unicode，是通用字符集Universal Character Set的縮寫，用以滿足跨語言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-12-02
告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-27
