1. 容器

.container(固定寬度)或.container-fluid(全屏寬度)。柵格系統等控件都必須放置在容器內。

2. 柵格系統

1. 規則

網格每一行需要放在設置了 .container (固定寬度) 或 .container-fluid(全屏寬度) 類的容器中，這樣就可以自動設置一些外邊距與內邊距。
使用行來創建水平的列組。
內容需要放置在列中，並且只有列可以是行的直接子節點。
預定義的類如 .row 和 .col-sm-4 可用於快速製作網格佈局。
列通過填充創建列內容之間的間隙。這個間隙是通過 .rows 類上的負邊距設置第一行和最後一列的偏移。
網格列是通過跨越指定的 12 個列來創建。例如，設置三個相等的列，需要使用用三個.col-sm-4 來設置。
Bootstrap 3 和 Bootstrap 4 最大的區別在於 Bootstrap 4 現在使用 flexbox（彈性盒子）而不是浮動。 Flexbox 的一大優勢是，沒有指定寬度的網格列將自動設置爲等寬與等高列。

–	超小設備<576px	平板>=576px	桌面顯示器>=768px	大桌面顯示器>=992px	超大桌面顯示器>=1200px
容器最大寬度	None(auto)	540px	720px	960px	1140px
類前綴	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列數量和	12	12	12	12	12
間隙寬度	30px
可嵌套	Yes
列排序	Yes

2. 平板、桌面、大桌面顯示器、超大桌面顯示器

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鳥教程</p>
    </div>
  </div>
</div>

3. 偏移列

偏移列通過 offset-- 類來設置。第一個星號( * )可以是 sm、md、lg、xl，表示屏幕設備類型，第二個星號( * )可以是 1 到 11 的數字。

爲了在大屏幕顯示器上使用偏移，請使用 .offset-md-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。例如：.offset-md-4 是把.col-md-4 往右移了四列格。

示例
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

3. 小工具

1. 邊框

使用border類可以添加或移除邊框

.border、.border-0、.border-right-0、.border-right-0、.border-bottom-0、.border-left-0

2. 邊框顏色

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>

3. 邊框顏色

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

4. 浮動

.float-right 類用於設置元素右浮動， .float-left 設置元素左浮動, .clearfix 類用於清除浮動:

<div class="clearfix">
  <span class="float-left">左浮動</span>
  <span class="float-right">右浮動</span>
</div>

5. 響應式浮動

<div class="float-sm-right">在大於小屏幕尺寸上右浮動</div><br>
<div class="float-md-right">在大於中等屏幕尺寸上右浮動</div><br>
<div class="float-lg-right">在大於大屏幕尺寸上右浮動</div><br>
<div class="float-xl-right">在大於超大屏幕尺寸上右浮動</div><br>
<div class="float-none">沒有浮動</div>

6. 對齊

.mx-auto	.mr-auto	.ml-auto
居中	左對齊	右對齊

7. 寬度

 <p>元素上使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設置寬度:</p>
  <div class="w-25 bg-warning">寬度 25%</div>
  <div class="w-50 bg-warning">寬度 50%</div>
  <div class="w-75 bg-warning">寬度 75%</div>
  <div class="w-100 bg-warning">寬度 100%</div>
  <div class="mw-100 bg-warning">最大寬度 100%</div>

8. 高度

<p>元素上使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設置高度:</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
  </div>

3. 字體

