Bootstrap前端框架[精校版本]

1、Bootstrap標題（一）Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽到,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：通過比較可以發(fā)現(xiàn)，Bootstrap標題樣式進行了以下顯著的優(yōu)化重置：1、重新設(shè)置了margin-top和margin-bottom的值， h1h3重置后的值都是20px；h4h6重置后的值都是10px。2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，

2、h4=18px，h5=14px和h6=12px。標題（二）除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時顏色被設(shè)置為灰色（#999）。2、由于內(nèi)的文本字體在h1h3內(nèi)，其大小都設(shè)置為當(dāng)前字號的65%；而在h4h6內(nèi)的字號都設(shè)置為當(dāng)前字號的75%；詳細代碼請參閱bootstrap.css文件中第407行第443行。h1 small,.h1 small,h2 small,.

3、h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small font-size: 65%;h4,.h4,h5,.h5,h6,.h6 margin-top: 10px; margin-bottom: 10px;h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small font-size: 75%;

4、段落（正文文本）段落是排版中另一個重要元素之一。在Bootstrap中為文本設(shè)置了一個全局的文本樣式（這里所說的文本是指正文文本）：1、全局文本字號為14px(font-size)。2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數(shù)或許會有疑惑，其實他是通過LESS編譯器計算出來的，當(dāng)然Sass也有這樣的功能)。3、顏色為深灰色（#333）；4、字體為Helvetica Neue, Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文并不太合適，但在實際項目中，大家可以根據(jù)自己的需求進行重置，在

5、此我們不做過多闡述，我們回到這里。該設(shè)置都定義在元素上，由于這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。/*源碼請查看bootstrap.css文件中第274行280行*/body font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;另外在Bootstrap中，為了讓段落p元素之間具有一定的間距，便于用戶閱讀文本，特意設(shè)置了p元素的ma

6、rgin值（默認情況之下，p元素具有一個上下外邊距，并且保持一個行高的高度）：/*源碼請查看bootstrap.css文件中第467行469行*/p margin: 0 0 10px;如果你對CSS預(yù)處理器有所了解，那么你完全可以根據(jù)Bootstrap提供的預(yù)編譯版本LESS(或者Sass)進行自定義排版設(shè)置。在Bootstrap中，排版設(shè)置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：LESS版本：font-size-base: 14px; line-height-base: 1.428571429; / 20/14Sass版

7、本：$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; / 20/14第一條語句用于設(shè)置字體大小，第二條語句用于設(shè)置行高。系統(tǒng)默認使用這兩個值產(chǎn)生整個頁面相應(yīng)的margin、padding和line-height的值。換句話說，你只需要修改這兩個變量的值，然后重新編譯，就可以自定義自己的Bootstrap排版樣式。（有興趣的同學(xué)可以嘗試一下，此處對于LESS或Sass版本運用不做過多闡述）。強調(diào)內(nèi)容在實際項目中，對于一些重要的文本，希望突出強調(diào)的部分都會做另外的樣式處理。Bootstrap同樣對這部分

8、做了一些輕量級的處理。如果想讓一個段落p突出顯示，可以通過添加類名“.lead”實現(xiàn)，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應(yīng)的處理。用法如下：我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。效果查看最右側(cè)結(jié)果窗口?！?lead”對應(yīng)的樣式如下：/*源碼查看bootstrap.css文件第470行480行*/.lead margin-bottom: 20px;font-size: 16px;font-weight: 200;line-height: 1.4;medi

9、a (min-width: 768px) /*大中型瀏覽器字體稍大*/.lead font-size: 21px; 除此之外，Bootstrap還通過元素標簽:、和給文本做突出樣式處理。/*源碼查看bootstrap.css文件第55行第58行*/b,strong font-weight: bold; /*文本加粗*/*源碼查看bootstrap.css文件第481行第484行*/small,.small font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差不多12px*/*源碼查看bootstrap.css第485行第487行*/cite font-st

10、yle: normal;粗體粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設(shè)置為bold關(guān)鍵詞給文本加粗。在Bootstrap中，可以使用和標簽讓文本直接加粗。/*源碼查看bootstrap.css文件第55行第58行*/b,strong font-weight: bold; /*文本加粗*/例如，下面的代碼使用標簽定義了強調(diào)文本：我在學(xué)習(xí)Bootstrap，我要掌握Bootstrap的所有知識。斜體在排版中，除了用加粗來強調(diào)突出的文本之外，還可以使用斜體。斜體類似于加粗一樣，除了可以給元素設(shè)置樣式font-style值為italic實現(xiàn)之外，在Bootstrap中還可以

