Bootstrap-UI框架
响应式前端布局，移动设备优先的Web项目开发
Bootstrap结构
基本结构
带有网格系统、链接样式、背景
特性
全局CSS设置
定义基本的HTML元素样式
可扩展class
先进的网格系统
组件
包含十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框、轮播图等
javaScript插件
包含十几个自定义的jQuery插件
布局系统（一行十二列）
.container容器布局（固定布局 width：auto）
.container-fluid容器布局（流动布局 width：100%）
以上两种布局是布局栅格系统最基本的要素
自适应对应的响应方式即media（媒体查询）
栅格系统
以移动端优先的网格系统
基于12列的布局，5种响应尺寸（不同屏幕）
完全使用flexbox流式布局构建，完全支持响应式标准
具体采用div容器的行、列和对齐内容来构建响应式布局
<div class="container"><!-- 采用.container-fluid会100%占用屏幕 --> <div class="row"> <div class="col-sm-1">1</div> <!-- sm表明屏幕类型 .col-sm-*还可以强制设定每列所占用的栅格列--> <div class="col-sm">2</div> <div class="col-sm">3</div> </div> </div> 复制代码
【注】每行12列，不足空出来，多的换行
栅格等级
响应式布局
| 超小屏幕（<576px） | 小屏幕 (≥576px) | 中等屏幕（≥768px） | 大屏幕（≥992px） | 超大屏幕（≥1200px） | |
|---|---|---|---|---|---|
| 最大容器宽度 | None（auto） | 540px | 720px | 960px | 1140px |
| 类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12 | 12 | 12 | 12 | 12 |
若同时使用两个或以上级别，且比例相同，遵循移动端优先原则
栅格系统支持指定一种或多种级别变化混合布局
<div class="container"><!-- 采用.container-fluid会100%占用屏幕 --> <div class="row"> <div class="col-2 col-sm-1">1</div> <!-- sm表明屏幕类型 .col-sm-*还可以强制设定每列所占用的栅格列--> <div class="col-3 col-sm-1">2</div> <div class="col-7 col-sm-10">3</div><!-- 当屏幕宽度小于576px采用2 3 7列而大于等于576px则采用1 1 10列排布--> </div> </div> 复制代码
可以通过class=“w-100”，强制切割列数
<div class="container"> <div class="row"> <div class="col-sm">1</div> <div class="w-100"></div><!-- 切割 2行 第一行1 第二行2 3 --> <div class="col-sm">2</div> <div class="col-sm">3</div> </div> </div> 复制代码
【注】若有指定col-sm-*则不会自动扩充，但仍被切割
在不同屏幕上自适应的隐藏于显式方法
要隐藏元素，只需要对任何响应屏幕变化使用.d-none这个class即可：
.d-{sm,md,lg,xl}-none
.d-none 所有屏幕不可见，.d-block所有屏幕可见
仅在给定的屏幕尺寸间隔上显式元素
可以将一个.d-*none类与一个.d-*-*类组合 .d-none .d-md-block .d-xl-none 中等以前隐藏 超大之后再隐藏 d-none d-md-block 中等之前隐藏，之后显示 .d-md-none 中等之后都不显示 复制代码
对齐与排序
栅格对齐
行对齐，作用于行中，height低于容器高度才有意义
| 样式 | |
|---|---|
| 居顶（默认） | .align-items-start |
| 居中 | .align-items-center |
| 居底 | .align-items-end |
列对齐，作用于列
| 样式 | |
|---|---|
| 居顶 | .align-self-start |
| 居中 | .align-self-center |
| 居底 | .align-self-end |
不足100%填充（没有12列），实现水平对齐，作用于行中
| 样式 | |
|---|---|
| 居左 | .justify-content-start |
| 居中 | .justify-content-center |
| 居右 | .justify-content-end |
| 间隔相等（分散） | .justify-content-around |
| 两端对齐（分散） | .justify-content-between |
栅格排序
.order-N，N的最大值为12，.order-1则为第一列
.order-first强行设置为第一列，.order-last为最后一列
.offset-N或.offset-*-N设置列的偏移量，N表示栅格列数，即空几个
.ml-N或.mr-N微调列距离，小空隙
.ml-auto和.mr-auto左右对齐 .m-auto两端对齐
内容排版
标题类
<h1>~</h6>可以创建不同尺寸的标题文字 如果是使用其他元素原本，<p>或<div>,调用.h1~6同样可以实现大标题 复制代码
通过**.text-muted**样式，构建大标题的附属小标题
另一种更大型，更醒目的标题方式：.display-1~-4
文本类
.lead，强调内容
比较常用的HTML5文本内联元素
.title样式和缩略语给文本做提示
<blockquote来源备注，.blockquote-footer 页脚
列表类
使用.list-unstyled样式，可以将列表初始化，清除样式
使用.list-inline和.list-inline-item结合实现多列并排列表
java Python PHP js
使用dl、dt和dd实现水平描述，使用.text-trunacte可以省略溢出·
代码于图文
【注】 <kbd
表格样式
颜色和边框
工具类-公共样式
<button class="close"><span>×</span></button> 关闭按钮 复制代码
【注】hide隐藏内容不可见位置不占用但其实还是存在，invisible隐藏内容占用位置，内容还是存在
Flex弹性布局
【注】around是子元素两边距离一样，between两边对齐 align-items是垂直方向，align-self是针对单个子项目
行，对每一列布局；列，对每一行布局
作者：毒药乐园
链接：https://juejin.cn/post/7026197160953806878