bootstrap4（33）：实用工具常用样式清单（可查找）

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、嵌入元素样式

包含