bootstrap基礎(chǔ)布局

1、2.網(wǎng)格系統(tǒng)Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的網(wǎng)格系統(tǒng)。Bootstrap網(wǎng)格系統(tǒng)會(huì)隨著屏幕的大小的改變而進(jìn)行改變，自動(dòng)分為最多12列。工作原理網(wǎng)格系統(tǒng)通過(guò)行row和列column的組合來(lái)創(chuàng)建頁(yè)面的布局。遵循的規(guī)則樣式指的就是class中的內(nèi)容。1. row必須包含在樣式為.containner或者container-fluid的容器中。其中.container-fluid的寬度為100%，使用此樣式的目的在于為了在網(wǎng)絡(luò)系統(tǒng)中能夠更好的進(jìn)行排列。2. 列column必須包含在行row中，而其他的標(biāo)簽元素只能包含在列column中。其中，行使用.row的形式，而列使用類似于.co

2、l-lg-*的樣式。其中*代表的意思是在112之間的一個(gè)數(shù)字。行中的列樣式數(shù)組中和不能超過(guò)12，超過(guò)則另起一行。3. 通過(guò)設(shè)置行row和列column的padding與margin屬性來(lái)抵消和增加其之間的間隔。不同的屏幕大小可能會(huì)造成不同的效果，當(dāng)小于屏幕臨界值以后，所有的內(nèi)容會(huì)堆積在一起。不同屏幕的列中的類前綴是不同的，超小屏幕手機(jī)的（<768px）的前綴.col-xs-*小屏幕（平板）的前綴為.col-sm-* ; 中等屏幕的為.col-md-*大屏幕的是.col-lg-*.這幾個(gè)方式的前綴我們可以同時(shí)使用，按照屏幕的大小進(jìn)行自適應(yīng)，但是當(dāng)屏幕過(guò)小，都不滿足的時(shí)候，就會(huì)堆在一起。列偏

3、移在頁(yè)面布局時(shí)經(jīng)常使用css的margin來(lái)控制元素的偏移量，網(wǎng)格系統(tǒng)中有一個(gè)快速實(shí)現(xiàn)列偏移的方法，其class為：col-xs-offset-*、col-sm-offset-*、col-md-offset-*、col-lg-offset-*，其中，*代表向右偏移的列數(shù)。注意：偏移列和顯示列的總和不能超過(guò)12.這種的偏移量是固定的，必要的時(shí)候我們只能使用margin進(jìn)行來(lái)完成。2.5列排序使用col-X-push-*與col-X-pull-*幾個(gè)類，可以改變列的左右浮動(dòng)方向。其中col-X-push-*是向右進(jìn)行浮動(dòng)，而col-X-pull-*是向左浮動(dòng)，*代表的是浮動(dòng)的列等分。注意：這種排序

4、，只要滿足所有加起來(lái)為12就行，不需要將空出來(lái)的計(jì)算在里面，不同于列偏移。并且會(huì)存在覆蓋的現(xiàn)象。2.6列嵌套在一個(gè)行中在從新div一個(gè)表。例如代碼如下:.rowfirstheight:50px.nestedrowbackground-color:#CFC7D8; border :1px solid #0000FF; height: 25px;<div class="containter"> <div class="row"> <div class="col-md-6 rowfirst"> <d

5、iv class="row"> <div class="col-md-6 nestedrow">內(nèi)嵌一列</div> <div class="col-md-6 nestedrow">內(nèi)嵌二列</div> </div> </div> <div class="col-md-6 rowfirst">第一行（2）.col-md-6</div> </div> </div>排版3.1 標(biāo)題Bootstr

6、ap中標(biāo)題使用h1-h6標(biāo)簽。但是除了使用這幾種標(biāo)簽外，HIA另外提供了h1-h6的樣式類，從而達(dá)到同樣的效果。我們可以在div span label p 等標(biāo)簽中加入class，class中包含的便是h1-h6之間的標(biāo)簽，從而達(dá)到同樣的效果。小標(biāo)題通過(guò)使用small標(biāo)簽來(lái)實(shí)現(xiàn)小標(biāo)題。Small標(biāo)簽中的line-height：1，字體的大小h1-h3變?yōu)橹鳂?biāo)題的65%，剩下的變成75%。3.2 段落Font-size=14px，line-height=1.42857143是bootstrsap的全局樣式，應(yīng)用于body元素以及body中的所有p標(biāo)簽的元素。如果想突出顯示某一個(gè)段落內(nèi)容，則只需要

