Bootstrap之排版

標題

1.  h1

     .h1

     <small>

 

強調內容

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

 

粗體

粗體就是給文本加粗，在普通的元素中我們一般通過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）

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

 

文本對齊風格

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根據平時的使用情形提供了六種形式的列表：

   ☑  普通列表

   ☑  有序列表

   ☑  去點列表

   ☑  內聯列表

   ☑  描述列表

   ☑  水平描述列表

在Bootstrap中列表也是可以嵌套的。

通過給無序列表添加一個類名“ .list-unstyled”,這樣就可以去除默認的列表樣式的風格，同時還將列表默認的 左邊內距也 清０。

注意：類名“ .list-unstyled”是添加在 ol ul 等上面的，而不是在 li 上面

 

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

注意：類名“ .list-inline”是添加在 ol ul 等上面的，而不是在 li 上面

 

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

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

只有屏幕 大於768px的時候，添加類名“ .dl-horizontal”才具有水平定義列表效果

當標題寬度超過160px時，將會顯示三個省略號

 

代碼

一般在個人博客上使用的較為頻繁，用於顯示代碼的風格。在Bootstrap主要提供了 三種代碼風格：
1、使用 <code></code>來顯示單行內聯代碼
2、使用 <pre></pre>來顯示多行塊代碼
3、使用 <kbd></kbd>來顯示用戶輸入代碼

 

在使用代碼時，用戶可以根據具體的需求來使用不同的類型：
1、 <code>：一般是針對於 單個單詞或單個句子的代碼
2、 <pre>：一般是針對於 多行代碼（也就是成塊的代碼）
3、 <kbd>:一般是表示用 戶要通過鍵盤輸入的內容

 

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

 

你只需要在pre標簽上添加類名“ .pre-scrollable”，就可以控制代碼塊區域最大高度為 340px，一旦超出這個高度，就會在 Y軸出現滾動條。

 

表格

Bootstrap為表格提供了 1種基礎樣式和 4種附加樣式以及 1個支持響應式的表格。主要包括：

  ☑  .table：基礎表格

  ☑  .table-striped：斑馬線表格

  ☑  .table-bordered：帶邊框的表格

  ☑  .table-hover：鼠標懸停高亮的表格

  ☑  .table-condensed：緊湊型表格

  ☑  .table-responsive：響應式表格

注意：類名是添加在 table 上面的，而且都需要 .table 這個類。

 

“.table”雖然是基礎表格，但也修改了默認表格的樣式，主要有三個作用：

  ☑  給表格設置了margin-bottom:20px以及設置單元內距

  ☑  在thead底部設置了一個2px的淺灰實線

  ☑  每個單元格頂部設置了一個1px的淺灰實線

 

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

類名	描述
.active	表示當前活動的信息
.success	表示成功或者正確的行為
.info	表示中立的信息或行為
.warning	表示警告，需要特別注意
.danger	表示危險或者可能是錯誤的行為

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

 

來自:      http://www.imooc.com/learn/141