BootStrap样式工具

转载：https://www.cnblogs.com/springsnow/p/12146554.html

目录

• 1、容器和网格系统
• 2、字体颜色及背景颜色
• 3、边框
• 4、 内边距（pading）外边距（margin）
• 5、清除浮动
• 6、display 显示
• 7、嵌入元素样式

1、容器和网格系统

容器

• container ： 固定宽度，不同尺寸固定了不同的宽度
• container-fluid： 100%宽度

栅格系统

• col-： <576px
• col-sm- ： >=576px
• col-md- ： >=768px
• col-lg- ： >=992px
• col-xl- ： >=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、嵌入元素样式