7、在p標(biāo)簽中添加class=“l(fā)ead”即可。3.3mark標(biāo)簽Mark標(biāo)簽可以突出標(biāo)記文字的內(nèi)容。使用方式：加在字段中<mark>段落</mark>.3.4del和s標(biāo)簽使用這兩個(gè)標(biāo)簽可以在文本中間顯示橫線，標(biāo)記為刪除和無(wú)用文本。3.5 ins和u標(biāo)簽可以實(shí)現(xiàn)文本下劃線的效果。注意：mark標(biāo)簽可以加在ins和u標(biāo)簽中進(jìn)行進(jìn)一步的加強(qiáng)說(shuō)明。3.6 Strong和b標(biāo)簽Strong和b標(biāo)簽可以讓文本內(nèi)容加粗。3.7em和i標(biāo)簽使用這兩個(gè)標(biāo)簽可以實(shí)現(xiàn)文本內(nèi)容變成斜體。3.8文本對(duì)齊方式Bootstrap中提供了四種文本對(duì)齊的方式，分別如下：Text-left：左對(duì)齊Text

8、-center：居中對(duì)齊Text-right：右對(duì)齊Text-justify：兩端對(duì)齊這四個(gè)都是放在class類中進(jìn)行生效的。3.9字母大小寫(xiě)在class類中寫(xiě)：text-lowercase：將字母轉(zhuǎn)換為小寫(xiě)Text-uppercase：將字母轉(zhuǎn)換成為大寫(xiě)Text-capitalize：將首字母大寫(xiě)3.10abbr標(biāo)簽的title屬性Title屬性在我們鼠標(biāo)懸停的時(shí)候會(huì)顯示跟蹤的內(nèi)容，一般用于顯示縮略文字的全部?jī)?nèi)容。Bootstrap結(jié)合abbr標(biāo)簽，可以顯示縮略文本的詳細(xì)信息，縮略文本會(huì)以虛線突出顯示。3.11引用樣式可以使用blockquote標(biāo)簽來(lái)表現(xiàn)對(duì)文字的引用，引用的內(nèi)容包含在p標(biāo)簽

9、中?？梢酝ㄟ^(guò)加<footer>標(biāo)簽來(lái)標(biāo)記引用源，原名稱可以包含在<cite>標(biāo)簽中。在blockquote標(biāo)簽中添加class=“blockquote-reverse”實(shí)現(xiàn)文本內(nèi)容的右對(duì)齊。3.12列表無(wú)序列表：<ul><li><li><ul>有序列表：<ol><li><li><ol>定義列表：<dl><dt></dt><dd></dd></dl>有序列表和無(wú)序列表去點(diǎn)列表Li元素前面會(huì)自動(dòng)添加一個(gè)”.”

10、符號(hào)，這在很大的程度上影響了頁(yè)面的美觀，使用class=“l(fā)ist-unstyled”，可以去掉前面的點(diǎn)符號(hào)。內(nèi)聯(lián)列表即將列表中的元素顯示在一行，并且對(duì)每個(gè)子元素的padding做相應(yīng)的處理。使用class=“l(fā)ist-inline”放在ul或ol標(biāo)簽中實(shí)現(xiàn)內(nèi)聯(lián)。定義列表<dt>有文字加粗效果。使用class=“dl-horizontal”可以很方便地實(shí)現(xiàn)列表水平顯示。3.13代碼、代碼的風(fēng)格：<code>：一般針對(duì)單個(gè)語(yǔ)句的代碼<pre>：一般用于多行代碼塊<kbd>：一般用于表示用戶要通過(guò)鍵盤(pán)輸入的內(nèi)容<var>：用于標(biāo)記變量信息

