Bootstrap4常用類

一、shrink-to-fit=no

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

這行代碼的作用可以讓網頁的寬度自動適應手機屏幕的寬度，但是多了shrink-to-fit=no，主要是爲了兼容iOS9。

二、柵格

.container(固定寬度)、 .container-fluid(全屏寬度)

Bootstrap4 網格系統規則:

• 網格每一行需要放在設置了 .container (固定寬度) 或 .container-fluid (全屏寬度) 類的容器中，這樣就可以自動設置一些外邊距與內邊距。

• 使用行.row來創建水平的列組。

• 內容需要放置在列中，並且只有列可以是行的直接子節點。

• 列通過填充創建列內容之間的間隙。 這個間隙是通過 .rows 類上的負邊距設置第一行和最後一列的偏移。

類前綴	設備	大小
.col-	所有設備	<576px
.col-sm-	平板	≥576px
.col-md-	桌面顯示器	≥768px
.col-lg-	大桌面顯示器	≥992px
.col-xl-	超大桌面顯示器	≥1200px

三、偏移列

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

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

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

四、表格

類前綴	描述
.table	基礎表格
.table-bordered	邊框表格
.table-hover	鼠標懸停狀態表格
.table-striped	條紋表格
.table-responsive	響應式表格
.table-sm	較小的表格

表格顏色（表頭、行、整個表格）

類前綴	描述
.table-primary	藍色: 指定這是一個重要的操作
.table-success	綠色: 指定這是一個允許執行的操作
.table-danger	紅色: 指定這是可以危險的操作
.table-info	淺藍色: 表示內容已變更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用於鼠標懸停效果
.table-secondary	灰色: 表示內容不怎麼重要
.table-light	淺灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

類前綴	描述
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

五、圖像形狀

類前綴	描述
.rounded	圓角圖片
.rounded-circle	橢圓圖片
.img-thumbnail	縮略圖
.img-fluid	響應式圖片(設置了 max-width: 100%; 、 height: auto;)
.float-left、.float-right	圖片左對齊、圖片右對齊

六、按鈕

<button type="button" class="btn">基本按鈕</button>
<button type="button" class="btn btn-primary">主要按鈕</button>
<button type="button" class="btn btn-secondary">次要按鈕</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危險</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">淺色</button>
<button type="button" class="btn btn-link">鏈接</button>
<!-- 按鈕設備邊框 -->
<button type="button" class="btn btn-outline-primary">主要按鈕</button>
<button type="button" class="btn btn-outline-secondary">次要按鈕</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危險</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">淺色</button>
<!-- 不同大小的按鈕 -->
<button type="button" class="btn btn-primary btn-lg">大號按鈕</button>
<button type="button" class="btn btn-primary">默認按鈕</button>
<button type="button" class="btn btn-primary btn-sm">小號按鈕</button>
<!-- 塊級按鈕 -->
<button type="button" class="btn btn-primary btn-block">按鈕 1</button>

七、小工具

border邊框

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

<!-- 邊框顏色 -->
<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>

<!-- 邊框圓角設置-->
 <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>

浮動

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

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

對齊方式

類前綴	描述
.mx-auto	元素居中
.ml-auto	元素居右
.mr-auto	元素居左

寬度/高度

<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>

<div class="h-25 bg-warning">高度 25%</div>
<div class="h-50 bg-warning">高度 50%</div>
<div class="h-75 bg-warning">高度 75%</div>
<div class="h-100 bg-warning">高度 100%</div>
<div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>

元素之間的距離

.m-1 // margin: .25rem!important;
.m-2 // margin: .5rem!important;
.m-3 // margin: 1rem!important;
.m-4 // margin: 1.5rem!important;
.m-5 // margin: 3rem!important;

.p-1 // padding: .25rem!important;
.p-2 // padding: .5rem!important;
.p-3 // padding: 1rem!important;
.p-4 // padding: 1.5rem!important;
.p-5 // padding: 3rem!important;

八、顯示和隱藏

hidden-xs = d-none d-sm-block
hidden-sm hidden-xs = d-none d-md-block
hidden-md hidden-sm hidden-xs = d-none d-lg-block

visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block