3.1 文本

1、標題

HTML 中的所有標題標籤，<h1> 到 <h6> 均可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。
h1……h6標籤
.text-muted:爲副標題設置字體顏色爲#6c757d
<small></small>小標題（副標題）小一號
<big></big>副標題大一號

<div class="container">
	<h3>
		Bootstrap
	  <small class="text-muted">v4.0</small>
	</h3>
	<h3>
		Bootstrap
	  <big class="text-muted">v4.0</big>
	</h3>
</div>

效果：

.display-*:在h標籤中添加該類會爲標題添加更大型、鮮明的標題樣式，有.dispay-1到.dispay-4四種鮮明的標題樣式代碼如下：

<div class="container">
	<h3 class="display-1">Bootstrap</h3>
	<h3 class="display-3">Bootstrap</h3>
	<h3 class="display-4">Bootstrap</h3>
	<h3 class="display-5">Bootstrap</h3>	
</div>

效果：

2、內聯文本元素

Bootstrap爲了達到一些統一風格，美觀的目的，可能會對如下表所示的元素進行強化，但是在使用方法上並沒有什麼區別。

標籤	說明
`<del>`和`<s>`	刪除
`<ins>`和`<u>`	下劃線
`<strong>`和`<b>`	加粗
`<em>`和`<i>`	斜體
<`small>`或`<big>`	加小一號字或加大一號字
`<abbr>`	表示縮略語，鼠標懸停在它上面時會顯示出title的屬性值
`<address>`	表示地址
`<blockquote>`	引用塊，長引用
`<code>`	計算機代碼
`<kbd>`	鍵盤輸入文本
`<samp>`	程序輸出文本
`<pre>`	預格式化文本，其中所有格式將會保留，如空格等
`<var>`	定義變量
`<footer>`和`<cite>`	出處

3、文本對齊方式

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

4、英文大小寫

.text-lowercase：英文全小寫
.text-uppercase：英文全大寫
.text-capitalize：英文單詞首字母大寫

3.2 列表

HTML提供了3種列表默認樣式，如下所述：
◆ 無序列表：使用ul-li來定義
◆ 有序列表：使用ol-li來定義
◆ 定義列表：使用dl-dt-dd來定義
爲了達到統一風格、美觀的目的，Bootsrap對這3種列表默認樣式做了一些改動，但是在使用方法上並不有什麼區別。同時Bootstrap提供了以下兩種樣式來實現特定的列表項。
◆ .list-unstyled：無樣式列表，可以刪除列表前面的列表序號或列表符號
◆ .list-inline：行內樣式列表，列表項會被放在同一行中。值得注意的是，在Bootstrap4中，需要對列表項設置爲".list-inline-item"纔會生效。代碼：

<div class="container">
	<p>普通列表</p>
	<ul>
		<li>炸醬麪</li>
		<li>刀削麪</li>
		<li>擔擔麪</li>
		<li>臊子面</li>
	</ul>
	<p>無樣式列表</p>
	<ul class="list-unstyled">
		<li>炸醬麪</li>
		<li>刀削麪</li>
		<li>擔擔麪</li>
		<li>臊子面</li>
	</ul>	
	<p>行內樣式</p>
	<ul class="list-inline">
		<li><b>面</b></li>
		<li class="list-inline-item">炸醬麪</li>
		<li class="list-inline-item">刀削麪</li>
		<li class="list-inline-item">擔擔麪</li>
		<li class="list-inline-item">臊子面</li>
	</ul>
</div>

效果：

3.3 表格

1、表格樣式

Bootstrap提供了一系列表格樣式，通過這些樣式可以快速開發出樣式美觀的表格。
.table：表格的一個基類，爲每行增加水平分割線和少量的padding
.table-bordered：邊框表格，爲表格的每一個單元格添加邊框線
.table-hover：鼠標高亮，鼠標懸停效果
.table-striped：條紋表格，斑馬線效果，隔行換色

2、響應式表格

.table-responsive 響應式表格，給表格父元素設置響應式，小於768出現邊框
以移動設備爲優先，如果內容不能完全的顯示，會出現滾動條

3、狀態類

//可以單獨設置每一行的背景樣式

<tr class=’active’></tr>

.table-active 鼠標懸停在行或單元格上
.table-success 標識成功或積極的動作
.table-info 標識普通的提示信息或動作
.table-warning 標識警告或需要用戶注意
.table-danger 表示危險或潛在的帶來負面影響的動作
.sr-only 隱藏行

3.4 圖片

1、圖片的樣式

bootstrap提供了一些豐富的圖片樣式供開發者使用，在Bootstrap4中提供了以下類設置圖片的樣式：
.rounded 類：圓角圖片（在Bootstrap4以前使用.img-rounded類）

