bootstrap3 和4 有什么区别
发布者:IT人在线 | 发表时间:2019/1/18 11:58:08
什么是栅格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
当然也可以使用百分比,12列看作为100%,每一列为20%,就可以实现在一行扩展出5列的效果
网格选项
bootstrap使用了五种栅格选项来形成栅格系统,适合不同尺寸的屏幕设备。
col-xs-*超小屏幕 手机 (<768px) (在bootstrap4里面用col-)
col-sm-*小屏幕 平板 (≥576px)
col-md-*中等屏幕 桌面显示器(≥768px)
col-lg-*中等屏幕 桌面显示器 (≥992px)
col-xl- 超大桌面显示器(≥1200px) (只有bootstrap4里面有xl)
.container实现固定的宽度并居中呈现,并和其它网格实现对齐 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下), 每列都有水平的padding值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。
bootstrap4它的源码是采用 Sass 语言编写的
使用flex的布局方式
全部使用了rem为单位(除了部分的margin和padding使用px)
Bootstrap 4 共有5种栅格类,依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)
偏移列通过 offset- 类来设置,例如:.offset-md-4 是把.col-md-4 往右移了四列格。
bootstrap3使用float的布局方式
bootstrap3 共有4种栅格类,依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)
bootstrap3里面使用push和pull向左和向右移动
bootstrap3和bootstrap4最大的区别就是4用的是flex布局,3用的是float浮动,bootstrap4的栅格类特小(col-),bootstrap3的栅格类特小(col-xs),bootstrap4新增加的栅格特大(col-xl-),bootstrap4用offset来移动,bootstrap3用push和pull向左和向右移动
应该使用bootstrap3还是4,这个看个人,有的人觉得bootstrap3好用,有的人觉得bootstrap4好用,所以用3还是4,取决于个人。