bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)
前言:在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的区别)的更多相关文章
- 在知乎上看到 Web Socket这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错
在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...
- vs2010如何安装mvc3,怎样安装,详细的步骤,从哪下载?请看这篇文章。
vs2010如何安装mvc3,怎样安装,详细的步骤,从哪下载?请看这篇文章. 安装步骤:vs2010 -> vs2010sp1 -> AspNetMVC3Setup -> AspNe ...
- Java设计模式(十三) 别人再问你设计模式,叫他看这篇文章
原创文章,转载请务注明出处 OOP三大基本特性 封装 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承 继承是指这样一种能力,它可以使 ...
- APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了 彻底理解android中的内部存储与外部存储 存储在内部还是外部 所有的Android设备均有两个文件存储区域:"intern ...
- jq最新前三篇文章高亮显示
/*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...
- 一篇文章,读懂 Netty 的高性能架构之道
原文 Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机 ...
- Node.js 创建HTTP服务器(经过测试,这篇文章是靠谱的T_T)
Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...
- 细心看完这篇文章,刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...
- 【转】APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件.那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢? ...
随机推荐
- 广搜迷之RE及迷之WA
最近做广搜的时候天天迷之RE,经过dalao@口昭寿指点,我把string数组换成了char二维数组就AC了,(然而我并不知道为什么) 传送门 <——以这个题为例 #include <b ...
- UOJ#449. 【集训队作业2018】喂鸽子 min-max容斥,FFT
原文链接www.cnblogs.com/zhouzhendong/p/UOJ449.html 题解 设 f(i) 表示给 i 只鸽子喂食使得至少一只鸽子被喂饱的期望次数,先 min-max容斥 一下. ...
- 史上最全的select加锁分析(Mysql)
引言 大家在面试中有没遇到面试官问你下面六句Sql的区别呢 select * from table where id = ? select * from table where id < ? s ...
- 初学笔记之:Java_Script的for循环事件绑定
看JS,一直纠结于for循环事件绑定,我一直不理解,想找到一些解释,以下是个人研究一个下午后的一些见解,有不对的还望大神们指正,轻喷.在这里谢过啦. 首先,目的是做一个滑动切换图片的效果,上JS代码: ...
- JAVA注释--2019-04-28
一.JAVA自带注解 1.@Override:覆盖父类方法 2.@Deprecated:不建议使用(就是方法上画一条横线划掉那种) 3.@SuppressWarnings:去掉警告:使用方法:@Sup ...
- Pytoch机器学习乱玩(一):数学建模作业,体重与心率
动物心率与体重的模型 动物消耗的能量p主要用于维持体温,而体内热量通过其表面积S散失,记动物体重为w,则\(P \propto S \propto w^{\alpha}\).又\(P\)正比于血流量\ ...
- C# 神奇的Web services 请求超时问题 排查分析
服务器上有两个接口,一个是Web Services(asmx文件)接口,一个是MVC API (普通的GET请求接口) 神奇的事情是这样的,只要我使用WebRequest请求两次,再使用Web Ser ...
- 20181117-python第二章学习小结-part2
浮点型补充: 有限小数与无限循环小数,不包括无理数! 小数点后面的数据运算太复杂,精确度不及整数! 尽量使用科学计数表示小数 列表学习(语法) 创建:[] list = [] #创建空表 list ...
- git教程——安装配置
Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个 ...
- Ubuntu下安装Pycharm出现unsupported major.minor version 52.0
(一)原因 Ubuntu下pycharm安装:https://jingyan.baidu.com/article/60ccbceb4e3b0e64cab19733.html pycharm激活:htt ...