bootstrap4 經常使用樣式類名 （供本身參考）

一、容器和網格系統

容器

container 固定寬度，不一樣尺寸固定了不一樣的寬度

container-fluid 100%寬度

柵格系統

cal-xs//<768px

cal-sm //>=768px

cal-md //>=992px

cal-lg //>=1200px

二、字體顏色及背景顏色
字體

text-muted 柔和

text-primary 重要

text-success 成功

text-info 提示

text-warning 警告

text-danger 危險

text-secondary 副標題

text-dark 深灰色文字

text-light 淺灰色

text-white 白色

背景

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-white

三、邊框
增長邊框

border //默認：1px solid #dee2e6!important

border-top

border-left

border-right

border-bottom

刪除邊框

border-0 //去除邊框或者除去某一邊的邊框

border-top-0

border-left-0

border-right-0

border-bottom-0

邊框顏色

border-primary

border-secondary

border-success

border-danger

border-warning

border-info

border-light

border-dark

border-white

圓角邊框

rounded //border-radius: .25rem!important;

rounded-top //只有頂部的兩邊有圓角

rounded-right

rounded-bottom

rounded-left

rounded-circle 類能夠設置橢圓形圖片

rounded-0

.img-thumbnail 類用於設置圖片縮略圖(圖片有邊框)

4 內邊距（pading）外邊距（margin）

m - for classes 表明 margin

p - for classes 表明 padding

 

t - for classes that set margin-top or padding-top

b - for classes that set margin-bottom or padding-bottom

l - for classes that set margin-left or padding-left

r - for classes that set margin-right or padding-right

x - for classes that set both *-left and *-right

y - for classes that set both *-top and *-bottom

內邊距

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;

單邊

pt-0

pl-0

pr-0

pb-0

px-2

py-2

pading:.5rem 0; //py-2

外邊距

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;

單邊

mt-0

ml-0

mr-0

mb-0

單邊大小

mt-1 // margin-left: ($spacer * .25) !important;

mt-2

mt-3

mt-4

mt-5

mx-auto

margin:0 auto;

auto

ml-auto // margin-left: auto!important;

mr-auto // margin-right: auto!important;

mt-auto // margin-top: auto!important;

mb-auto // margin-bottom: auto!important;

五、清除浮動
clearfix //清除浮動類實現方式以下

// Mixin itself

@mixin clearfix() {

&::after {

display: block;

content: "";

clear: both;

}

}

 

// Usage as a mixin

.element {

@include clearfix;

}

六、display 顯示
.d-{value} for all //任何尺寸使用

.d-{breakpoint}-{value} for sm, md, lg, and xl.//對應尺寸加載

d-none

d-inline

d-inline-block

d-block

d-table

d-table-cell

d-table-row

d-flex

d-inline-flex

打印樣式 //使用較少

d-print-none

d-print-inline

d-print-inline-block

d-print-block

d-print-table

d-print-table-row

d-print-table-cell

d-print-flex

d-print-inline-flex

七、嵌入元素樣式
包含<iframe>, <embed>, <video>, and <object>等元素樣式

embed-responsive //外部盒子

embed-responsive-21by9（16by9,4by3,1by1）//寬高比

embed-responsive-item //添加在元素上的樣式

<div class="embed-responsive embed-responsive-21by9">

<`iframe class="embed-responsive-item" src="..."></iframe`>

</div>

彈性佈局
d-flex //將對象做爲彈性伸縮盒顯示

d-inline-flex //將對象做爲內聯塊級彈性伸縮盒顯示

d-sm-flex //對應尺寸加載

d-sm-inline-flex

d-md-flex

d-md-inline-flex

d-lg-flex

d-lg-inline-flex

d-xl-flex

d-xl-inline-flex

方向 水平

flex-row

flex-row-reverse //相反方向

垂直

flex-column

flex-column-reverse

一樣的不一樣尺寸適配樣式

flex-row

flex-row-reverse

flex-column

flex-column-reverse

flex-sm-row

flex-sm-row-reverse

flex-sm-column

flex-sm-column-reverse

flex-md-row

flex-md-row-reverse

flex-md-column

flex-md-column-reverse

flex-lg-row

flex-lg-row-reverse

flex-lg-column

flex-lg-column-reverse

flex-xl-row

flex-xl-row-reverse

flex-xl-column

flex-xl-column-reverse

justify content //可匹配到不一樣尺寸

justify-content-start

justify-content-end

justify-content-center

justify-content-between

justify-content-around

wrap

flex-nowrap //支持不一樣尺寸匹配

flex-rap

flex-sm-wrap-reverse

order //子元素設置 支持不一樣尺寸匹配

order-0

order-1

order-2

order-3

order-4

order-5

order-6

order-7

order-8

order-9

order-10

order-11

order-12

Align items //子元素設置 支持不一樣尺寸匹配

align-items-start

align-items-end