11、<samp>：用于標(biāo)記程序的輸出的內(nèi)容<pre>中如果代碼過(guò)多，可以使用“.pre-scrollable”控制了最大的高度為340px,超過(guò)會(huì)有滾動(dòng)條。3.14表格有六種表格的形式Table 基礎(chǔ)表格Table-striped 斑馬線表格Table-bordered帶邊框的表格Table-hover鼠標(biāo)懸停高亮的表格Table-condensed緊湊型表格Table-responsive響應(yīng)式表格Bootstrap還為表格中的<tr>提供了五種裝填的樣式類，分別控制著五種不同的顏色背景。Active：標(biāo)識(shí)為當(dāng)前活動(dòng)的信息Success：表示成功行為Info：

12、標(biāo)識(shí)普通的中立Warning：表示警告的行為Danger:標(biāo)識(shí)危險(xiǎn)行為基礎(chǔ)表格的使用非常的簡(jiǎn)單，只需要在<table>中添加class=“table”即可。“table”中主要做了如下的處理：在table中使用<thead>標(biāo)簽可以實(shí)現(xiàn)加粗。表格的使用<table><tr><td><th>有不同的意思。斑馬線也就是條紋相間的行，要實(shí)現(xiàn)該效果只需要在基礎(chǔ)表格的基礎(chǔ)上添加class=“table-striped”便可。表格邊框在class中添加class=“table-bordered”便可。高亮行就是當(dāng)鼠標(biāo)懸停到某一行的時(shí)候

13、該行背景色突出顯示。我們只需要在class中添加table-hover便可實(shí)現(xiàn)此功能。如果想讓表格框也高亮，那么只需要在class中這樣寫(xiě)”table table-bordered table-hover”緊湊型表格在class中添加屬性table-ciondensed來(lái)實(shí)現(xiàn)。響應(yīng)式表格響應(yīng)式的表格是將table置于一個(gè)響應(yīng)式容器<div>中，該容器使用類table-responsive來(lái)達(dá)到響應(yīng)式效果。表現(xiàn)為：當(dāng)你的瀏覽器可視的區(qū)域小于768px時(shí)，表格底部會(huì)出現(xiàn)水平滾動(dòng)條，大于時(shí)，就會(huì)消失。響應(yīng)式表格class的聲明和其他表格的位置不一樣，這一點(diǎn)需要注意。表單在web頁(yè)面中表單

14、是不可缺少的元素，它用來(lái)和用戶做數(shù)據(jù)的交互。常見(jiàn)的表單元素包括：文本框（text），文本域（textarea），下拉框（select），單選按鈕（radio），以及復(fù)選框（checkbox）等。4.1基礎(chǔ)表單在bootstrap中，單獨(dú)的表單控件會(huì)自動(dòng)賦予全局樣式，但是在class=“form-control”類中的表單元元素做了特殊處理，包含在”.form-control”中的<input>、<textaera>、<select>都會(huì)默認(rèn)設(shè)置寬度為100%。這些元素和label組合使用會(huì)使得元素在排列上更加的美觀?；A(chǔ)代碼如下：<div class=

15、"containter"> <div class="form-group"> <label for="txtUsername">用戶名</label> <input type="text" class="form-control" id="txtUserName" placeholder="請(qǐng)輸入用戶名"> </div> <div class="form-group"

16、;> <label for="txtPassWord">密碼</label> <input type="text" class="form-control" id="txtPassWord" placeholder="請(qǐng)輸入密碼"> </div></div>內(nèi)聯(lián)表單上面的表單中l(wèi)abel標(biāo)簽中的內(nèi)容和輸入框其實(shí)并不在同一行，在bootstrap中表單元蘇的默認(rèn)處理是垂直的，有時(shí)候我們需需要將<form>或者容器中的表單