Bootstrap 4 默認的 font-size 爲 16px, line-height 爲 1.5。默認的 font-family 爲 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

  <h1>h1 Bootstrap 標題 (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap 標題 (2rem = 32px)</h2>
  <h3>h3 Bootstrap 標題 (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap 標題 (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap 標題 (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap 標題 (1rem = 16px)</h6>
  
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
  
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>

標籤	描述
h1-h6	定義了所有的 HTML 標題（h1 到 h6）的樣式
Display標題類	Display 標題可以輸出更大更粗的字體樣式: .display-1, .display-2, .display-3, .display-4。
small	small 元素用於字號更小的顏色更淺的文本
mark	使用 mark 元素來高亮文本
abbr	在文本底部的一條虛線邊框
blockquote	引述內容
dl	描述性的列表
code	標記代碼
kbd	鍵盤快捷鍵標記
pre	多行文本

類名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更細的文本
.font-italic	斜體文本
.lead	讓段落更突出
.small	指定更小文本 (爲父元素的 85% )
.text-left	左對齊
.text-center	居中
.text-right	右對齊
.text-justify	設定文本對齊,段落中超出屏幕部分文字自動換行
.text-nowrap	段落中超出屏幕部分不換行
.text-lowercase	設定文本小寫
.text-uppercase	設定文本大寫
.text-capitalize	設定單詞首字母大寫
.initialism	顯示在 abbr 元素中的文本以小號字體展示，且可以將小寫字母轉換爲大寫字母
.list-unstyled	移除默認的列表樣式，列表項中左對齊 (ul 和 ol 中)。這個類僅適用於直接子列表項(如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式)
.list-inline	將所有列表項放置同一行
.pre-scrollable	使 pre 元素可滾動，代碼塊區域最大高度爲340px,一旦超出這個高度,就會在Y軸出現滾動條

4. 顏色

<div class="container">
  <h2>代表指定意義的文本顏色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">執行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危險操作文本。</p>
  <p class="text-secondary">副標題。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">淺灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
  
   <h2>背景顏色</h2>
  <p class="bg-primary text-white">重要的背景顏色。</p>
  <p class="bg-success text-white">執行成功背景顏色。</p>
  <p class="bg-info text-white">信息提示背景顏色。</p>
  <p class="bg-warning text-white">警告背景顏色</p>
  <p class="bg-danger text-white">危險背景顏色。</p>
  <p class="bg-secondary text-white">副標題背景顏色。</p>
  <p class="bg-dark text-white">深灰背景顏色。</p>
  <p class="bg-light text-dark">淺灰背景顏色。</p>
</div>

5. 導航

創建一個簡單的水平導航欄，可以在 <ul> 元素上添加 .nav類，在每個 <li> 選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類。

.nav-justified 類可以設置導航項齊行等寬顯示。
.nav-pills 類可以將導航項設置成膠囊形狀。
.flex-column 類用於創建垂直導航
.justify-content-center 類設置導航居中顯示， .justify-content-end 類設置導航右對齊。 這個對導航欄無效


動態選項卡。選項卡是動態可切換的，可以在每個鏈接上添加 data-toggle="tab" 屬性。 然後在每個選項對應的內容的上添加 .tab-pane 類，淡入效果可以在 .tab-pane 後添加 .fade類。膠囊狀動態選項卡只需要將以上實例的代碼中 data-toggle 屬性設置爲 data-toggle="pill"。

<div class="tabbable" id="tabs-761376">
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="#panel-296123" data-toggle="tab">Section 1</a>
		</li>
        <li>
	        <a href="#panel-364654" data-toggle="tab">Section 2</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="panel-296123">
			<p>
				I'm in Section 1.
			</p>
		</div>
		<div class="tab-pane" id="panel-364654">
			<p>
				Howdy, I'm in Section 2.
			</p>
		</div>
	</div>
</div>

6. 導航欄

使用 .navbar 類來創建一個標準的導航欄，後面緊跟: .navbar-expand-xl|lg|md|sm 類來創建響應式的導航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。
通過刪除 .navbar-expand-xl|lg|md|sm 類來創建垂直導航欄

不同顏色導航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

.navbar-brand 類用於高亮顯示品牌/Logo

要創建摺疊導航欄，可以在按鈕上添加 class="navbar-toggler", data-toggle="collapse" 與 data-target="#thetarget" 類。然後在設置了 class="collapse navbar-collapse" 類的 div 上包裹導航內容（鏈接）, div 元素上的 id 匹配按鈕 data-target 的上指定的 id。通常，小屏幕上我們都會摺疊導航欄，通過點擊來顯示導航選項。

<form class="form-inline">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
  
.fixed-top .fixed-bottom 類來實現導航欄的固定


<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

7. 下拉菜單

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <div class="dropdown-header">Dropdown header 1</div>
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <div class="dropdown-divider"></div>
    <div class="dropdown-header">Dropdown header 1</div>
    <a class="dropdown-item" href="#">Link 1</a>
  </div>
</div>

.dropup  設置上拉

8. 表單控件

1. input

類型有 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color
注意：: 如果 input 的 type 屬性未正確聲明，輸入框的樣式將不會顯示。

2. textarea

<div class="form-group">
  <label for="comment">評論:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

3. 複選框(checkbox)

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

4. 單選框(Radio)

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

5. select下拉菜單

.multiple 類 可以選擇多個
<div class="form-group">
  <label for="sel1">下拉菜單:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

9. 表單

表單元素 input, textarea, 和 select elements 在使用 .form-control 類的情況下，寬度都是設置爲 100%。

1. 堆疊式

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. 內聯式

所有內聯表單中的元素都是左對齊的。

注意：在屏幕寬度小於 576px 時爲垂直堆疊，如果屏幕寬度大於等於576px時表單元素纔會顯示在同一個水平線上。

內聯表單需要在元素上添加 .form-inline類。

<form class="form-inline">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

10. 表格

類名	描述
.table	基礎表格，沒有任何效果
.table-striped	在tbody標籤中添加條紋效果
.table-bordered	帶邊框，默認無邊框
.table-hover	添加懸停效果
.table-dark	深灰色，可以是表格行的背景
.table-primary	藍色: 指定這是一個重要的操作
.table-success	綠色: 指定這是一個允許執行的操作
.table-danger	紅色: 指定這是可以危險的操作
.table-info	淺藍色: 表示內容已變更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用於鼠標懸停效果
.table-secondary	灰色: 表示內容不怎麼重要
.table-light	淺灰色，可以是表格行的背景
.thead-dark	爲表頭thead添加黑色背景
.thead-light	爲表頭thead添加灰色背景
.table-sm	較小的表格
.table-responsive	響應式表格，超過範圍就會出現橫向滾動條
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px(默認)
.table-responsive-xl	< 1200px

<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

11. 分頁

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
.disabled 類可以設置分頁鏈接不可點擊
.active 類來高亮顯示
.pagination-lg 類設置大字體的分頁條目，.pagination-sm 類設置小字體的分頁條目

12. 圖片

圓角
橢圓
縮略圖
對齊方式
響應式

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

<img src="paris.jpg" class="float-left"> 
<img src="cinqueterre.jpg" class="float-right">

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

13. 輪播幻燈片

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 輪播圖片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一張圖片描述標題</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二張圖片描述標題</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>第三張圖片描述標題</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切換按鈕 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

類	描述
.carousel	創建一個輪播
.carousel-indicators	爲輪播添加一個指示符，就是輪播圖底下的一個個小點，輪播的過程可以顯示目前是第幾張圖。
.carousel-inner	添加要切換的圖片
.carousel-item	指定每個圖片的內容
.carousel-control-prev	添加左側的按鈕，點擊會返回上一張。
.carousel-control-next	添加右側按鈕，點擊會切換到下一張。
.carousel-control-prev-icon	與 .carousel-control-prev 一起使用，設置左側的按鈕
.carousel-control-next-icon	與 .carousel-control-next 一起使用，設置右側的按鈕
.slide	切換圖片的過渡和動畫效果，如果你不需要這樣的效果，可以刪除這個類。

bootstrap4

文章目錄