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

你可能感兴趣的