对齐
清除浮动与浮动
| 类 | 说明 |
|---|---|
.float-left
|
元素浮动到左边 |
.float-right
|
元素浮动到右边 |
.clearfix
|
清除浮动 |
垂直对齐
| 类 | 说明 |
|---|---|
.vertical-align
|
添加该类到父元素，父元素要有固定高度 |
.vertical-align-middle
|
添加该类到您需要上下居中对齐的元素上 |
.vertical-align-bottom
|
添加该类到您需要底部对齐的元素上 |
文字相关
文本转换（仅针英文）
| 类 | 说明 |
|---|---|
.text-lowercase
|
英文字符小写 |
.text-uppercase
|
英文字符大写 |
.text-capitalize
|
英文首字母大写 |
Lowercased text.
Uppercased text.
Capitalized text.
文本显示
| 类 | 说明 |
|---|---|
.text-hide
|
用背景替换文本内容 |
.text-truncate
|
文本截断 |
.text-break
|
文本换行显示 |
.text-nowrap
|
文本不换行，在一行显示 |
文本对齐
| 类 | 说明 |
|---|---|
.text-top
|
顶部对齐 |
.text-middle
|
上下居中 |
.text-bottom
|
底部对齐 |
.text-left
|
左对齐 |
.text-center
|
居中显示 |
.text-right
|
右对齐 |
.text-justify
|
两端对齐 |
测试文本
测试文本
测试文本
测试文本
测试文本
测试文本
测试文本
字体大小
可选值：0, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50, 60, 70 , 80 。
| 类 | 说明 |
|---|---|
.font-size-0
|
font-size: 0px |
.font-size-10
|
font-size: 10px |
.font-size-12
|
font-size: 12px |
.font-size-14
|
font-size: 14px |
.font-size-16
|
font-size: 16px |
.font-size-18
|
font-size: 18px |
.font-size-20
|
font-size: 20px |
字体粗细
可选值：unset, 100, 200, 300, 400, 500, 600, 700, 800, 900 。
| 类 | 说明 |
|---|---|
.font-weight-unset
|
font-weight: unset |
.font-weight-100
|
font-weight: 100 |
盒式模型
Padding
可选值：0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 。
| 类 | 说明 |
|---|---|
.p-5
|
padding: 5px |
.py-5
|
padding-top: 5px padding-bottom: 5px |
.px-5
|
padding-left: 5px padding-right: 5px |
.pt-5
|
padding-top: 5px |
.pr-5
|
padding-right: 5px |
.pb-5
|
padding-bottom: 5px |
.pl-5
|
padding-left: 5px |
Margin
可选值：0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 。
| 类 | 说明 |
|---|---|
.m-5
|
margin: 5px |
.my-5
|
margin-top: 5px margin-bottom: 5px |
.mx-5
|
margin-left: 5px margin-right: 5px |
.mt-5
|
margin-top: 5px |
.mr-5
|
margin-right: 5px |
.mb-5
|
margin-bottom: 5px |
.ml-5
|
margin-left: 5px |
响应式 Margin & Padding
| 小屏幕 平板 (≥480px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | 大屏幕 大桌面显示器 (≥1600px) | |
|---|---|---|---|---|---|
| margin: 5px |
.m-sm-5
|
.m-md-5
|
.m-lg-5
|
.m-xl-5
|
.m-xxl-5
|
| margin-right: 5px |
.mr-sm-5
|
.mr-md-5
|
.mr-lg-5
|
.mr-xl-5
|
.mr-xxl-5
|
| margin-left: auto |
.ml-sm-auto
|
.ml-md-auto
|
.ml-lg-auto
|
.ml-xl-auto
|
.ml-xxl-auto
|
| margin-top: -5px |
.mt-sm--5
|
.mt-md--5
|
.mt-lg--5
|
.mt-xl--5
|
.mt-xxl--5
|
| margin-bottom: 5px |
.mb-sm-5
|
.mb-md-5
|
.mb-lg-5
|
.mb-xl-5
|
.mb-xxl-5
|
|
margin-right: 5px;
margin-left: 5px
|
.mx-sm-5
|
.mx-md-5
|
.mx-lg-5
|
.mx-xl-5
|
.mx-xxl-5
|
|
margin-top: 5px;
margin-bottom: 5px
|
.my-sm-5
|
.my-md-5
|
.my-lg-5
|
.my-xl-5
|
.my-xxl-5
|
负值 Margin
可选值：-30, -25, -20, -15, -10, -5, -3, -1
| 类 | 说明 |
|---|---|
.m--5
|
margin: -5px |
.my--5
|
margin-top: -5px margin-bottom: -5px |
.mx--5
|
margin-left: -5px margin-right: -5px |
.mt--5
|
margin-top: -5px |
.mr--5
|
margin-right: -5px |
.mb--5
|
margin-bottom: -5px |
.ml--5
|
margin-left: -5px |
百分比高度
可选值：5%, 10%, 15%, 20%, 25%, 30%, 33.3333%, 50%, 75%, 100%.
| 类 | 说明 |
|---|---|
.h-p5
|
height: 5% |
.h-p10
|
height: 10% |
.h-p15
|
height: 15% |
.h-p20
|
height: 20% |
.h-p25
|
height: 25% |
.h-p30
|
height: 30% |
.h-p33
|
height: 33.3333% |
.h-p75
|
height: 75% |
.h-p100 or
.h-full
|
height: 100% |
百分比宽度
可选值：5%, 10%, 15%, 20%, 25%, 30%, 33.3333%, 50%, 75%, 100%.
| 类 | 说明 |
|---|---|
.w-p5
|
width: 5% |
.w-p10
|
width: 10% |
.w-p15
|
width: 15% |
.w-p20
|
width: 20% |
.w-p25
|
width: 25% |
.w-p30
|
width: 30% |
.w-p33
|
width: 33.3333% |
.w-p75
|
width: 75% |
.w-p100 or
.w-full
|
width: 100% |
高度
可选值：50, 100, 150, 200, 250, 300, 350, 400, 450, 500。
| 类 | 说明 |
|---|---|
.h-50
|
height: 50px |
.h-100
|
height: 100px |
.h-150
|
height: 150px |
.h-200
|
height: 200px |
.h-250
|
height: 250px |
.h-300
|
height: 300px |
.h-350
|
height: 350px |
.h-400
|
height: 400px |
.h-450
|
height: 450px |
.h-500
|
height: 500px |
宽度
可选值：50, 100, 150, 200, 250, 300, 350, 400, 450, 500 。
| 类 | 说明 |
|---|---|
.w-50
|
width: 50px |
.w-100
|
width: 100px |
.w-150
|
width: 150px |
.w-200
|
width: 200px |
.w-250
|
width: 250px |
.w-300
|
width: 300px |
.w-350
|
width: 350px |
.w-400
|
width: 400px |
.w-450
|
width: 450px |
.w-500
|
width: 500px |
响应式高度 & 宽度
| 小屏幕 平板 (≥480px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | 大屏幕 大桌面显示器 (≥1600px) | |
|---|---|---|---|---|---|
| 50px |
.h-sm-50
|
.h-md-50
|
.h-lg-50
|
.h-xl-50
|
.h-xxl-50
|
| 100px |
.h-sm-100
|
.h-md-100
|
.h-lg-100
|
.h-xl-100
|
.h-xxl-100
|
| 150px |
.h-sm-150
|
.h-md-150
|
.h-lg-150
|
.h-xl-150
|
.h-xxl-150
|
| 200px |
.h-sm-200
|
.h-md-200
|
.h-lg-200
|
.h-xl-200
|
.h-xxl-200
|
| 250px |
.h-sm-250
|
.h-md-250
|
.h-lg-250
|
.h-xl-250
|
.h-xxl-250
|
| 300px |
.h-sm-300
|
.h-md-300
|
.h-lg-300
|
.h-xl-300
|
.h-xxl-300
|
| 350px |
.h-sm-350
|
.h-md-350
|
.h-lg-350
|
.h-xl-350
|
.h-xxl-350
|
| 400px |
.h-sm-400
|
.h-md-400
|
.h-lg-400
|
.h-xl-400
|
.h-xxl-400
|
| 450px |
.h-sm-450
|
.h-md-450
|
.h-lg-450
|
.h-xl-450
|
.h-xxl-450
|
| 500px |
.h-sm-500
|
.h-md-500
|
.h-lg-500
|
.h-xl-500
|
.h-xxl-500
|
| 小屏幕 平板 (≥480px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | 大屏幕 大桌面显示器 (≥1600px) | |
|---|---|---|---|---|---|
| 50px |
.h-only-xs-50
|
.h-only-sm-50
|
.h-only-md-50
|
.h-only-lg-50
|
.h-only-xl-50
|
| 100px |
.h-only-xs-100
|
.h-only-sm-100
|
.h-only-md-100
|
.h-only-lg-100
|
.h-only-xl-100
|
| 150px |
.h-only-xs-150
|
.h-only-sm-150
|
.h-only-md-150
|
.h-only-lg-150
|
.h-only-xl-150
|
| 200px |
.h-only-xs-200
|
.h-only-sm-200
|
.h-only-md-200
|
.h-only-lg-200
|
.h-only-xl-200
|
| 250px |
.h-only-xs-250
|
.h-only-sm-250
|
.h-only-md-250
|
.h-only-lg-250
|
.h-only-xl-250
|
| 300px |
.h-only-xs-300
|
.h-only-sm-300
|
.h-only-md-300
|
.h-only-lg-300
|
.h-only-xl-300
|
| 350px |
.h-only-xs-350
|
.h-only-sm-350
|
.h-only-md-350
|
.h-only-lg-350
|
.h-only-xl-350
|
| 400px |
.h-only-xs-400
|
.h-only-sm-400
|
.h-only-md-400
|
.h-only-lg-400
|
.h-only-xl-400
|
| 450px |
.h-only-xs-450
|
.h-only-sm-450
|
.h-only-md-450
|
.h-only-lg-450
|
.h-only-xl-450
|
| 500px |
.h-only-xs-500
|
.h-only-only-sm-500
|
.h-only-md-500
|
.h-only-lg-500
|
.h-only-xl-500
|
杂项
无间距栅格
在
.row 添加
.no-space 类来实现无间距栅格。
显示相关
| 类 | 说明 |
|---|---|
.inline
|
类似
display:inline;
|
.inline-block
|
类似
display:inline-block;
|
.block
|
类似
display:block;
|
屏幕阅读器和键盘导航内容
在所有设备上都不显示，
除了屏幕阅读器 使用
.sr-only 。 可以结合
.sr-only 使用
.sr-only-focusable 当元素获得焦点时来重点突出元素（如只有键盘的用户），也可以混合使用。
响应式工具
| 超小屏幕 手机 (<480px) | 小屏幕 平板 (≥480px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | 大屏幕 大桌面显示器 (≥1600px) | |
|---|---|---|---|---|---|---|
.hidden-xs-down
|
隐藏 | 显示 | 显示 | 显示 | 显示 | 显示 |
.hidden-sm-down
|
隐藏 | 隐藏 | 显示 | 显示 | 显示 | 显示 |
.hidden-md-down
|
隐藏 | 隐藏 | 隐藏 | 显示 | 显示 | 显示 |
.hidden-lg-down
|
隐藏 | 隐藏 | 隐藏 | 隐藏 | 显示 | 显示 |
.hidden-xl-down
|
隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 显示 |
.hidden-xxl-down
|
隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-xs-up
|
隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-sm-up
|
显示 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-md-up
|
显示 | 显示 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.hidden-lg-up
|
显示 | 显示 | 显示 | 隐藏 | 隐藏 | 隐藏 |
.hidden-xl-up
|
显示 | 显示 | 显示 | 显示 | 隐藏 | 隐藏 |
.hidden-xxl-up
|
显示 | 显示 | 显示 | 显示 | 显示 | 隐藏 |