Bootstrap3和Bootstrap4区别

首先引入Bootstrap3和4官网连接； Bootstrap3 VS 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）

Bootstrap4特点

新增网格层适配了移动端；
全面引入ES6新特性（重写所有JavaScript插件）；
css文件减少了至少40%；
所有文档都用Markdown编辑器重写；
放弃对IE8的支持

Bootstrap3和Bootstrap4区别相关推荐

Bootstrap3 与Bootstrap4垂直水平居中
Bootstrap水平居中 // 文本:class ="text-center" // 图片居中:class = "center-block" //其他元素:/ ...
Bootstrap4 网格系统
学习注意事项 col-*-* 第一个*是设备类型,第二个*是控件宽度的占比屏幕被等分为12,col-1宽度是1/12,col-6宽度是50%,col-12宽度是100% 给应用了class的elem ...
bootstrap4中col-sm col-md col-lg col-xl
col-sm col-md col-lg col-xl bootstrap3和bootstrap4中的栅格系统不一样: bootstrap3: bootstrap4: bootstrap4
Bootstrap开篇理解:
PS:本人为新手,该文章仅作为笔记记载学习 1.什么是Bootstrap? Bootstrap是Twitter公司推出的,专门用于开发响应式布局,移动设备优先的WEB框架 (美国Twitter公司的设 ...
前端追梦人响应式网页设计
一. 响应式元素及媒介 1.1 基于宽度百分比的图像缩放 <!DOCTYPE html> <html lang="en"> <head>< ...
bootstrap 5 表单验证
bootstrap 5 表单验证写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...
Django项目开发——002架构梳理
python三个开发框架: django tornado flask MVC #开源高级web开发框架,使用python #快速开发: ORM 构建数据库,方法简洁. #内置应用:admin,auth ...
使用React的static方法实现同构以及同构的常见问题
代码地址请在github查看,假设有新内容.我会定时更新.也欢迎您star,issue,共同进步 1.我们服务端渲染数据从何而来 1.1 怎样写出同构的组件服务端生成HTML结构有时候并不完好.有时 ...
bootstrap 图片居中,浅谈Bootstrap中的垂直水平居中
本篇文章给大家介绍一下Bootstrap3和Bootstrap4的垂直水平居中.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> ...
前端：使用BootStrap搭建一个简单的网页
之前有想法学习一下前端框架的,后来没有坚持下来.连最基础的栅格系统都忘记了.于是,花了一点时间,重新温习了一下.写了一个简单的网页.页面大致是下面这张图.做得比较一般,不过能够自适应各种设备大小了. ...

Bootstrap3和Bootstrap4区别

Bootstrap3和Bootstrap4区别

不同点

Bootstrap3和Bootstrap4区别相关推荐

最新文章

热门文章