Bootstrap 框架-排版

阿新 • • 發佈：2019-02-13

概述

GitHub上這樣介紹 bootstrap：

簡單靈活可用於架構流行的使用者介面和互動介面的 html、css、javascript 工具集。
基於 html5、css3 的 bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的相容性，響應式設計，12列格網，樣式嚮導文件。
自定義 JQuery 外掛，完整的類庫，基於 Less 等。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

標題

Bootstrap 對標題樣式進行了顯著的優化重置。

副標題，使用 <small> 來製作副標題，副標題具有自己獨特的樣式。

行高都是1，而且 font-weight 設定了 normal，變成了常規效果（不加粗），同時顏色被設定為灰色（#999）。
<small> 內的文字字型在 h1-h3 內，其大小都設定為當前字號的 65%；而在 h4-h6 內的字號都設定為當前字號的 75%。

<h1>Bootstrap標題一<small>我是副標題</small></h1>

段落（正文文字）

原始碼預設樣式：

body {
font-family: "Helvetica Neue" 
, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

p {
 margin: 0 0 10px;
}

強調內容

一個段落p突出顯示，可以通過新增類名 lead 實現，其作用就是增大文字字號，加粗文字，而且對行高和margin也做相應的處理。

<p>我是一個普通的段落，我不需要強調顯</p>
<p class="lead">這部分內容需要特別的強調，我和別人長得不一樣</p>

原始碼樣式：

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字型稍大*/
.lead {
font-size: 21px;
  }
}

除此之外，Bootstrap還通過元素標籤: <small>、<strong>、<em> 和 <cite> 給文字做突出樣式處理。

粗體

粗體就是給文字加粗，在普通的元素中我們一般通過 font-weight 設定為 bold 關鍵詞給文字加粗。在 Bootstrap 中，可以使用 <b> 和 <strong> 標籤讓文字直接加粗。

斜體

除了可以給元素設定樣式 font-style 值為 italic 實現之外，在 Bootstrap 中還可以通過使用標籤 <em> 或 <i> 來實現。

強調相關的類

在Bootstrap中除了使用標籤 <strong>、<em> 等說明正文某些字詞、句子的重要性， Bootstrap 還定義了一套類名，這裡稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知資訊，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

<div class="text-danger">.text-danger效果</div>

文字對齊風格

Bootstrap 通過定義四個類名來控制文字的對齊風格：

.text-left：左對齊
.text-center：居中對齊
.text-right：右對齊
.text-justify：兩端對齊

列表

在 HTML 文件中，列表結構主要有三種：有序列表、無序列表和定義列表。

<!--無序列表-->
<ul>
    <li>…</li>
</ul>

<!--有序列表-->
<ol>
    <li>…</li>
</ol>

<!--定義列表-->
<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap 根據平時的使用情形提供了六種形式的列表：

普通列表
有序列表
去點列表
內聯列表
描述列表
水平描述列表

無序列表、有序列表

無序列表和有序列表使用方式和我們平時使用的一樣（無序列表使用 ul，有序列表使用 ol 標籤），在樣式方面，Bootstrap 只是在此基礎上做了一些細微的優化，只是在 margin 上做了一些調整。在 Bootstrap 中列表也是可以巢狀的。

去點列表

通過給無序列表新增一個類名“.list-unstyled”,這樣就可以去除預設的列表樣式的風格。

.list-unstyled {
padding-left: 0;
list-style: none;
}

除了專案編號之外，還將列表預設的左邊內距也清０了。

內聯列表

Bootstrap 像去點列表一樣，通過新增類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉專案符號（編號），保持水平顯示。也可以說內聯列表就是為製作水平導航而生。

原始碼樣式：

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

示例：

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

定義列表

對於定義列表而言，Bootstrap 並沒有做太多的調整，只是調整了行間距，外邊距和字型加粗效果。

<dl>
    <dt>北京</dt>
    <dd>北京是中國的首都，是政治文化集中地</dd>
    <dt>上海</dt>
    <dd>上海號稱東方的巴黎</dd>
</dl>

水平定義列表

水平定義列表就像內聯列表一樣，Bootstrap 可以給 <dl> 新增類名“.dl-horizontal”給定義列表實現水平顯示效果。

程式碼風格

用於顯示程式碼的風格。在 Bootstrap 主要提供了三種程式碼風格：

使用 <code></code> 來顯示單行內聯程式碼，一般是針對於單個單詞或單個句子的程式碼。
使用 <pre></pre> 來顯示多行塊程式碼，一般是針對於多行程式碼（也就是成塊的程式碼）。
使用 <kbd></kbd> 來顯示使用者輸入程式碼，一般是表示使用者要通過鍵盤輸入的內容。