11、通過使用標簽或來實現(xiàn)。例如，下面的代碼使用了和標簽定義了強調(diào)文本：我在慕課網(wǎng)上跟大漠一起學(xué)習(xí)Bootstrap的使用。我一定要學(xué)會Bootstrap。強調(diào)相關(guān)的類在Bootstrap中除了使用標簽、等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強調(diào)類名（類似前面說的“.lead”）,這些強調(diào)類都是通過顏色來表示強調(diào)，具本說明如下： .text-muted：提示，使用淺灰色（#999） .text-primary：主要，使用藍色（#428bca） .text-success：成功，使用淺綠色(#3c763d) .text-info：通知信息，使用淺藍色（#317

12、08f） .text-warning：警告，使用黃色（#8a6d3b） .text-danger：危險，使用褐色（#a94442）具本源碼查看bootstrap.css文件第500行第532行：.text-muted color: #999;.text-primary color: #428bca;a.text-primary:hover color: #3071a9;.text-success color: #3c763d;a.text-success:hover color: #2b542c;.text-info color: #31708f;a.text-info:hover color

13、: #245269;.text-warning color: #8a6d3b;a.text-warning:hover color: #66512c;.text-danger color: #a94442;a.text-danger:hover color: #843534;文本對齊風(fēng)格在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現(xiàn)文本的對齊風(fēng)格的設(shè)置。其中主要有四種風(fēng)格： 左對齊，取值left 居中對齊，取值center 右對齊，取值right 兩端對齊，取值justify為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格： .text

14、-left：左對齊 .text-center：居中對齊 .text-right：右對齊 .text-justify：兩端對齊具體源碼查看bootstrap.css文件第488行第499行：.text-left text-align: left;.text-right text-align: right;.text-center text-align: center;.text-justify text-align: justify;例如下面的四行代碼，分別定義文本的四種不同的對齊風(fēng)格：我居左我居中我居右我兩端對齊特別聲明：目前兩端對齊在各瀏覽器下解析各有不同，特別是應(yīng)用于中文文本的時候。所以項

15、目中慎用。列表-簡介在HTML文檔中，列表結(jié)構(gòu)主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：無序列表 有序列表 定義列表 Bootstrap根據(jù)平時的使用情形提供了六種形式的列表： 普通列表 有序列表 去點列表 內(nèi)聯(lián)列表 描述列表 水平描述列表接下來，我們一起來學(xué)習(xí)Bootstrap提供的這六種列表的使用方法。列表-去點列表小伙伴們可以看到，在Bootstrap中默認情況下無序列表和有序列表是帶有項目符號的，但在實際工作中很多時候，我們的列表是不需要這個編號的，比如說用無序列表做導(dǎo)航的時候。Bootstrap為眾多開發(fā)者考慮的非常周道，通過給無序列表添加一個類名“.list

16、-unstyled”,這樣就可以去除默認的列表樣式的風(fēng)格。/*源碼請查看bootstrap.css文件第580行第583行*/.list-unstyled padding-left: 0;list-style: none;從示例中可以看出，除了項目編號之外，還將列表默認的左邊內(nèi)距也清了。列表-內(nèi)聯(lián)列表Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現(xiàn)內(nèi)聯(lián)列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。/*源碼查看bootstrap.css文件第584行第593行*/.list-inline

17、padding-left: 0;margin-left: -5px;list-style: none;.list-inline li display: inline-block;padding-right: 5px;padding-left: 5px;看個示例： W3cplus Blog CSS3 jQuery PHP列表-水平定義列表水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給添加類名“.dl-horizontal”給定義列表實現(xiàn)水平顯示效果。/*源碼請查看bootstrap.css文件第608行第621行*/media (min-width: 768px) .dl-horizon

18、tal dt float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;white-space: nowrap; .dl-horizontal dd margin-left: 180px; 此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現(xiàn)主要方式：1、將dt設(shè)置了一個左浮動，并且設(shè)置了一個寬度為160px2、將dd設(shè)置一個margin-left的值為180px，達到水平的效果3

