Bootstrap Bootstrap3 与 Bootstrap4 的区别
Bootstrap3 与 Bootstrap4 官网地址
Bootstrap3 官网:https://v3.bootcss.com
Bootstrap4 官网:https://v4.bootcss.com
Bootstrap4 特点
新增网格层适配移动端
全面引入ES6新特性(重写所有JavaScript插件)
css文件减少了至少40%
所有文档都用Markdown编辑器重写
放弃对IE8的支持
Bootstrap3 与 Bootstrap4 区别
| Bootstrap3 | Bootstrap4 |
|---|---|
| Less | Sass语言编写 |
| 4种栅格类 | 5种栅格类 |
| 使用px为单位 | 使用rem和em为单位(除部分margin和padding使用px) |
| 使用push和pull向左右移动 | 偏移列通过offset-类设置 |
| 使用float的布局方式 | 选择弹性盒模型(flexbox) |
Bootstrap3的4种栅格:
特小(col-xs-) 适配手机(<768px)
小(col-sm-) 适配平板(≥768px)
中(col-md-) 适配电脑(≥992px)
大(col-lg-) 适配宽屏电脑(≥1200px)
Bootstrap4的5种栅格:
特小(col-)(<576px)
小(col-sm-)(≥576px)
中(col-md-)(≥768px)
大(col-lg-) (≥992px)
特大(col-xl-)(≥1200px)
Bootstrap Bootstrap3 与 Bootstrap4 的区别的更多相关文章
- Bootstrap3和Bootsrap4的区别
Bootstrap3和Bootstap4的区别 1.Bootsrap4 css文件减少了40%以上 2.Bootsrap4已经不支持IE8以及IOS 6的支持 3.多了些类好组件
- springboot:bootstrap和application有什么区别?
bootstrap和application区别: Spring Cloud 构建于 Spring Boot 之上,在 Spring Boot 中有两种上下文,一种是 bootstrap,另外一种是 a ...
- <bootstrap>bs2和3的区别</bootstrap>
实验室的list网站开始动工了,准备打算用bootstrap作布局. 大前天去本部停了长html5峰会大连站的讲演,着急往回赶,很多感兴趣的东西都没有听到,但是还是了解了一些html5的新特性 电脑端 ...
- spring cloud 配置文件application.yml和bootstrap.yml 的定位,区别和联系
最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...
- spring cloud 配置文件application.yml和bootstrap.yml 的定位,区别和联系总算是有一点明白了
最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...
- springboot(二):bootstrap和application有什么区别?
“SpringBoot专注于快速方便的开发单个个体微服务. SpringCloud是关注全局的微服务协调整理治理框架,它将SpringBoot开发的一个个单体微服务整合并管理起来, 为各个服务之间提供 ...
- twitter bootstrap 2.x 3.x区别
栅格系统 (Grid system)说个我认为比较重要的,相对于RC 1中的3层,现在有4层了 We now have .col-xs (phones), .col-sm (tablets), .co ...
- Mac系统使用VS Code编译Bootstrap 4
环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 Bootstrap3为我们提供了在线编译工具,可 ...
- Bootstrap4 网格系统
学习注意事项 col-*-* 第一个*是设备类型,第二个*是控件宽度的占比 屏幕被等分为12,col-1宽度是1/12,col-6宽度是50%,col-12宽度是100% 给应用了class的elem ...
随机推荐
- Zookeeper基础原理&应用场景详解
简单了解Zookeeper Tips: 如果之前对Zookeeper不了解的话,这里大概留个印象就好了 Zookeeper是一个分布式协调服务,可以用于元数据管理.分布式锁.分布式协调.发布订阅.服务 ...
- 2、ASP.NET Core中服务的生命周期
ASP.NET Core支持依赖注入软件设计模式,它允许在不同的组件中注入我们的服务,并且控制服务的初始化.有些服务可以在短时间内初始化,并且只能在某个特别的组件,以及请求中才能用到:而还有一些服务, ...
- 代码安全丨第二期:URL重定向(跳转)漏洞
URL重定向: URL重定向(URLredirection)漏洞,又称跳转漏洞,指的是网络应用程序接受用户可控的输入作为到外部站点的链接,然后在重定向中使用该链接.该安全漏洞给网络钓鱼攻击提供了极大的 ...
- .Net Core 集成 Kafka
最近维护的一个系统并发有点高,所以想引入一个消息队列来进行削峰.考察了一些产品,最终决定使用kafka来当做消息队列.以下是关于kafka的一些知识的整理笔记. kafka kafka 是分布式流式平 ...
- Tomcat配置及网站创建教程(IDEA)
Tomcat在本机的配置 解压 解压Tomcat压缩包后就算安装完成,解压完成生成文件夹 配置环境变量 1.配置JAVA_HOME 控制面板--系统--查看高级系统设置--环境变量--系统环境变量 新 ...
- RF-字符串拼接
贪婪截取(abcABC123edf123,左边截取abc,右边截取123,得到ABC123edf) 截取字符串 [Arguments] ${string} ${left} ${right} ${str ...
- Django中的模型(操作数据库)
目录 Django配置连接数据库 在Django中操作数据库 原生SQL语句操作数据库 ORM模型操作数据库 增删改查 后台管理 使用后台管理数据库 模型是数据唯一而且准确的信息来源.它包含您正在储存 ...
- jdk8-stream-api
1.stream简介 stream 是一个用来处理集合个数组的api jdk 8 引入strream的原因:1.去掉for循环,使编程变的更加简单(实际运行效率可能没有for循环高)2.paralle ...
- Day003 数据类型
数据类型 强类型语言 要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用(java.c++.c#) 弱类型语言 与强类型语言定义相反(javaScript) Java的数据类型 基本 ...
- CDH安装步骤
Six Steps to CDH Installation There are many options and potential paths that make each CDH cluster ...