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,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件.那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢? ...
随机推荐
- scala_1
scala 开发spark可以使用哪些语言: Python开发45% scala % java % 一.scala的概述 java基础上代码的简化版.功能的加强版 隐式转换 高阶函数 一个函数的参数是 ...
- 2013年省赛H题
2013年省赛H题你不能每次都快速幂算A^x,优化就是预处理,把10^9预处理成10^5和10^4.想法真的是非常巧妙啊N=100000构造两个数组,f1[N],间隔为Af2[1e4]间隔为A^N,中 ...
- java实现点击图片文字验证码
https://www.cnblogs.com/shihaiming/p/7657115.html
- 计算机硬件&操作系统
一.计算机的硬件: 控制器:计算机的指挥系统 运算器:数学运算+逻辑运算 存储器I/O设备:存I取O数据 内存(内存条):短期记忆,速度快,但是断电数据会丢失: 外存(硬盘):永久记忆,速度非 ...
- 动态规划——Palindrome Partitioning II
Palindrome Partitioning II 这个题意思挺好理解,提供一个字符串s,将s分割成多个子串,这些字串都是回文,要求输出分割的最小次数. Example:Input: "a ...
- Python 3.5 filter
filter(F, L) F: 函数.L:范围 filter的功能是:用函数F把L范围内的参数做过滤 通常和list一起使用,把过滤后的参数做成列表 list(filter(lambda n:not ...
- [HEOI2016/TJOI2016]游戏
Description: 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了这样一 ...
- DevExpress内 GridControl中复选框值问题
在DevExpress的 GridControl内的复选柜勾选后,界面看到是勾选状态,但对应的DataView的值仍未变,在以下事件内处理 在对应的DataView内的 CellValueChangi ...
- STS(Spring Tool Suite)下SSM(Spring+SpringMVC+Mybatis)框架搭建(一)
最近在用SSM框架做一个网站,就顺便把自己要做的笔记需要了解的东西都写了下来,看看对大家学习SSM框架有没有帮助. 开发环境: 1.win10 64位 2.spring-tool-suite-3.9. ...
- Linux_常用命令简单介绍(netstat,awk,top,tail,head,less,more,cat,nl)
1.netstat netstat -tnl | grep 443 (查看443端口是否被占用) root用户,用netstat -pnl | grep 443 (还可显示出占用本机443端口的进程P ...