19、、當(dāng)標題寬度超過160px時，將會顯示三個省略號其用法如下： W3cplus 一個致力于推廣國內(nèi)前端行業(yè)的技術(shù)博客。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿，努力提供高質(zhì)量前端技術(shù)博文 慕課網(wǎng) 一個專業(yè)的，真心實意在做培訓(xùn)的網(wǎng)站 我來測試一個標題，我來測試一個標題 我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果寬屏下的效果（屏幕大于768px）：當(dāng)你縮小你的瀏覽器屏幕時，水平定義列表將回復(fù)到原始的狀態(tài)。本節(jié)內(nèi)容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用于顯示代碼的風(fēng)格。在Bootstrap主要提供了三種代碼風(fēng)格：1、使用來顯示單行內(nèi)聯(lián)代碼2、使用來顯示多行塊代碼3、使用來

20、顯示用戶輸入代碼預(yù)編譯版本的Bootstrap將代碼的樣式單獨提取出來：1、LESS版本，請查閱code.less文件2、Sass版本，請查閱_code.scss文件編譯出來的CSS代碼請查閱bootstrap.css文件第688行第730行，由于代碼太長，此處不一一列舉。在使用代碼時，用戶可以根據(jù)具體的需求來使用不同的類型：1、：一般是針對于單個單詞或單個句子的代碼2、：一般是針對于多行代碼（也就是成塊的代碼）3、:一般是表示用戶要通過鍵盤輸入的內(nèi)容雖然不同的類型風(fēng)格不一樣，但其使用方法是類似的。code風(fēng)格：Bootstrap的代碼風(fēng)格有三種：<code>、<pre>

21、;和<kbd>pre風(fēng)格：<ul><li>.</li><li>.</li><li>.</li></ul>kbd風(fēng)格：請輸入ctrl+c來復(fù)制代碼，然后使用ctrl+v來粘貼代碼不管使用哪種代碼風(fēng)格，在代碼中碰到小于號（)使用“>”來替代。而且對于代碼塊風(fēng)格，標簽前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標簽時，就控制好，例如查看右側(cè)代碼編輯器上的15-19行。代碼（二）正如前面所示，元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓

22、其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條。/*源碼請查看bootstrap.css第731行第734行*/.pre-scrollable max-height: 340px;overflow-y: scroll;友情提示：如果您了解LESS或Sass這樣的CSS預(yù)定定義處理器，你完全可以通過code.less或者_code.scss文件修改樣式，然后重新編譯，你就可以得到屬于自己的代碼樣式風(fēng)格。表格表格是Boot

23、strap的一個基礎(chǔ)組件之一，Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格。在使用Bootstrap的表格過程中，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格，在接下來的內(nèi)容中，我們會詳細介紹Bootstrap的表格使用。同樣的，如果你對CSS預(yù)處理器熟悉，你可以使用Bootstrap提供的預(yù)處理版本： LESS版本，對應(yīng)的文件是tables.less Sass版本，對應(yīng)的文件是_tables.scss如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行第1630行中可以查閱到所有有關(guān)于table的樣式代碼。由于代碼太長，此處

24、不一一列舉。剛已經(jīng)說了，Bootstrap為表格不同的樣式風(fēng)格提供了不同的類名，主要包括： .table：基礎(chǔ)表格 .table-striped：斑馬線表格 .table-bordered：帶邊框的表格 .table-hover：鼠標懸停高亮的表格 .table-condensed：緊湊型表格 .table-responsive：響應(yīng)式表格表格-表格行的類Bootstrap還為表格的行元素提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：其使用非常的簡單，只需要在元素中添加上表對應(yīng)的類名，就能達到你自己需要的效果： 對應(yīng)的源碼，請查看bootstrap.css文件中第1

25、484行第1583行。特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。注意要實現(xiàn)懸浮狀態(tài)，需要在標簽上加入table-hover類。如下代碼：表格-基礎(chǔ)表格大家對表格并不太陌生，但對于Bootstrap中的表格如何使用，或許還有點陌生，接下來的內(nèi)容，將根據(jù)不同的表格類型向大家介紹Bootstrap表格的實際使用方法。對表格的結(jié)構(gòu)，跟我們平時使用表格是一樣的：表格標題表格單元格 如無特別聲明，下