<img src="…" class="rounded" >

.rounded-circle 類：橢圓圖片（在Bootstrap4以前使用.img-circle類）

<img src="…" class="rounded-circle" >

2、縮略圖處理

在Bootstrap4提供了.img-thumbnail 類用於設置圖片縮略圖(圖片有邊框)。

<img src="…" class="img-thumbnail" >

3、圖片對齊處理

在Bootstrap4中提供了以下兩個類設置圖片的對齊方式：
◆ .float-right 類來設置圖片右對齊
◆ .float-left 類設置圖片左對齊

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

4、響應式圖片

在Bootstrap4中，給圖片添加.img-fluid樣式，或定義max-width: 100%、height:auto;樣式，即可賦得響應式特性，圖片大小會隨着父元素大小同步縮放。而在Bootstrap4以前是給圖片添加.img-responsive樣式。
Bootstrap4中的代碼：

<img src="..." class="img-fluid">

Bootstrap3中的代碼：

<img src="..." class="img-responsive">

3.5 公共樣式

3.5.1 邊框

使用邊框通用定義類來快速設置元素的邊框和邊框半徑，適用於圖像、按鈕或任何其他元素。

1、基本邊框

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

效果：

2、清除邊框

<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>

3、邊框顏色

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

效果：

4、圓角邊框

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

效果：

3.5.2 顏色

1、文本顏色

代碼：

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

效果：

使用我們提供的懸停和焦點狀態（情景）樣式，在鏈接上也能正常使用（呈現），注意：e .text-white、 .text-muted這兩個 class樣式不支持鏈接上使用（沒有鏈接樣式）。

2、背景顏色

代碼：

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

效果：

3.6 表單

3.6.1 表單佈局

1、基礎表單樣式

基礎表單的樣式是堆疊表單 (全屏寬度)，表單控件從上到小顯示。

<form>   
        <label>用戶名</label>
        <input class="form-control" type="text">  
        <label>密碼</label>
        <input  class="form-control" type="password"> 
  </form>

2、行內表單

當表單控年數量較少時，可以使用行內表單，行內表單會讓所有表單控件表現爲inline-block級別的控件，通常用於viewport寬度大於576px的情況下，如果viewport寬度小於576px，則表單樣式會自動變回基礎表單樣式。

<div class="container"> 
  <p>屏幕寬度在大於等於 576px 時纔會水平顯示。如果小於 576px 則會生成堆疊表單。</p>
  <form class="form-inline"> 
        <label>用戶名</label>
        <input class="form-control" type="text">  
        <label>密碼</label>
        <input  class="form-control" type="password">  
  </form>
</div>

3、水平表單

在Bootstrap4之前，label和表單控件通常不是同一行的，如果想要讓label和表單控件在同一行，即生成水平表單，則需要使用“.form-horizontal”類樣式。而在Bootstrap4版本中被棄用了。在實現水平表單時，需要通過“.col-xxx”系列樣式控制lable或者表單控件所佔據的列數，代碼如下：

 <form role="form" > 
	<div class="form-group row"> 
        <label class="col-lg-2">用戶名:</label>
        <div class="col-lg-10"><input type="text" class="form-control col-xs-10" ></div>
    </div> 
    <div class="form-group row"> 
        <label class="col-lg-2">密碼:</label>
        <div class="col-lg-10"><input type="password" class="form-control"></div>
    </div>    
</form>

3.6.2 複選框樣式

1、基礎樣式

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">HTML
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">CSS
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>JavaScript
  </label>
</div>

效果：

2、水平復選框組

.form-check-inline 類可以讓選項顯示在同一行上

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">HTML
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">CSS
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>JavaScript
  </label>
</div>

效果：

3.7 按鈕

<a>、<button> 或 <input> 元素可以作爲按鈕，爲這些元素添加.btn類即作爲按鈕，也可使用Bootstrap 提供的樣式。
使用Bootstrap的自定義按鈕樣式，並廣泛用於表單、對話框等場景中的操作，並支持多種大小、狀態等一系列變量定義。

1、預定義樣式

Bootstrap4提供了以下幾種自定義按鈕樣式：

<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

效果：

2、輪廓按鈕

.btn 在引用中，如果需要一個按鈕，但不需要帶來的巨大的背景顏色，使用.btn-outline-*類。代碼如下：

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

效果：

3、按鈕尺寸

使用 .btn-lg、 .btn-sm

就可以獲得不同尺寸的按鈕。
代碼：

  <button type="button" class="btn btn-success">button</button>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>	
	<button type="button" class="btn btn-secondary btn-sm">Large button</button>

效果：

.btn-block：通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變爲了塊級（block）元素。

4、啓用狀態

.active

5、禁用狀態

.disabled

3 Bootstrap4樣式