17、元顯示在同一行，bootstrap提供了class=“form-inline”可以實(shí)現(xiàn)這一效果。將這個(gè)class放在最外面的div中。這樣，四個(gè)東西可以并排。當(dāng)屏幕不夠大是另一回事。水平表單如果將標(biāo)簽label和表單元素顯示在同一行，則需要使用class=“form-horizontal”。該類聯(lián)合bootstrap中的網(wǎng)格系統(tǒng)同時(shí)使用，這個(gè)時(shí)候class=“form-group”就相當(dāng)于class=“row”。在大類中的div需要像網(wǎng)格系統(tǒng)中標(biāo)有col-lg-*等。4.2輸入框在html5中，輸入框（input）標(biāo)簽中的type支持了更多的類型，有text、password、datetime

18、、datetime-local、date、month、time、week等。標(biāo)簽input上只有賦值了特定的type才能顯示正確的樣式。4.3下拉框在使用的時(shí)候也需要在select中添加class=“form-control”。如果要實(shí)現(xiàn)多選，則可以設(shè)置屬性multiple=“multiple”。下拉列表的選項(xiàng)使用的是option標(biāo)簽。4.4文本域使用方法和HTML的默認(rèn)方法一致，這里在樣式修飾上也是使用了“form-control”，如果使用了該樣式，則無(wú)需使用cols屬性。因?yàn)檫@個(gè)默認(rèn)的寬度是100%。我們可以使用rows設(shè)置高度，使用cols來(lái)設(shè)置長(zhǎng)度。4.5多選框與單選框在普通的htm

19、l中，checkbox、radio中。對(duì)齊是個(gè)很麻煩的問(wèn)題。在bootstrap中，我們將input標(biāo)簽都放在了label中，強(qiáng)制使其在一行，但是很多情況下我們不建議這做。一般一個(gè)<label>中包含一個(gè)元素，如果遇到多個(gè)label標(biāo)簽則會(huì)垂直顯示內(nèi)容。Bootstrap提供了幾個(gè)樣式類，如class=“checkbox-inline”、class=“radio-inline”可以使得checkbox和radio顯示在一行。4.6表單焦點(diǎn)焦點(diǎn)狀態(tài)在bootstrap中比較簡(jiǎn)單，是一個(gè)表單的處理細(xì)節(jié)，即單擊input獲得焦點(diǎn)時(shí)讓元素突出顯示。Bootstrap中的焦點(diǎn)狀態(tài)是通過(guò)“：f

20、ocus”來(lái)實(shí)現(xiàn)的，bootstrap中焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式。4.7表單禁用使用disabled=“disabled”。如果使用了disabled，則該元素將不能單擊。Bootstrap的禁用在樣式上做了一定的處理。Bootstrap禁用同樣使用在select、radio、checkbox、button。如果元素被包含在fieldset中，并且fieldset被禁用，則里面的所有表單元素將全部禁用。4.8驗(yàn)證樣式在做表單驗(yàn)證的時(shí)候我們希望能夠給出成功或者警告的提示，Bootstrap提供了三種不同的狀態(tài)的提示。Has-warning：警告狀態(tài)，顯示為黃色。Has-error錯(cuò)

21、誤狀態(tài)，顯示為紅色Has-success成功狀態(tài)，顯示為綠色。我們只需要在form-group容器標(biāo)簽上添加對(duì)應(yīng)的樣式即可。當(dāng)然，使用了該類容器中的label-control、form-control都會(huì)受到影響。圖標(biāo)提示如果我們需要顯示一些圖標(biāo)，使其更加突出，則只需在驗(yàn)證樣式的容器上添加class=“has-feedback”，在input標(biāo)簽后添加一個(gè)<span>標(biāo)簽，并且指定對(duì)應(yīng)的樣式即可。在代碼中要注意的是<span class=”glyphicon *”></span>,這是控制上面圖標(biāo)顯示的代碼，當(dāng)然我們也可以自定義圖標(biāo)。文字提示：Bootstr

