文档章节

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

o
 osc_4nmshwhm
发布于 2018/08/07 10:32
字数 440
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前言:在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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

【软件工具篇02】使用Anki克服遗忘曲线

使用Anki克服遗忘曲线 艾宾浩斯遗忘曲线 百度百科:遗忘曲线由德国心理学家艾宾浩斯研究发现,描述了人类大脑对新事物遗忘的规律。人体大脑对新事物遗忘的循序渐进的直观描述,人们可以从遗...

osc_wobxrheh
28分钟前
0
0
面向对象的理解

面向对象的三大特性 封装 继承 多态 面向对象的七大原则 单一职责原则:每一个类应该专注于做一件事情。即高内聚,低耦合。类的功能要单一,体积不要过于庞大。 开闭原则:一个对象对扩展开发...

osc_2wq8ft8d
29分钟前
11
0
Laravel Redis分布式锁实现源码分析

首先是锁的抽象类,定义了继承的类必须实现加锁、释放锁、返回锁拥有者的方法。 namespace Illuminate\Cache;abstract class Lock implements LockContract{ use InteractsWithTime;...

osc_2jegjdnw
31分钟前
0
0
【HDFS篇03】HDFS客户端操作 --- 开发环境准备

存储越困难,提取越容易 HDFS客户端操作---开发环境准备 步骤一:编译对应HadoopJar包,配置Hadoop变量 步骤二:创建Maven工程,导入pom依赖 <dependencies><dependency><groupId>ju...

osc_ds5ni1ur
32分钟前
7
0
老板,来瓶辣椒酱

最近网剧《隐秘的角落》非常的火爆,结局反转让人难以预料,但前两天发生了一场堪比史诗级大片的纠纷,纠纷的结局反转让人大跌眼镜,估计是神编剧都写不出来那样的剧本...而引发这场纠纷最核...

osc_1loi8uc4
34分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部