CSS样式——Bootstrap响应式布局框架

• Bootstrap响应式布局框架特色

  1. 快速实现响应式布局
  2. 基于Flex的栅格化布局系统（将一行分为12个单元格）
  3. 拥有丰富的组件和工具方法
  4. 常见交互的方法使用
  5. 引入文件后，元素添加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