22、ap的文字提示的方法是：我們?cè)?lt;input>后面繼續(xù)添加一個(gè)<span>用于顯示提示的文本信息。4.9元素大小高度前面使用的表單的控件都是默認(rèn)正常的大小，bootstrap提供了另外兩種樣式類來(lái)改變表單元素的大小。Input-sm：讓控件比正常的控件更小。Input-lg：讓控件比正常的控件更大。這兩個(gè)樣式適用于input、textarea、select控件。這兩個(gè)樣式主要改變了height、line-height、padding、font-size等樣式屬性。上面的代碼只能改變輸入框的大小，label標(biāo)簽的大小并沒(méi)有改變。Bootstrap提供了兩個(gè)類form-gro

23、up-sm和form-group-lg，可以快速設(shè)置容器中表單元素的大小。寬度修改輸入框的寬度的方式有兩種：一種是使用width指定其寬度，再者是利用系統(tǒng)網(wǎng)格的寬度來(lái)限制其寬度。4.10 按鈕Bootstrap的按鈕樣式可以修飾在元素<a><input><button>上?；景粹o我們只需要在按鈕上添加class=“btn”便可。Bootstrap中的基礎(chǔ)按鈕風(fēng)格相對(duì)還是比較丑的。我們可以在btn的后面繼續(xù)加以限制，添加btn-default的樣式。多標(biāo)簽我們除了使用<button>作為按鈕以外，還可以使用很多其他的標(biāo)簽來(lái)作為按鈕，Bootstr

24、ap為每一個(gè)方法都提供了很好的支持。這里一定要注意使用其他標(biāo)簽作為按鈕時(shí)一定要添加class=“btn”的樣式，否則是沒(méi)有效果的。<div class="containter"> <button class="btn btn-default">按鈕基礎(chǔ)</button> <a href="#" class="btn btn-default " role="button">A標(biāo)簽按鈕</a> <input type="bu

25、tton" class="btn btn-default" value="input按鈕"> <span class="btn btn-default" >span按鈕</span> <div class="btn btn-default" >div按鈕</div> <input type="submit"class="btn btn-default"value="submit按鈕"&g

26、t; <input type="reset" class="btn btn-default" value="reset按鈕"></div>按鈕風(fēng)格Btn-default:默認(rèn)樣式Btn-primary：首選項(xiàng)樣式Btn-success成功樣式Btn-info一般信息樣式Btn-warning警告樣式Btn-danger危險(xiǎn)樣式Btn-link鏈接樣式用法和位置和默認(rèn)的樣式是一樣的按鈕大小按鈕提供了四種大小不同的樣式：Btn-lg：大型按鈕Btn-sm：小型按鈕Btn-xs：超小型按鈕默認(rèn)樣式大小按鈕塊狀按鈕前面

27、在<input>等元素張控制其寬度時(shí)，我們使用的是網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)中的表單元素的默認(rèn)是100%填充。Bootstrap中的按鈕也可以100%填充父容器，我們稱之為塊狀按鈕。塊狀按鈕只需要添加class=“btn-block”即可。激活和禁用Bootstrap針對(duì)按鈕的激活和禁用狀態(tài)做了一些特殊的效果處理。當(dāng)Bootstrap按鈕處于激活狀態(tài)時(shí)分為三種情況：鼠標(biāo)懸停狀態(tài) hover鼠標(biāo)點(diǎn)擊狀態(tài) active焦點(diǎn)狀態(tài) focus與btn放在同一個(gè)class中。如果要禁用按鈕則需要使用disabled。當(dāng)然，如果是<button>按鈕我們也可以使用disabled=“dis

28、abled”來(lái)實(shí)現(xiàn)該效果。4.11圖片Bootstrap提供了幾種圖片的樣式風(fēng)格Img-responsive：響應(yīng)式圖片，主要針對(duì)的是響應(yīng)式設(shè)計(jì)。Img-rounded：圓角圖片Img-circle：圓形圖片Img-thumbnail縮略圖以上的四種樣式都是使用到<img>上，并未對(duì)圖片的大小做處理。如果涉及圖片展示大小的問(wèn)題則可以控制容器的大小，而非直接使用樣式來(lái)修改圖片大小。4.12圖標(biāo)圖標(biāo)的使用像class=“glyphicon glyphicon-*”*代表不同的圖片的名稱來(lái)使用。4.13輸入框組通過(guò)在文本框<input>前面、后面或者兩邊加上文字或者按鈕，實(shí)現(xiàn)

