页面创建基础

    <meta name="viewport" content="
    width=device-width,  //宽度=设备宽度
    initial-scale=1.0,  //初始缩放比例=1
    shrink-to-fit="no" > //自动适应手机屏幕宽度

网格系统:

1、col- 针对所有设备

2、col-sm- 平板 - 屏幕宽度等于或大于 576px

3、col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

4、col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

5、col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
：.offset-md-4 是把.col-md-4 往右移了四列格。

排版类

.font-weight-bold
.font-weidth-normal
.font-weight-light
.font-italic
.lead
.small
.text-left
.text-right
.text-justify
.text-center
.text-nowarp
.text-lowercase
.text-uppercase
.text-capitalize
.initialism   //使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
.list-unstyle
.list-inline
.pre-scrollable //使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

颜色

.text-muted   //柔和  灰
.text-primary  //重要  蓝
.text-success  //成功  绿
.text-warning   // 警告 黄
.text-danger   // 危险  红
.text-info    //提示信息  墨蓝
.text-secondary  //副标题  浅灰
.text-dark //  深灰
.text-light //  浅灰（白色背景几乎看不到）
.text-white  //白色

表格

Table

必要
.table
组合
.table-striped  //条纹
.table-border   //表格边框
.table-hover   //鼠标悬浮效果
.table-dark  //黑色背景
.table-sm   //通过减少内边距来设置较小的表格
.table-response  //在屏幕宽度小于 992px 
.table-responsive-sm    < 576px
.table-responsive-md    < 768px
.table-responsive-lg    < 992px
.table-responsive-xl    < 1200px时会创建水平滚动条，
如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）

tr

.table-primary  蓝色: 指定这是一个重要的操作
.table-success  绿色: 指定这是一个允许执行的操作
.table-danger   红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning  橘色: 表示需要注意的操作
.table-active   灰色: 用于鼠标悬停效果
.table-secondary    灰色: 表示内容不怎么重要
.table-light    浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景

thead

.thead-dark //表头添加黑色背景
.thead-default  //表头添加灰色背景

图片

.rounded  //圆角效果
.rounded-circle  //椭圆形图片
.img-thumbnail  //设置图片缩略图(图片有边框)
.img-fluid //响应式图片 设置了 max-width: 100%; 、 height: auto
.float-right/float-left  //图片对齐方式

按钮

主要用于 button a input标签

<a href="#" class="btn btn-primary"></a>
<button type="button" class="btn btn-success">Button</button>
<input type="submit" class="btn btn-info" value="Submit">

按钮边框

默认白色背景，边框文本同色

.border-outline-primary
.border-outline-secondary
.border-outline-success
.border-outline-danger
.border-outline-warning
.border-outline-info
.border-outline-dark
.border-outline-light .txt-dark

按钮大小

.btn-lg
.btn-sm

块级按钮

.btn-block

按钮禁用&激活

.active
.disable

按钮组

<div class="ben-group">
    <button type="button" class="btn primary"></button>
    <button type="button" class="btn primary"></button>
    <button type="button" class="btn primary"></button>
    <button type="button" class="btn primary"></button>
</div>

类

用于div>>>
必需
.btn-group 或 .btn-group-vertical //水平或垂直

按钮大小（组合）
.btn-group-lg
.btn-group-sm
.bgn-group-xs

列表组

ul标签

.list-group

li标签

.list-gropu-item
.active
.disable

链接列表项

div 替换 ul  ——  a 替换 li
.list-group-item-action 鼠标悬停灰色背景效果
<div class="list-group">
    <a href="" class="list-group-item list-group-item-action">List1</a>
    <a href="" class="list-group-item list-group-item-action">List2</a>
    <a href="" class="list-group-item list-group-item-action">List3</a>
    <a href="" class="list-group-item list-group-item-action">List4</a>
</div>

列表颜色

.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

Bootstrap小工具

border类

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

border边框颜色

Eg:<span class="border border-primary"></span>
    .border-primary
    .border-secondary
    .border-success
    .border-danger
    .border-warning
    .border-info
    .border-light
    .border-dark
    .border-white

rounded边框圆角设置

<span class="rounded"></span>
<span class="rounded-top"></span>
<sapn class="rounded-right"></sapn>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-cricle"></span>
<span class="rounded-0"></span>

float浮动类

.clearfix用于清除浮动
.float-left/.float-right 向左向右浮动

<div class="clearfix">
    <span class="float-left">左浮动</span>
    <span class="float-right">右浮动</span>
</div>

响应式浮动
.float--left|right , 为 sm, md, lg 或 xl

<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>

居中对齐
使用 .mx-auto 类来设置居中对齐:

<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>

高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">高度 25%</div>
<div class="h-50 bg-warning">高度 50%</div>
<div class="h-75 bg-warning">高度 75%</div>
<div class="h-100 bg-warning">高度 100%</div>
<div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>