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
- 左浮动：
小高同学
19 声望2 粉丝
« 上一篇
CSS样式——CSS新特性下一篇 »
Javascript——基础知识
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。