<div>Bootstrap的程式碼風格有三種：
  <code>&lt;code&gt;</code>
  <pre>&lt;pre&gt;</pre>
  <kbd>&lt;kbd&gt;</kbd>
</div>

注意：不管使用哪種程式碼風格，在程式碼中碰到小於號（<）要使用硬編碼“<”來替代，大於號(>)使用“>”來替代。而且對於 <pre> 程式碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。

有時候程式碼太多，而且不想讓其佔有太大的頁面篇幅，就想控制程式碼塊的大小。Bootstrap 也考慮到這一點，你只需要在 pre 標籤上新增類名“.pre-scrollable”，就可以控制程式碼塊區域最大高度為 340px，一旦超出這個高度，就會在 Y 軸出現滾動條。

原始碼：

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

如果您瞭解 LESS 或 Sass 這樣的 CSS 預定定義處理器，你完全可以通過 code.less 或者 _code.scss 檔案修改樣式，然後重新編譯，你就可以得到屬於自己的程式碼樣式風格。

表格

表格是 Bootstrap 的一個基礎元件之一，Bootstrap 為表格提供了1種基礎樣式和4種附加樣式以及1個支援響應式的表格。在使用 Bootstrap 的表格過程中，只需要新增對應的類名就可以得到不同的表格風格。

.table：基礎表格
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：滑鼠懸停高亮的表格
.table-condensed：緊湊型表格
.table-responsive：響應式表格

表格行的類

Bootstrap 還為表格的行元素 <tr> 提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：

表格行顏色類

注意：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap 針對這幾種樣式也做了相應的懸浮狀態的樣式設定，所以如果需要給 tr 元素新增其他顏色樣式時，在”.table-hover”表格中也要做相應的調整。

注意要實現懸浮狀態，需要在<table>標籤上加入 table-hover 類。

基礎表格（table）

對錶格的結構，跟我們平時使用表格是一樣的：

<table>
<thead>
<tr>
<th>表格標題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
     …
</tbody>
</table>

在 Bootstrap 中，對於基礎表格是通過類名“.table”來控制。如果在 <table> 元素中不新增任何類名，表格是無任何樣式效果的。想得到基礎表格，我們只需要在 <table> 元素上新增“.table”類名，就可以得到 Bootstrap 的基礎表格：

<table class="table">
…
</table>

table

“.table”主要有三個作用：

給表格設定了margin-bottom:20px 以及設定單元內距；
在 thead 底部設定了一個 2px 的淺灰實線；
每個單元格頂部設定了一個 1px 的淺灰實線。

斑馬線表格（table-striped）

讓表格帶有背景條紋效果，在 Bootstrap 中實現這種表格效果並不困難，只需要在 <table class="table"> 的基礎上增加類名“.table-striped”即可：

<table class="table table-striped">
…
</table>

其效果與基礎表格相比，僅是在 tbody 隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用 CSS3 的結構性選擇器“:nth-child”來實現，所以對於 IE8 以及其以下瀏覽器，沒有背景條紋效果。

tab-striped

帶邊框的表格（table-bordered）

Bootstrap 出於實際運用，也考慮這種表格效果，即所有單元格具有一條1px 的邊框。
Bootstrap 中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格 <table class="table"> 基礎上新增一個“.table-bordered”類名即可：

<table  class="table table-bordered">
  …
</table>

table-bordered

滑鼠懸浮高亮的表格（table-hover）

當滑鼠懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴使用者正在閱讀表格哪一行的資料。Bootstrap 的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現這種表格效果。

<table class="table table-hover">
…
</table>

緊湊型表格（table-condensed）

何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其他表格的內距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的 內距 padding 的值。那麼在 Bootstrap 中，通過類名“table-condensed”重置了單元格內距值。

<table class="table table-condensed">
…
</table>

table-condensed

注意，不管制作哪種表格都離不開類名“table”。所以大家在使用 Bootstrap 表格時，千萬注意，你的 <table> 元素中一定不能缺少類名“table”。

響應式表格（）

Bootstrap 提供了一個容器，並且此容器設定類名“.table-responsive”,此容器就具有響應式效果，然後將 <table class="table">置於這個容器當中`，這樣表格也就具有響應式效果。

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

Bootstrap 中響應式表格效果表現為：當你的瀏覽器可視區域小於 768px 時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於 768px 時，表格底部水平滾動條就會消失。