新闻动态
做网站设计前端开发Bootstrap 4特点，内容怎么设置仅在手机端显示
科思拓网站建设公司 2020-01-03
网站建设做前开发人员，科思拓网站建设公司推荐开发者使用bootstrap开发，使用简单，自带样式漂亮。需要注意浏览器兼容问题Bootstrap3支持IE8之前，需添加responds.js文件。
做网站设计前端开发Bootstrap 4特点，内容怎么设置仅在手机端显示
网站建设做前开发人员，科思拓网站建设公司推荐开发者使用bootstrap开发，使用简单，自带样式漂亮。
需要注意浏览器兼容问题Bootstrap3支持IE8之前，需添加responds.js文件。
Bootstrap4 的css文件比Bootstrap3减少了至少40%，支持Internet Explorer 10及更高版本，不支持IE9（即使大多兼容，依然不推荐）。下面跟着科思拓来看看详细区别吧！
Bootstrap4与Bootstrap3源码编写区别
bootstrap4它的源码是采用Sass语言编写的
bootstrap3它的源码是采用Less语言编写的
Bootstrap 3使用Responsive Utilities控制响应式显示
Bootstrap 4-alpha改用Display Property来控制响应式显示
Bootstrap4移动优先设置:
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
而在Bootstrap3的设置如下:
Display通用类别，可用于切换组件的显示与否，并且可以包含响应式设定
CSS Class | 说明 |
d-none | 不显示也不占空间 |
d-inline | 行内并排容器，大小以内容物判定 |
d-inline-block | 行内块状容器，大小以内容物判定，可设定宽高、上下外距等属性 |
d-block | 块状容器，大小以空间判定，可设定宽高、上下外距等属性 |
d-table | 表格容器 |
d-table-cell | 表格元素容器 |
d-flex | 块级伸缩容器 |
d-inline-flex | 行内级伸缩容器 |
搭配响应式的类型做变化
有了Display通用类别，再搭配响应式的设定，就可以做出响应式显示/隐藏HTML元素的功能。
BS 3 | BS 4 | 备注 |
hidden-xs-down | d-none d-sm-block | |
hidden-sm-down | d-none d-md-block | |
hidden-md-down | d-none d-lg-block | |
hidden-lg-down | d-none d-xl-block | |
hidden-xl-down | d-none | (same as hidden) |
hidden-xs-up | d-none | (same as hidden) |
hidden-sm-up | d-sm-none | |
hidden-md-up | d-md-none | |
hidden-lg-up | d-lg-none | |
hidden-xl-up | d-xl-none | |
hidden-xs | d-none d-sm-block | (only) |
hidden-sm | d-block d-sm-none d-md-block | (only) |
hidden-md | d-block d-md-none d-lg-block | (only) |
hidden-lg | d-block d-lg-none d-xl-block | (only) |
hidden-xl | d-block d-xl-none | (only) |
visible-xs | d-block d-sm-none | (only) |
visible-sm | d-none d-sm-block d-md-none | (only) |
visible-md | d-none d-md-block d-lg-none | (only) |
visible-lg | d-none d-lg-block d-xl-none | (only) |
visible-xl | d-none d-xl-block | (only) |
Bootstrap4与Bootstrap3栅格系统区别
bootstrap3共有4种栅格类，依次是：
特小(col-xs-) （<=768px）
小(col-sm-) （>=768px）
中(col-md-) （>=992px）
大(col-lg-) （>=1200px）
Bootstrap 4共有5种栅格类，依次是：
特小(col-) （<576px）
小(col-sm-) （>=576px）
中(col-md-) （>=768px）
大(col-lg-) （>=992px）
特大(col-xl-) （>=1200px）
bootstrap3的栅格系统是使用浮动（float）的布局方式 Bootstrap 4使用弹性盒模型（flexbox）的布局方式
使用px为单位 使用rem和em为单位（除部分margin和padding使用px）
偏移列通过offset- 类来设置，例如：.offset-md-4是把.col-md-4往右移了四列格。
bootstrap3里面使用push和pull向左和向右移动
