Bootstrap

Bootstrap开篇

  • Bootstrap是Twitter公司推出的,专门用于开发响应式布局,移动设备优先的WEB框架
  • Bootstrap当前最新的版本是Bootstrap4,但当下企业使用最多的是Bootstrap3
  • Bootstrap3和4的区别
    • CSS预处理器不同,Bootstrap3采用Less,Bootstrap4采用SASS
    • 格栅种类不同,Bootstrap3提供4中格栅,Bootstrap4提供5种格栅
    • 使用单位不同,Bootstrap3使用px单位,Bootstrap4使用rem作为单位
    • 内部布局方式不同,Bootstrap3使用float布局,Bootstrap4使用flexbox布局
  • Bootstrap兼容性
    • Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,也就是说,在较老的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的
    • IE8以上都能完美使用,IE8下需要通过额外的配置来保证其完整性

Bootstrap容器

  • 在Bootstrap中容器是响应式布局的基础,Bootstrap推荐将所有内容都定义在容器之中,并且容器是启用Bootstrap栅格系统必不可少的前置条件
  • Bootstrap中提供了两个容器
    • container容器(固定容器)
      • 只要给标签添加了container类名,这个标签就变成了Bootstrap的container容器
      • 只要这个标签变成了Bootstrap的container容器,在不同视口大小下就会有不同的固定宽度
    • container-fluid(自适应宽度容器)
      • 只要给标签添加了container-fluid类名,这个标签就变成了Bootstrap的container-fluid容器
      • 只要这个标签变成了Bootstrap的container-fluid容器,那么容器的宽度永远都是100%自适应
  • Bootstrap对视口划分
    • Bootstrap将视口划分为了5种
    • 超小屏幕(xs): <576px
    • 小屏幕(sm): >=576px
    • 中等屏幕(md): >=768px
    • 大屏幕(lg): >=992px
    • 超大屏幕(xl): >=1200px

Bootstrap栅格系统

  • Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局
    默认情况下栅格系统会将一行的内容等分为12份,我们可以通过绑定类名的方式指定这一行中的每一列占用多少份
  • Bootstrap栅格系统特点
    • 默认情况下行的宽度和所在容器一样
    • 默认情况下所有列的宽度是等分所在行的宽度
    • 可以通过col-num方式指定当前列占用12分之几
    • 如果一行中内容的宽度超过了12分,那么将自动换行
  • Bootstrap栅格系统尺寸设置
    • Bootstrap也给列提供了5种响应的尺寸
      • col-*: 设置超小屏幕
      • col-sm-*: 设置小屏幕
      • col-md-*: 设置中等屏幕
      • col-lg-*: 设置大屏幕
      • col-xl-*: 设置超大屏幕
    • 栅格系统列的尺寸特点
      • 如果只设置了小屏幕的大小,那么大屏幕也会采用小屏幕设置的大小
      • 如果只设置了大屏幕的大小,那么小屏幕默认100%
      • 如果大小屏幕都设置了大小,那么在什么屏幕就显示什么尺寸
  • 栅格系统-沟槽
    • Bootstrap默认的栅格和列间有间隙沟槽,一般是左右-15px的margin或padding处理,可以使用.no-gutters类来消除它,这将影响到.row行,列平行间隙及所有子列
  • 栅格系统-对齐方式
    • Bootstrap4的栅格系统是使用伸缩布局实现的,所以也可以通过类名快速的设置伸缩项在主轴和侧轴的对齐方式
  • 栅格系统-列偏移
    • offset-*: 偏移多少份位置
    • 写在哪一列就是哪一列偏移
  • 栅格系统-列排序
    • order-*: 从小到大排序,小的在前面,大的在后面
    • 没有排序的列位置不会发生 变化,只有排序的列才参与位置变化

你可能感兴趣的:(Bootstrap)