bootstrap4常用样式

引入方式

前端项目基于jquery去构建：可以直接引入cdn库，bootstrap4.css、jquery.js、bootstrap4.js

前端项目基于react去构建：bootstrap4.css（scss,less）、react.js、react-bootstrap

前端项目基于angular去构建：bootstrap4.css（scss,less）、angular4、ngx-bootstrap

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

内边距

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

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;

}

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 是根据元素是否达到设定了的阈值决定的。

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

参考文章：

https://blog.csdn.net/Altaba/article/details/81324513

http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

https://getbootstrap.com/docs/4.3/getting-started/introduction/