1.bootstrap4与boostrap3的区别
bootstrap3 | bootstrap4 |
---|---|
less | Sass语言编写 |
4种栅格类 | 5种栅格类 |
使用px为单位 | 使用rem和em为单位 除部分(margin和padding使用px) |
使用push和pull向左右移动 | 偏移列通过offset设置 |
使用float的布局方式 | 选择弹性盒子模型(flexbox) |
2.bootstrap3的4种栅格
特小(col-xs-) 适配手机(<768px)
小(col-sm-)适配平板(>=768px)
中(col-md-)适配电脑(>=992px)
大(col-lg-)适配宽屏电脑(>=1200px)
3.bootstrap4的5种栅格
特小(col-) 针对所有设备
小(col-sm-)平板(>=576px) 大于等于
中(col-md-)左面显示器(>=768px) 大于等于
大(col-lg-)大桌面显示器(>=992px)大于等于
超大(col-xl-)超大桌面显示器(>=1200px) 大于等于
4.bootstrap4网格系统规则
①.container 固定宽度
②.container -fluid 全屏宽度