bootstrap4 常用樣式類名 （供自己參考）
1、容器和網格系統
容器
container 固定寬度，不同尺寸固定了不同的寬度
container-fluid 100%寬度
柵格系統
cal-xs//<768px
cal-sm //>=768px
cal-md //>=992px
cal-lg //>=1200px
2、字體顏色及背景顏色
字體
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
3、邊框
增加邊框
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
內邊距
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
1
2
3
外邊距
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;
1
2
3
4
5
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;
5、清除浮動
clearfix //清除浮動類實現方式如下
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
6、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
7、嵌入元素樣式
包含<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>
1
2
3
4
5
6
7
8、彈性布局
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
9、浮動 可適配：float-(sm,md lg xl)-xxx
float-left
float-right
float-none
10、圖片替換文字
text-hide //使用.text-hide類來幫助用背景圖像替換元素的文本內容。
<h1 class="text-hide" style="background-image: url(‘/assets/brand/bootstrap-solid.svg‘); width: 50px; height: 50px;">Bootstrap</h1>
1
2
3
11、定位
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 是根據元素是否達到設定了的閾值決定的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
12 尺寸（size）
w-25
//width: 25%!important; 以下值同理
w-50
w-75
w-100
區間
mw-100
mh-100
13、文本
文本定位
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 //斜體
14、 垂直對齊（Vertical alignment）
align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
vertical-align: text-bottom!important; //.align-text-bottom
1
2
3
15、顯示隱藏
show
hidden or sr-only
hide //類仍然可用，但是它不能對屏幕閱讀器起作 不建議使用
invisible 隱藏保留該元素的文檔位置
visible //可見
visibility: hidden!important;
1
2
3
16、表格
table //默認樣式
table-striped //條紋表格
table-bordered //邊框表格
table-hover //鼠標懸停
table-dark //黑色背景表格
table-condensed //緊湊的表格
table-responsive //響應式表格
表格行設置背景色
active //鼠標懸停在行或單元格上時所設置的顏色
success //標識成功或積極的動作
info //標識普通的提示信息或動作
warning //標識警告或需要用戶註意
danger //標識危險或潛在的帶來負面影響的動作
17、按鈕及按鈕組
按鈕
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 垂直按鈕組
18、列表組
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:
19、表單
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 類來實現暗黑提示框
21、三角符號
caret //css實現向下小三角
---------------------
作者：Altaba
來源：CSDN
原文：https://blog.csdn.net/Altaba/article/details/81324513
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
bootstrap4 常用樣式類名 （供自己參考）