bootstrap3和bootstrap4的区别

bootstrap3和bootstrap4的区别

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

一.栅格系统

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

https://cdn.chuangxiangniao.com/2025/03/20250315174639255.png

原来的版本中全部都是使用了float布局,在新版本中使用了flex布局。而且在新版本中栅格系统col不用添加指定的列数。比如一个row里有2个col,自动分为-6,-6。如果其中三个col中有个指定了它的列数,而其他两个没有,那就是(12-x/)2。

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

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

相关推荐:《bootstrap入门教程》

三.媒体对象

去除了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

以上就是bootstrap3和bootstrap4的区别的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3003009.html

(0)
上一篇 2025年3月13日 00:30:49
下一篇 2025年2月27日 23:47:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • bootstrap4的版本有哪些

    bootstrap目前字第4版中只有Bootstrap v4.0.0,没有其他版本。 如果你想了解更多关于bootstrap的知识,可以点击:bootstrap框架   Bootstrap作为世界上最流行的CSS框架,可以让前端开发更快速、…

    2025年3月13日
    200
  • bootstrap3如何禁止响应式

    bootstrap3禁止响应式的设置方法:1、移除设置浏览器视口的标签“”;2、通过为“.container”类设置一个width值来覆盖框架的默认width设置;3、移除所有导航条的折叠和展开行为即可。 推荐:《bootstrap教程》 …

    2025年3月13日
    200
  • bootstrap4有哪些版本?

    bootstrap4当前的主要版本有:v4.0、v4.1、v4.2、v4.3、v4.4、v4.5,最新更新的版本为v4.5.3;bootstrap4中主要版本的最终版本:v4.0.0、v4.1.3、v4.2.1、v4.3.1、v4.4.1。…

    2025年3月13日
    200
  • 聊聊Bootstrap4中的网格系统

    本篇文章带大家一起了解一下bootstrap中的网格系统。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Bootstrap4的网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(v…

    2025年3月13日
    200
  • 如何在Bootstrap中创建列表?

    Bootstrap 列表提供了多种列表样式,包括无序列表、有序列表和描述列表,通过使用类名如 list-group 和 list-group-item 可以轻松创建美观一致的列表。此外,Bootstrap 还支持创建带有图标、链接和灵活布局…

    2025年3月12日
    200
  • lr和ps有什么区别

    后期软件的选择有很多,不过说到摄影爱好者常用的,还是photoshop和lightroom。两者同为常用的后期软件,功能上各有特点,读者们又会选择哪个成为主力后期软件呢?下面就会为大家分析两个软件的优缺点,大家可以根据自己的需求进行选择。 …

    2025年3月12日
    200
  • psd和psb的区别

    在保存ps文件时,我们可以保存成psd、psb等多种文件格式,你知道psd和psb之间的区别吗?一起来看看吧! psd和psb的区别 PSD/PDD是Adobe公司的图形设计软件Photoshop的专用格式,PSD文件可以存储成RGB或CM…

    2025年3月12日
    200
  • ps32位和62位的区别

    ps32位和62位的区别 现在电脑系统分为32位和64位,软件也分为32位和64位, 区别在于32位的软件完美运行于32位的电脑系统,64位的软件可以在64位电脑系统上完美运行。 (免费学习视频教程推荐:ps视频教程) Photoshop3…

    2025年3月12日
    200
  • 矢量蒙版和图层蒙版有什么区别

    区别分析如下: 图层蒙版: 1、由选区生成; 2、用像素工具编辑; 3、缩放会出现马赛克; 4、半透明度:可以使用渐变工具在图层蒙版上拉渐变颜色。 建立图像图层蒙版:首先ctrl+C复制选区,添加图层蒙版。然后按alt键并点击图层蒙版,ct…

    2025年3月12日
    200
  • PS羽化和模糊有什么区别?

    羽化和模糊两大图像处理技术存在差异。羽化主要软化图像的硬边缘,通过改变透明度或不透明度产生自然的渐变效果,适合抠图、合成等场景。而模糊会降低图像整体清晰度,使细节变得不明显,常用于营造朦胧意境、虚化背景或降低图像噪点。 PS羽化和模糊,乍一…

    2025年3月12日
    200

发表回复

登录后才能评论