-
Bootstrap 响应式布局框架特色
- 疾速实现响应式布局
- 基于 Flex 的栅格化布局零碎（将一行分为 12 个单元格）
- 领有丰盛的组件和工具办法
- 常见交互的办法应用
- 引入文件后，元素增加 class 名即可
-
Bootstrap 六个响应式断点
断点 类中断 响应尺寸 extra-small 无或 auto <576px small sm 576px≤X<768px medium md 768px≤X<992px large lg 992px≤X<1200px extra large xl 1200px≤X<1400px extra extra large xxl 1400px≤X -
通栏 + 版心响应式布局类名
- 通栏：
.container-fluid - 版心：
.container - 指定响应式节点
.container- 类中断
- 通栏：
-
栅格化零碎响应式布局类名
- 用于父元素（开启栅格化零碎）：
.row - 用于父元素设置列宽度：
.row-cols- 数值 - 用于父元素指定响应式节点时设置列宽度：
.row-cols- 类中断 - 数值 - 用于子元素：
.col - 用于子元素占用多少列：
.col- 数值 - 用于子元素指定响应式断点占用多少列：
.col- 类中断 - 数值
- 用于父元素（开启栅格化零碎）：
-
设置对齐形式
-
垂直对齐
- 整体对齐：
.align-items- 对齐形式
指定断点整体对齐：.align-items- 类中断 - 对齐形式 -
个体对齐：
.align-self- 对齐形式
指定断点个体对齐：.align-self- 类中断 - 对齐形式- 开始地位对齐：start
- 两头地位对齐：center
- 完结地位对齐：end
- 基线对齐：baseline
- 拉伸对齐：stretch
- 整体对齐：
-
程度对齐
-
整体对齐：
.justify-content- 对齐形式
指定断点整体对齐：.justify-content- 类中断 - 对齐形式- 开始地位对齐：start
- 两头地位对齐：center
- 完结地位对齐：end
- 两端对齐元素之间空白均分：between
- 两端对齐元素两侧空白相等：around
- 两端对齐元素空白均分：evenly
-
-
设置显示程序
全副：
.order- 数值
指定断点：.order- 类中断 - 数值 -
==margin 与 padding 的设置 ==
- 周围外间距：
m- 数值 - 周围内间距：
p- 数值 -
独自设置：
m 方向 - 数值 p 方向 - 数值- 左右：x
- 高低：y
- 上：t
- 下：b
- 左：s
- 右：e
- 指定响应式断点间距设置：
.m(p)方向 - 类中断 - 数值 -
背景、边框
- 背景：
.bg- 色彩名 - 周围边框：
.border - 指定方向边框：
.border- 方向 - 边框色彩：
.border- 色彩名 - 勾销边框：
.border-（方向）-0 -
边宽粗细：
.border- 数值- 上：top
- 下：bottom
- 左：start
- 右：end
- 背景：
-
浮动款式
- 左浮动：
float-start - 右浮动：
float-end - 无浮动：
float-none - 指定响应式断点浮动：
float- 类中名 - 方向 - 革除浮动：
clearfix
- 左浮动：