第一次接觸神奇的Bootstrap基礎(chǔ)排版
Bootstrap是Twitter推出的一個簡單靈活的，基于HTML5和CSS3的用于搭建WEB前端頁面的html、css、javascript工具集。擁有友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等特點。Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單。
1.Bootstrap下載
官網(wǎng)：http://getbootstrap.com/；新手入門：http://getbootstrap.com/getting-started/
我們可以在官網(wǎng)下載到Bootstrap，Bootstrap的源碼，如果不想下載，還可以使用Bootstrap提供的CDN。
2.Bootstrap文件結(jié)構(gòu)
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3.Bootstrap的HTML標(biāo)準(zhǔn)模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 在IE運行最新的渲染模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 初始化移動瀏覽顯示，width=device-width寬度等于移動設(shè)備的寬度，initial-scale=1設(shè)置縮放比例 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML標(biāo)準(zhǔn)模板</title> <!-- 引入Bootstrap的核心CSS --> <link rel="stylesheet" > <!-- 你自己的樣式文件 --> <link href="css/your-style.css" rel="stylesheet"> <!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- 放置在文檔的結(jié)尾，使頁面加載速度更快 --> <!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
4.Bootstrap的標(biāo)題
和普通的HTML頁面一樣，Bootstrap定義標(biāo)題也是使用標(biāo)簽h1到h6，只不過Bootstrap覆蓋了其默認(rèn)的樣式，使其在所有瀏覽器下顯示的效果是一樣的，定義的具體規(guī)則如下表所示：
<!--Bootstrap中的標(biāo)題--> <h1>標(biāo)題一</h1> <h2>標(biāo)題二</h2> <!--Bootstrap中使用了<small>標(biāo)簽來制作副標(biāo)題--> <h1>標(biāo)題一<small>副標(biāo)題</small></h1> <h2>標(biāo)題二<small>副標(biāo)題</small></h2> <!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式--> <div class="h1">標(biāo)題一</div> <div class="h2">標(biāo)題二</div> <div class="h3">標(biāo)題三</div>
注意：副標(biāo)題行高都是1，font-weight不加粗，顏色為灰色（#999）；h1~h3的副標(biāo)題，大小為標(biāo)題的65%，h4~h6的副標(biāo)題，大小為標(biāo)題的75%；詳細(xì)代碼請參閱bootstrap.css文件中第407行~第443行。
5.Bootstrap的內(nèi)容
1）強調(diào)內(nèi)容
在實際項目中，對于一些重要的文本，希望突出強調(diào)的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
通過添加類名“.lead”讓一個段落p突出顯示，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應(yīng)的處理。用法如下：
<p>普通文本</p>
<p class="lead">強調(diào)文本</p>
2）通過顏色來表示強調(diào)
例如：
<!--下面普通文本為褐色-->
<p class="text-danger">普通文本</p>
3）粗體和斜體
粗體使用b標(biāo)簽或strong標(biāo)簽來實現(xiàn)；斜體使用em標(biāo)簽或i標(biāo)簽來實現(xiàn)。
<!--粗體--> <p>普通文本<b>粗體</b>普通文本</p> <p>普通文本<strong>粗體</strong>普通文本</p> <!--斜體--> <p>普通文本<em>斜體</em>普通文本</p> <p>普通文本<i>斜體</i>普通文本</p>
4）文本對齊
Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格：
<p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">我兩端對齊</p>
6.Bootstrap的列表
Bootstrap根據(jù)平時的使用情形提供了六種形式的列表：普通列表、有序列表、去點列表、內(nèi)聯(lián)列表、定義列表、水平定義列表。
1）普通列表
<!--普通列表--> <ul> <li>普通列表1</li> <li>普通列表2</li> </ul>
2）有序列表
<!--有序列表--> <ol> <li>有序列表1</li> <li>有序列表2</li> </ol> <!--有序列表嵌套--> <ol> <li>有序列表1</li> <li>有序列表2 <ol> <li>有序列表2.1</li> <li>有序列表2.2</li> </ol> </li> <li>有序列表3</li> </ol>
3）去點列表
給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。
<ol class="list-unstyled"> <li>有序列表1</li> <li>有序列表2</li> </ol>
4）內(nèi)聯(lián)列表（為制作水平導(dǎo)航而生）
像去點列表一樣，通過添加類名“.list-inline”來實現(xiàn)內(nèi)聯(lián)列表，把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。
<ul class="list-inline"> <li>導(dǎo)航欄條目1</li> <li>導(dǎo)航欄條目2</li> </ul>
5）定義列表
Bootstrap定義列表只是調(diào)整了行間距，外邊距和字體加粗效果。
<dl> <dt>北京</dt> <dd>中國的首都。</dd> <dt>上海</dt> <dd>國家中心城市，超大城市。</dd> </dl>
6）水平定義列表
水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給dl標(biāo)簽添加類名“.dl-horizontal”給定義列表實現(xiàn)水平顯示效果。
<dl class="dl-horizontal"> <dt>北京</dt> <dd>中國的首都。</dd> <dt>上海</dt> <dd>國家中心城市，超大城市。</dd> </dl>
7.Bootstrap的表格
Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格。具體如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基礎(chǔ)表格</title> <link rel="stylesheet" > </head> <body> <h3>基礎(chǔ)表格</h3> <!-- 主要源碼查看bootstrap.css文件第1402行～第1441行 --> <table class="table"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> <h3>斑馬線表格</h3> <!-- 主要源碼查看bootstrap.css文件第1465行~第1468行 --> <table class="table table-striped"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> <h3>帶邊框的表格</h3> <!-- 主要源碼查看bootstrap.css文件第1450行~第1464行 --> <table class="table table-bordered"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> <h3>鼠標(biāo)懸浮高亮的表格</h3> <!-- 主要源碼查看bootstrap.css文件第1469行~第1472行 --> <table class="table table-striped table-bordered table-hover"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> <h3>緊湊型表格</h3> <!-- 主要源碼查看bootstrap.css文件第1442行~第1449行 --> <table class="table table-condensed"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> <h3>響應(yīng)式表格</h3> <!-- Bootstrap提供了一個類名為.table-responsive的容器，置于此容器的表格就具有響應(yīng)式效果 --> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr><th>表格標(biāo)題</th><th>表格標(biāo)題</th><th>表格標(biāo)題</th></tr> </thead> <tbody> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> <tr><td>表格單元格</td><td>表格單元格</td><td>表格單元格</td></tr> </tbody> </table> </div> </body> </html>
這部分代碼包含了Bootstrap常用的表格，效果圖如下所示：
Bootstrap還為表格的行元素tr提供了五種不同的類名（對應(yīng)的源碼，請查看bootstrap.css文件中第1484行~第1583行），每種類名控制了行的不同背景顏色，具體說明如下表所示：
其使用非常的簡單，只需要在元素中添加上表對應(yīng)的類名，就能達(dá)到效果：
<tr class="active"><td>…</td></tr>
注意：
1.要實現(xiàn)懸浮狀態(tài)，需要在<table>標(biāo)簽上加入table-hover類。
2.除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
系列文章：
第一次接觸神奇的Bootstrap網(wǎng)格系統(tǒng)http://www.dhdzp.com/article/89333.htm
第一次接觸神奇的Bootstrap表單http://www.dhdzp.com/article/89330.htm
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js基于canvas實現(xiàn)時鐘組件的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript經(jīng)典案例之簡易計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
在JavaScript中計算兩個十進制數(shù)的和,有時候會出現(xiàn)令人驚訝的結(jié)果,相信這個大家也都知道了,下面這篇文章主要給大家介紹了關(guān)于解決js數(shù)字精度丟失問題的相關(guān)資料,需要的朋友可以參考下2022-08-08
本文主要分享了原生js實現(xiàn)焦點輪播圖效果的示例代碼，并解析了實例中的注意點。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
由于安全方面的考慮，Javascript被限制了跨域訪問的能力，但是有時候我們希望能夠做一些合理的跨域訪問的事情，那么怎么辦呢？2009-02-02
js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns
js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns...2007-11-11
Bootstrap每天必學(xué)之折疊，本文向大家講解了Bootstrap折疊操作，感興趣的小伙伴們可以參考一下2016-04-04
當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)2013-01-01
每個微信小程序都可以有自己的本地緩存，本篇文章主要介紹了微信小程序-詳解數(shù)據(jù)緩存，可以通過函數(shù)可以對本地緩存進行設(shè)置、獲取和清理，有興趣的可以了解一下。2016-11-11
Clipboard?API?是一組用于在瀏覽器中操作剪貼板的?JavaScript?API,它允許開發(fā)者在網(wǎng)頁上讀取和寫入剪貼板內(nèi)容,實現(xiàn)復(fù)制、剪切和粘貼等功能,這篇文章主要介紹了JS實現(xiàn)復(fù)制粘貼文字及圖片功能,需要的朋友可以參考下2024-07-07