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

本文介绍了Bootstrap 4相比Bootstrap 3的主要改进,包括更宽泛的响应式栅格系统、新的图片圆角处理方式、简化媒体对象布局、增强的布局与间距控制以及更新的颜色系统。针对前端开发者关注的重点进行详细解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

一.栅格系统

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

 

超小
<576px

≥576px
中等
≥768px

≥992px
超大
≥1200px
最大容器宽度无(自动)540px720像素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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值