前言:在bootstrap4出现之后修改了bootstrap3的不方便之处,让使用框架的前端开发者更加便捷.。(bootstrap下文中简称为bs)

一.栅格系统

相对于原来的bs3,bs4具有了范围更大的适应区间.在过去的bs3中的xs sm md lg 中,bs4又增加了一个xl这个区间,为超大屏幕做出了适应。  

超小
<576px

≥576px
中等
≥768px

≥992px
超大
≥1200px
最大容器宽度 无(自动) 540px 720像素 960像素 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数 12
天沟宽度 30px(每列15px)
嵌套
列排序

原来的版本中 全部都是使用了float布局,在新版本中使用了flex布局

而且在新版本中栅格系统col不用添加指定的列数  比如一个row里有2个col 自动分为-6 -6

如果其中三个col 中有个指定了它的列数 而其他两个没有  那就是 (12-x/)2

二.img-circle与新版本中的rounded-circle

老版本中img-circle只对图片 而新版本中rounded-circle对所有元素全部生效,至于好不好用了才知道。

三.媒体对象

去除了media-left media-right 只有media-body 在其中会自适应 在body前写一个图片即使left,在body之后便是right

四.display系列 / 偏移 / 外边距 / 内边距

偏移 不再使用 col-[尺寸]-offset-[x] 而是 offset-[尺寸]-[x]

外边距 : ml 左外边距 mr 右外 ,mt 上外 , mb 下外 mx-水平方向 my- 垂直方向
ml-1
内边距 : pl,pr,pt,pb, px ,py

五.颜色

primary secondary info success warning danger light dark
bg- [颜色]
text -[颜色]
btn -[]
badge - [] 对应 bs3 label

bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)的更多相关文章

  1. 在知乎上看到 Web Socket这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错

    在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...

  2. vs2010如何安装mvc3,怎样安装,详细的步骤,从哪下载?请看这篇文章。

    vs2010如何安装mvc3,怎样安装,详细的步骤,从哪下载?请看这篇文章. 安装步骤:vs2010 -> vs2010sp1 -> AspNetMVC3Setup -> AspNe ...

  3. Java设计模式(十三) 别人再问你设计模式,叫他看这篇文章

    原创文章,转载请务注明出处 OOP三大基本特性 封装 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承 继承是指这样一种能力,它可以使 ...

  4. APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了

    APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了 彻底理解android中的内部存储与外部存储 存储在内部还是外部 所有的Android设备均有两个文件存储区域:"intern ...

  5. jq最新前三篇文章高亮显示

    /*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...

  6. 一篇文章,读懂 Netty 的高性能架构之道

    原文 Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机 ...

  7. Node.js 创建HTTP服务器(经过测试,这篇文章是靠谱的T_T)

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

  8. 细心看完这篇文章,刷新对Javascript Prototype的理解

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...

  9. 【转】APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了

    只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件.那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢? ...

随机推荐

  1. Exp1 PC平台逆向破解 20165235 祁瑛

    Exp1 PC平台逆向破解 20165235 祁瑛 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字 ...

  2. LocalDate、LocalDateTime、LocalTime开发小结

    在我之前的文章<[整理]Java 8新特性总结 >中有提到Date/Time API (JSR 310)对日期与时间的处理.它将服务端对时间的处理进行了统一,使得对时间的处理更加规范和统一 ...

  3. Windows环境下,本地Oracle创建dblink连接远程mysql

    前言 我的情况是,本地安装了oracle(安装完成后带有SQL Developer,不需要再安装instantclient),创建dblink去连接远程的mysql.有些朋友可能是 本地使用PL\SQ ...

  4. P2649 - 【NOIP2017】列队

    Description Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n×m 名学生,方阵的行数为 ...

  5. Hibernte

    什么是CRM?(了解) CRM(customer relationship management)即客户关系管理,是指企业用CRM技术来管理与客户之间的关系.在不同场合下,CRM可能是一个管理学术语, ...

  6. linux系统资源监控

    top命令 1.平均负载(load average): 正在耗费CPU进程与正在等待io的进程之和,三个值分别是一分钟,五分钟,十五分钟的平均负载,负载值只要小于CPU颗粒数属于正常情况 任务进程(T ...

  7. js数据类型以及数组字符串常用方法

    JS判断数据类型 例子: var a = "iamstring."; var b = 222; var c= [1,2,3]; var d = new Date(); var e ...

  8. linux configure 应用

    linux下configure命令详细介绍 2018年01月11日 15:02:20 冷月霜 阅读数:705 标签: configure 更多 个人分类: 数据库技术   Linux环境下的软件安装, ...

  9. linux crontab 执行mysqldump全局备份为空

    今天遇到个问题,在定时备份时 去查看备份文件,发现大小竟然为0,执行 备份sh文件备份, 备份的sql文件大小正常.试了几种办法. 最终解决办法: 问题原因: 因为我设置的环境变量 就直接在sh中 使 ...

  10. Nginx的虚拟主机配置

    虚拟主机技术能够让同一台服务器.同一组Nginx进程上运行多个网站,降低了资金和服务器资源的损耗.Nginx可以配置三种类型的虚拟主机,本文就是主要介绍这三种虚拟主机配置方式. 配置基于IP的虚拟主机 ...