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-*: 从小到大排序,小的在前面,大的在后面
  • 没有排序的列位置不会发生 变化,只有排序的列才参与位置变化