29、對(duì)控件的擴(kuò)展，我們稱之為輸入框組。實(shí)現(xiàn)這樣的效果，只需要給class=“input-group”類新增class=“input-group-addon”，就可以在class=“form-control”的前面或者后面添加額外的元素。Input-group指的是輸入組，而不是一個(gè)單純的輸入框。當(dāng)然，我們可以舉一反三，input-group-btn即是在input的前后面加上一個(gè)按鈕。下面是一個(gè)實(shí)例：<div class="container"> <div class="input-group"> <div class=&quo

30、t;input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" date-toggle="dropdown"> 請(qǐng)選擇<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">

31、寶貝</a></li> <li><a href="#">店鋪</a></li> </ul> </div> <input type="text" class="form-control" placeholder="輸入關(guān)鍵字"> <span class="input-group-btn"> <button class="btn btn-primary"

32、type="button">搜索</button> </span> </div></div>使用輸入框組的時(shí)候要注意以下兩點(diǎn)：不能在輸入框的單獨(dú)一側(cè)添加多個(gè)額外的元素；不能在單個(gè)輸入框組中添加多個(gè)表單控件。下拉菜單5.1基本用法因?yàn)閎ootstrap.js是依賴jQuery來(lái)實(shí)現(xiàn)的，所以我們需要先加載jQuery組件。在bootstrap中使用下拉菜單有一個(gè)非常嚴(yán)格的結(jié)構(gòu)。使用class=“dropdown”的容器包裹整個(gè)下拉菜單：<div class=”dropdown”></div>使用一個(gè)&

33、lt;button>按鈕作為一個(gè)父級(jí)菜單，并且定義一個(gè)class=“dropdown-toggle”，給<button>添加一個(gè)自定義屬性data-toggle=“dropdown”，這里是相對(duì)固定的，所謂的相對(duì)固定是指按鈕的樣式可以修改：<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"></button>在<button>按鈕的同級(jí)添加一個(gè)<ul>元

34、素，并且添加class=“dropdown-menu”。通過(guò)以上三種方法實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單，完整代碼如下：<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class=

35、"dropdown-menu"> <li><a href="javascript:void(0)">Javascript</a></li> <li><a href="javascript:void(0)">css3</a></li> <li><a href="javascript:void(0)">HTML5</a></li> <li><a href

36、="javascript:void(0)">jQuery</a></li> </ul></div>基本原理：初始狀態(tài)下，下拉菜單默認(rèn)是不顯示的，這是因?yàn)樵赾lass=“dropdown-menu”中設(shè)置了“display：none”來(lái)隱藏下拉菜單，我們可以使用瀏覽器進(jìn)行查看。當(dāng)我們單擊下拉菜單的時(shí)候，class=“dropdown”上會(huì)新增一個(gè)“open”類，再次單擊是“open”會(huì)移除，下拉菜單的顯示和隱藏就是這樣實(shí)現(xiàn)的。5.3分割線當(dāng)需要添加分割線的菜單項(xiàng)處添加一個(gè)空的<li>,并且為其添加class=“

37、divider”，分割線實(shí)現(xiàn)代碼如下：<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li

38、><a href="javascript:void(0)">Javascript</a></li> <li><a href="javascript:void(0)">css3</a></li> <li class="diviler"></li> <li><a href="javascript:void(0)">HTML5</a></li> <li&g

39、t;<a href="javascript:void(0)">jQuery</a></li> </ul></div>5.4菜單標(biāo)題下拉菜單中的標(biāo)題和分割線的使用方式進(jìn)本一直。在<li>中使用class=“dropdown-header”即可。代碼如下：<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data

40、-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">標(biāo)題</li> <li><a href="javascript:void(0)">Javascript</a></li> <li&g

41、t;<a href="javascript:void(0)">css3</a></li> <li class="diviler"></li> <li><a href="javascript:void(0)">HTML5</a></li> <li><a href="javascript:void(0)">jQuery</a></li> </ul><

