首页 > 其他分享> 文章详细

bootstrap4常用样式清单（可查找）

2020-01-03 20:01:53 阅读：716 来源： 互联网

标签：group text 清单查找 sm bootstrap4 inline margin important

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

内边距

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;

5、清除浮动

clearfix //清除浮动类实现方式如下

// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}


// Usage as a mixin
.element {
@include clearfix;
}

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>

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//子元素设置支持不同尺寸匹配�0�8

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>

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

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

15、显示隐藏

show
hidden or sr-only
hide //类仍然可用，但是它不能对屏幕阅读器起作不建议使用
invisible 隐藏保留该元素的文档位置
visible //可见

visibility: hidden!important;

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实现向下小三角

标签：group,text,清单,查找,sm,bootstrap4,inline,margin,important
来源： https://www.cnblogs.com/springsnow/p/12146554.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9