26、面介紹表格類型的時候，結(jié)構(gòu)都是類似上面的代碼?；A(chǔ)表格在Bootstrap中，對于基礎(chǔ)表格是通過類名“.table”來控制。如果在元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格：Bootstrap的基礎(chǔ)表格，大致長得像下圖所示的樣子：主要源碼查看bootstrap.css文件第1402行第1441行，由于代碼太長，此處不一一列舉?！?table”主要有三個作用： 給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距 在thead底部設(shè)置了一個2px的淺灰實線 每個單元格頂部設(shè)置了一個1

27、px的淺灰實線表格-斑馬線表格有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在的基礎(chǔ)上增加類名“.table-striped”即可：其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來實現(xiàn)，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。源碼請查看bootstrap.css文件第1465行第1468行：.table-striped tbody tr:nth-child(odd) td,.table-

28、striped tbody tr:nth-child(odd) th background-color: #f9f9f9;表格-帶邊框的表格基礎(chǔ)表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格基礎(chǔ)上添加一個“.table-bordered”類名即可： 樣式如下圖所示：其源碼可以查看bootstrap.css文件第1450行第1464行：.table-bordered border: 1px solid #ddd;

29、/*整個表格設(shè)置邊框*/.table-bordered thead tr th,.table-bordered tbody tr th,.table-bordered tfoot tr th,.table-bordered thead tr td,.table-bordered tbody tr td,.table-bordered tfoot tr td border: 1px solid #ddd; /*每個單元格設(shè)置邊框*/.table-bordered thead tr th,.table-bordered thead tr td border-bottom-width: 2px;/*

30、表頭底部邊框*/表格-鼠標懸浮高亮的表格當(dāng)鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現(xiàn)這種表格效果。鼠標懸停高亮的表格使用也簡單，僅需要元素上添加類名“table-hover”即可：效果圖如下：從效果圖中可以看出，當(dāng)你鼠標懸浮在某一單元格上時，單元格所在行的背景色都會變成淺灰色。鼠標懸浮高亮的效果主要是通過“hover”事件來實現(xiàn)，設(shè)置了“tr:hover”時的th、td的背景色為新顏色。其源碼請查看bootstrap.cs

31、s文件中第1469行第1472行：.table-hover tbody tr:hover td,.table-hover tbody tr:hover th background-color: #f5f5f5;注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結(jié)合使用：表格-緊湊型表格何謂緊湊型表格，簡單理解，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說，要實現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstr

32、ap中，通過類名“table-condensed”重置了單元格內(nèi)距值。緊湊型表格的運用，也只是需要在基礎(chǔ)上添加類名“table-condensed”：效果圖如下：從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大，因為只是將單元格的內(nèi)距由8px調(diào)至5px。源碼請查看bootstrap.css文件第1442行第1449行：.table-condensed thead tr th,.table-condensed tbody tr th,.table-condensed tfoot tr th,.table-condensed thead tr td,.table-conde

33、nsed tbody tr td,.table-condensed tfoot tr td padding: 5px;正如上一小節(jié)中懸浮高亮表格中所講解的，在Bootstrap中制作表格中，可以將上面幾種表格樣式結(jié)合在一起使用，從而制作出更為精美的表格。結(jié)合的方法也很簡單，就是在基礎(chǔ)上添加你需要的表格樣式類型。另外從上面的示例中大家可能也發(fā)現(xiàn)了，不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的元素中一定不能缺少類名“table”。表格-響應(yīng)式表格隨著各種手持設(shè)備的出現(xiàn)，要想讓你的Web頁面適合千羅萬像的設(shè)備瀏覽，響應(yīng)式設(shè)計的呼聲越來越高。在Bo

34、otstrap中也為表格提供了響應(yīng)式的效果，將其稱為響應(yīng)式表格。Bootstrap提供了一個容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果，然后將置于這個容器當(dāng)中，這樣表格也就具有響應(yīng)式效果。Bootstrap中響應(yīng)式表格效果表現(xiàn)為：當(dāng)你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條。當(dāng)你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條就會消失。示例如下： 運行效果如下：（寬屏效果）（窄屏效果）基礎(chǔ)表單表單主要功能是用來與用戶做交流的一個網(wǎng)頁控件，良好的表單設(shè)計能夠讓網(wǎng)頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、