42、;/div>.對(duì)齊方式Bootstrap中下拉菜單相對(duì)于父容器默認(rèn)是左對(duì)齊的，如果想讓下拉菜單相對(duì)于父容器進(jìn)行右對(duì)齊，則可以在class=“dropdown-menu”上添加class=“pull-right”或者class=“dropdown-menu-right”當(dāng)然，在Bootstrap中還提供了另外一個(gè)類class=“dropdown-menu-left”，這個(gè)是讓下拉菜單局左對(duì)齊，也就是默認(rèn)的模式。5.6菜單狀態(tài)下拉菜單有兩種狀態(tài)：鼠標(biāo)懸停hover焦點(diǎn)狀態(tài)：focus這兩種狀態(tài)是在鼠標(biāo)操作的時(shí)候出現(xiàn)的，在之前的表單中我們講過(guò)。我們將li的class可以進(jìn)行設(shè)置，如果設(shè)置成為d

43、isabled則是禁用狀態(tài)。按鈕組6.1基本按鈕組按鈕組和下拉菜單一樣，都是依賴bootstrap中的插件。在未編譯的代碼中，按鈕組的使用依賴于button.js，而編譯之后的代碼直接使用Bootstrap.js便可。按鈕組的使用非常的簡(jiǎn)單，其結(jié)構(gòu)也沒(méi)有下拉菜單復(fù)雜，我們只需要在一組<button>按鈕的外層套一個(gè)<div>容器，并且為其添加一個(gè)class=“btn-group”即可。<div class="containter"> <div class="btn-group"> <button ty

44、pe="button" class="btn btn-default"></button> <button type="button" class="btn btn-default"></button> <button type="button" class="btn btn-default"></button> </div></div>6.2工具欄在類似于word的工具欄中的那些按鈕組

45、可使用Bootstrap進(jìn)行編寫(xiě)。如何在按鈕組中使用圖標(biāo)。<div class="containter"> <div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-left"></span> </button> <button type="butt

46、on" class="btn btn-default"> <span class="glyphicon glyphicon-align-center"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-right"></span> </button

47、> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-justify"></span> </button> </div></div>在bootstrap中工具欄使用非常簡(jiǎn)單，只需要將多個(gè)按鈕組（class=“btn-group”）包含進(jìn)另外一個(gè)外層容器（class=“btn-toolbar”）即可。6.3按鈕組的大小默認(rèn)大小：即前面用到的

48、大小Btn-group-lg：大按鈕組Btn-group-sm 小按鈕組Btn-group-xs：超小按鈕組。放的位置在btn-group的后面<div class="containter"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-left">

49、</span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-center"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon

50、glyphicon-align-right"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-justify"></span> </button> </div></div>6.4嵌套分組：Bootstrap中可以使用嵌套分組來(lái)實(shí)現(xiàn)這種下拉式的菜單。代碼如下：<d

51、iv class="containter"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default"> 我的淘寶 </button> <button type="button" class="btn btn-default"> 購(gòu)物車 </button> <button type="bu

52、tton" class="btn btn-default"> 收藏夾 <span class="caret"> </span> </button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">收藏的寶貝</a></li> <li><a href="javascript:void(0)">

53、收藏的店鋪</a></li> </ul> <button type="button" class="btn btn-default"> 商品中心 </button> <button type="button" class="btn btn-default"> 賣家中心 </button> </div></div>6.5垂直分組：網(wǎng)頁(yè)的制作過(guò)程中，不僅需要橫向的排列，也需要垂直的分組按鈕，Bootstrap也提

54、供了比較方便地機(jī)制來(lái)實(shí)現(xiàn)垂直分組。我們需要你使用class=“btn-group-vertical”來(lái)替換之前的class=“btn-group”，而不是在這個(gè)基礎(chǔ)上新加樣式。代碼如下：<div class="containter"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">我的淘寶</button> <button type="but

55、ton" class="btn btn-default">購(gòu)物車</button> <div class="btn-group"> <button type="button" class="btn btn-default">收藏夾 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>