align-items-center

lign-items-baseline

align-items-stretch

Align self//子元素設置 支持不一樣尺寸匹配

align-self-start

align-self-end

align-self-center

align-self-baseline

align-self-stretch

Align content//子元素設置 支持不一樣尺寸匹配ß

align-content-start

align-content-end

align-content-center

align-content-around

align-content-stretch

九、浮動 可適配：float-(sm,md lg xl)-xxx
float-left

float-right

float-none

十、圖片替換文字
text-hide //使用.text-hide類來幫助用背景圖像替換元素的文本內容。

<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

定位
position-static

position-relative

position-absolute

position-fixed

position-sticky

固定定位

fixed-top

fixed-bottom

.fixed-top {

position: fixed;

top: 0;

right: 0;

left: 0;

z-index: 1030;

}

sticky-top //使用較少，兼容性通常

position: sticky; //粘性佈局 這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。

生效規則

position:sticky 的生效是有必定的限制的，總結以下：

須指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。

而且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。

設定爲 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，不然 position:sticky 不會生效。這裏須要解釋一下：

若是 position:sticky 元素的任意父節點定位設置爲 overflow:hidden，則父容器沒法進行滾動，因此 position:sticky 元素也不會有滾動而後固定的狀況。

若是 position:sticky 元素的任意父節點定位設置爲 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。

達到設定的閥值。這個還算好理解，也就是設定了 position:sticky 的元素表現爲 relative 仍是 fixed 是根據元素是否達到設定了的閾值決定的。

12 尺寸（size）
w-25
//width: 25%!important; 如下值同理

w-50

w-75

w-100

區間

mw-100

mh-100

1三、文本
文本定位

text-left //文本居左

text-center

text-right

text-sm-left

text-md-left

text-lg-left

text-xl-left

文本 轉換（Text transform） //全部瀏覽器都支持該屬性

text-lowercase //字母文本小寫

text-uppercase //字母文本大寫

text-capitalize //文本中的每一個單詞以大寫字母開頭。

字體 加劇和斜體（Font weight and italics）

font-weight-bold //字體加劇

font-weight-normal //正常字體

font-weight-light //字體變細

font-italic //斜體

1四、 垂直對齊（Vertical alignment）
align-baseline

align-top

align-middle

align-bottom

align-text-top

align-text-bottom

vertical-align: text-bottom!important; //.align-text-bottom

顯示隱藏
show

hidden or sr-only

hide //類仍然可用，可是它不能對屏幕閱讀器起做 不建議使用

invisible 隱藏保留該元素的文檔位置

visible //可見

visibility: hidden!important;

1六、表格
table //默認樣式

table-striped //條紋表格

table-bordered //邊框表格

table-hover //鼠標懸停

table-dark //黑色背景表格

table-condensed //緊湊的表格

table-responsive //響應式表格

表格行設置背景色

active //鼠標懸停在行或單元格上時所設置的顏色

success //標識成功或積極的動做

info //標識普通的提示信息或動做

warning //標識警告或須要用戶注意

danger //標識危險或潛在的帶來負面影響的動做

1七、按鈕及按鈕組
按鈕

btn-primary //主要按鈕

btn-secondary //次要按鈕

btn-success //成功按鈕

btn-info //信息按鈕

btn-danger //危險

btn-outline-primary //按鈕邊框

btn-xs btn-sm btn-lg //小大號按鈕

btn-block //塊級按鈕

active //可用

disabled //禁用

按鈕組

btn-group //按鈕組

btn-group-lg|sm|xs 控制按鈕組大小

btn-group-vertical 垂直按鈕組

1八、列表組
list-group //列表組

list-group-item //列表li

list-unstyled //無樣式列表

list-inline //內聯列表 添加在ul上

列表背景色

list-group-item-action

list-group-item-success,

list-group-item-secondary,

list-group-item-info,

list-group-item-warning,

list-group-item-danger,

list-group-item-dark

list-group-item-light:

1九、表單
form-inline //form元素添加該類，可構成內聯表單

form-horizontal //能夠將 label 標籤和控件組水平並排佈局

form-group //表單組 margin-bottom: 15px;

input-group-addon //配合input表單使用，可再起先後添加圖標或者後綴

form-control //該表單元素寬度變成100%

sr-only 隱藏表單

控制表單尺寸

input-lg

input-sm

多選和單選

checkbox //包裹複選框

checkbox-inline // 內聯多選

radio // 包裹單選框

radio-inline // 內聯單選

disabled //不可點擊

下拉列表（select）

form-control
校驗狀態

has-success //可配合.form-group使用

has-warning //可配合.form-group使用

has-error //可配合.form-group使用

20 信息提示框
alert 類
背景色 追加如下類名

alert-success,

alert-info,

alert-warning,

alert-danger,

alert-primary,

alert-secondary,

alert-light

alert-dark 類來實現暗黑提示框