35、單選按鈕、復(fù)選按鈕、文本域和按鈕等。其中每個控件所起的作用都各不相同，而且不同的瀏覽器對表單控件渲染的風(fēng)格都各有不同。同樣，表單也是Bootstrap框架中的核心內(nèi)容，下面向大家介紹Bootstrap框架中表單的制作。表單源碼查詢Bootstrap框架的表單，其源碼占據(jù)了大量的代碼，同樣的，根據(jù)不同的Bootstrap版本，你可以輕松獲取相應(yīng)的源碼： LESS版本：對應(yīng)源文件forms.less Sass版本：對應(yīng)源文件_forms.scss編譯后的Bootstrap版本，可以查閱bootstrap.css文件第1630行第1991行不過在樣式表中，還對表單做了一些初始化，詳細代碼可以查閱bo

36、otstrap.css文件第110行第178行。對于基礎(chǔ)表單，Bootstrap并未對其做太多的定制性效果設(shè)計，僅僅對表單內(nèi)的fieldset、legend、label標簽進行了定制。如：/*源碼請查閱bootstrap.css文件第1631行第1652行*/fieldset min-width: 0;padding: 0;margin: 0;border: 0;legend display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;bor

37、der: 0;border-bottom: 1px solid #e5e5e5;label display: inline-block;margin-bottom: 5px;font-weight: bold;主要將這些元素的margin、padding和border等進行了細化設(shè)置。當(dāng)然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名form-control，也就是說，如果這幾個元素使用了類名“form-control”，將會實現(xiàn)一些設(shè)計上的定制效果。1、寬度變成了100%2、設(shè)置了一個淺灰色（#ccc）的邊框3、具

38、有4px的圓角4、設(shè)置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化5、設(shè)置了placeholder的顏色為#999詳細請查閱bootstrap.css文件第1690行第1732行。運行效果如下或查看右側(cè)結(jié)果窗口：內(nèi)聯(lián)表單有時候我們需要將表單的控件都在一行內(nèi)顯示，類似這樣的：在Bootstrap框架中實現(xiàn)這樣的表單效果是輕而易舉的，你只需要在元素中添加類名“form-inline”即可。內(nèi)聯(lián)表單實現(xiàn)原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）。/*源碼請查閱bootstrap.css文件第1928行第1962行*/

39、如果你要在input前面添加一個label標簽時，會導(dǎo)致input換行顯示。如果你必須添加這樣的一個label標簽，并且不想讓input換行，你需要將label標簽也放在容器“form-group”中，如： Email address 接下來，我們還是以實例說話： 郵箱 密碼 記住密碼進入郵箱運行效果如下或查看右側(cè)結(jié)果窗口：(查看效果需要把結(jié)果窗口設(shè)置為全屏)回過頭來看示例，你或許會問，為什么添加了label標簽，而且沒有放置在”form-group”這樣的容器中，input也不會換行；還有l(wèi)abel標簽怎么沒顯示出來。如果你仔細看，在label標簽運用了一個類名“sr-only”，標簽沒顯示

40、就是這個樣式將標簽隱藏了。/*源碼請查閱bootstrap.css文件第342行第350行*/.sr-only position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;注意：那么Bootstrap為什么要這么做呢？這樣不是多此一舉嗎？其實不是的，如果沒有為輸入控件設(shè)置label標簽，屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優(yōu)點之處，為殘障人員進行了一定的考慮。表單控件(輸入框input)每一個表單都是

41、由表單控件組成。離開了控件，表單就失去了意義。接下來的我們簡單的來了解Bootstrap框架中表單控件的相關(guān)知識。單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過inputtype=“?”(其中?號代表type類型，比如說text類型，對應(yīng)的是inputtype=“text”)的形式來定義樣式的。為了讓控件在各種表單風(fēng)格中樣式不出錯，需要添加類名“form-control”，如：運行效果如下或查看右側(cè)結(jié)果窗口:表單控件(下拉選

42、擇框select)Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設(shè)置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統(tǒng)一的樣式風(fēng)格。如： 1 2 3 4 5 1 2 3 4 5 運行效果如下或查看右側(cè)結(jié)果窗口:表單控件(文本域textarea)文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以設(shè)置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設(shè)置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。 運行效果如下或查看右側(cè)結(jié)果窗口：表單控件(復(fù)選框checkbox和單選擇按鈕radio)Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標簽配合使用會出現(xiàn)一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發(fā)人員無需考慮太多，只需要按照下面的方法使用即可。記住密碼喜歡不喜歡運行效果如下或查看右側(cè)結(jié)果窗口（案例1）：從上面的示例，我們可以得知：1、不管是checkbox還是radio都使用labe