56、;<a href="javascript:void(0)">收藏的寶貝</a></li> <li><a href="javascript:void(0)">收藏的店鋪</a></li> </ul> </div> </div></div>6.6等分按鈕顧名思義就是在一個(gè)容器中按鈕組平均分配其寬度，即如果分組按鈕有4個(gè)按鈕，則每個(gè)按鈕的寬度占25%，等分按鈕效果在移動(dòng)設(shè)備上非常常用，比如導(dǎo)航欄上的按鈕。等分按鈕也被稱為自適應(yīng)的分

57、組按鈕，等分按鈕的使用非常簡(jiǎn)單，和上面的垂直分組按鈕一樣，只需要在原有的class-“btn-group”后面新增“btn-group-justified”即可，代碼如下：<div class="btn-group btn-group-justified"> <a href="btn btn-default">我的淘寶</a> <a href="btn btn-default">購(gòu)物車</a> <a href="btn btn-default">

58、;商品分類</a> <a href="btn btn-default">賣家中心</a></div>6.7按鈕下拉菜單在前面章節(jié)中單獨(dú)講解了下拉菜單，這里所講的下拉菜單和前面章節(jié)講解的下拉菜單在效果上一樣。按鈕試下啦菜單其實(shí)就是對(duì)按鈕使勁進(jìn)行簡(jiǎn)單的封裝，單擊按鈕后會(huì)顯示或者隱藏下拉菜單。在前面的例子中也見(jiàn)到了按鈕下拉菜單的效果。我們看到了一個(gè)向下的箭頭，指示下拉菜單朝下。要想實(shí)現(xiàn)這個(gè)效果只需在button中添加<span class=”caret”></span>即可。如果我們想讓菜單朝上彈起，則需要在

59、class=“btn-group”中新增一個(gè)“dropup”類，這樣就能實(shí)現(xiàn)菜單向上彈起。<div class="containter"> <div class="btn-group dropup"> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 收藏夾 &

60、lt;span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">收藏的寶貝</a></li> <li><a href="javascript:void(0)">收藏的店鋪</a></li> </ul> </div> <

61、;/div></div>有時(shí)候我們看到的下拉菜單圖標(biāo)和按鈕文字是分開(kāi)的，中間使用了豎線分開(kāi)。在Bootstrap中很容易實(shí)現(xiàn)這種效果，只需要使用兩個(gè)按鈕便可。在按鈕組中會(huì)自動(dòng)去掉部分重復(fù)的圓角和邊框，代碼如下：<div class="containter"> <div class="btn-group dropup"> <div class="btn-group"> <button class="btn btn-primary">收藏夾</bu

62、tton> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">收藏的寶貝

63、</a></li> <li><a href="javascript:void(0)">收藏的店鋪</a></li> </ul> </div> </div> </div>在<button>上添加了樣式class=“stn-lg”或者class=“stn-ms”。實(shí)現(xiàn)菜單的大小。<div class="containter"> <div class="btn-group dropup">

64、; <div class="btn-group"> <button class="btn btn-primary btn-lg">收藏夾</button> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> <span class="caret"></span> </

65、button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">收藏的寶貝</a></li> <li><a href="javascript:void(0)">收藏的店鋪</a></li> </ul> </div> </div> </div>導(dǎo)航導(dǎo)航的基礎(chǔ)樣式Bootstrap中的導(dǎo)航都依賴于class=

66、“nav”，但是class=“nav”默認(rèn)是不會(huì)提供導(dǎo)航樣式的，必須和其他附加樣式組合才能呈現(xiàn)出導(dǎo)航，Bootstrap中提供了很多附加的樣式，比如：nav-tabs、nav-pills等。下面的代碼定義了一個(gè)導(dǎo)航，顯示的是一個(gè)tab選項(xiàng)卡的樣式。<div class="containter"> <ul class="nav nav-tabs"> <li> <a href="javascript:void(0)">網(wǎng)頁(yè)</a></li> <li><a href="javascript:void(0)">音樂(lè)</a></li> <li><a href="javascript:void(0)">視頻</a></li