第一次接觸神奇的Bootstrap基礎(chǔ)排版

更新時(shí)間：2016年07月26日 10:15:15 作者：smartbetter

第一次接觸神奇的Bootstrap基礎(chǔ)排版，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡(jiǎn)單，感興趣的小伙伴們可以參考一下

Bootstrap是Twitter推出的一個(gè)簡(jiǎn)單靈活的，基于HTML5和CSS3的用于搭建WEB前端頁面的html、css、javascript工具集。擁有友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等特點(diǎn)。Bootstrap讓W(xué)eb開發(fā)更迅速、更簡(jiǎn)單。

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運(yùn)行最新的渲染模式 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 初始化移動(dòng)瀏覽顯示，width=device-width寬度等于移動(dòng)設(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">
 <!-- 以下兩個(gè)插件用于在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ì)代碼請(qǐng)參閱bootstrap.css文件中第407行~第443行。

5.Bootstrap的內(nèi)容

1）強(qiáng)調(diào)內(nèi)容

在實(shí)際項(xiàng)目中，對(duì)于一些重要的文本，希望突出強(qiáng)調(diào)的部分都會(huì)做另外的樣式處理。Bootstrap同樣對(duì)這部分做了一些輕量級(jí)的處理。

通過添加類名“.lead”讓一個(gè)段落p突出顯示，其作用就是增大文本字號(hào)，加粗文本，而且對(duì)行高和margin也做相應(yīng)的處理。用法如下：

普通文本
強(qiáng)調(diào)文本

2）通過顏色來表示強(qiáng)調(diào)

例如：

普通文本

3）粗體和斜體

粗體使用b標(biāo)簽或strong標(biāo)簽來實(shí)現(xiàn)；斜體使用em標(biāo)簽或i標(biāo)簽來實(shí)現(xiàn)。

<!--粗體-->
<p>普通文本<b>粗體</b>普通文本</p>
<p>普通文本<strong>粗體</strong>普通文本</p>

<!--斜體-->
<p>普通文本<em>斜體</em>普通文本</p>
<p>普通文本<i>斜體</i>普通文本</p>

4）文本對(duì)齊

Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我兩端對(duì)齊</p>

6.Bootstrap的列表

Bootstrap根據(jù)平時(shí)的使用情形提供了六種形式的列表：普通列表、有序列表、去點(diǎn)列表、內(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）去點(diǎn)列表

給無序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。

<ol class="list-unstyled">
 <li>有序列表1</li>
 <li>有序列表2</li>
</ol>

4）內(nèi)聯(lián)列表（為制作水平導(dǎo)航而生）

像去點(diǎn)列表一樣，通過添加類名“.list-inline”來實(shí)現(xiàn)內(nèi)聯(lián)列表，把垂直列表換成水平列表，而且去掉項(xiàng)目符號(hào)（編號(hào)），保持水平顯示。

<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”給定義列表實(shí)現(xiàn)水平顯示效果。

<dl class="dl-horizontal">
 <dt>北京</dt>
 <dd>中國的首都。</dd>
 <dt>上海</dt>
 <dd>國家中心城市，超大城市。</dd>
</dl>

7.Bootstrap的表格

Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個(gè)支持響應(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提供了一個(gè)類名為.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提供了五種不同的類名（對(duì)應(yīng)的源碼，請(qǐng)查看bootstrap.css文件中第1484行~第1583行），每種類名控制了行的不同背景顏色，具體說明如下表所示：

其使用非常的簡(jiǎn)單，只需要在元素中添加上表對(duì)應(yīng)的類名，就能達(dá)到效果：

注意：
1.要實(shí)現(xiàn)懸浮狀態(tài)，需要在<table>標(biāo)簽上加入table-hover類。
2.除了”.active”之外，其他四個(gè)類名和”.table-hover”配合使用時(shí)，Bootstrap針對(duì)這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時(shí)，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

系列文章：

第一次接觸神奇的Bootstrap網(wǎng)格系統(tǒng)http://chabaoo.cn/article/89333.htm

第一次接觸神奇的Bootstrap表單http://chabaoo.cn/article/89330.htm

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: