过年了,好无聊,顺便把bs5 学习了下,看了下B站的课程和官方文档,感觉比BS4 更容易操作了,慢慢的变成了一个组件性的东西,觉得跟vue.js 一起用,应该不错,特此总结说明下,BS5 与之前版本的区别,

目录

1.不支持IE浏览器

2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置

3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLASS 里面设置了,不用特别设定style 了 ,也比较方便

4. 需要在 head 里面引入:(这个在BS4 里面就有要求,不算增加),不能貌似更加要求了,不加的话,根本用不了BS5

5.完全去掉jq(全部用自己的js就行了),仅仅导入2个文件(注意:这里是用的django的静态设置),主要是后面的2个文件(  bootstrap.min.css,bootstrap.bundle.min.js) ,导入这2个文件就能支持自己的全部内容,JS 里面也有说明用法,不过,不太习惯,习惯用自己的

6.颜色增加到到了8种,基本也够用了(跟前面的版本类似,可以用到各种地方)


2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置

$grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px,xxl: 1400px
);

大概 5类屏幕的选择,可以根据项目的要求 更加有针对性的设置,大概5个级别,当然了,也可以 通过 Sass 里面自己设置增加项,不过,一般的够用了

container-fluid-mb

3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLASS 里面设置了,不用特别设定style 了 ,也比较方便

4. 需要在 head 里面引入:(这个在BS4 里面就有要求,不算增加),不能貌似更加要求了,不加的话,根本用不了BS5

  <meta name="viewport" content="width=device-width, initial-scale=1">

5.完全去掉jq(全部用自己的js就行了),仅仅导入2个文件(注意:这里是用的django的静态设置),主要是后面的2个文件(  bootstrap.min.css,bootstrap.bundle.min.js) ,导入这2个文件就能支持自己的全部内容,JS 里面也有说明用法,不过,不太习惯,习惯用自己的

<link rel="stylesheet" href="{% static 'css/bootstrap.min5.css' %}">
<script src="{% static 'js/bootstrap.bundle.min.js' %} "></script>

6.颜色增加到到了8种,基本也够用了(跟前面的版本类似,可以用到各种地方)

$theme-colors: ("primary":    $primary,"secondary":  $secondary,"success":    $success,"info":       $info,"warning":    $warning,"danger":     $danger,"light":      $light,"dark":       $dark
);

关于bootstrap4 以下 与bootstrap5 的区别相关推荐

  1. Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】

    [Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目   录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...

  2. bootstrap4--表格和网格系统

    目录 表格 表格类 滚动条设置 表格颜色类 网格系统 网格类 基本结构 偏移列 表格 bootstrap中与html5中的表格创建方式相同,但是对于有些标签效果有所不同,我们可以看看下面这段代码,分别 ...

  3. bootstrap4和bootstrap3的区别

    Bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.下面本篇文章给大家介绍bootstrap4和bootstrap3的区别 ...

  4. Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】

    [Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目   录 W3C标准盒子模型和IE盒子模型的区别 Bootstrap4--新闻管理手机端页面 菜 ...

  5. Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局(圣杯布局)案例、CSS在线手册、flex布局中的对齐方式】

    [Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目   录 实训安排 日常要求.项目要求 项目开发流程 HTML+CSS+JavaScript 基 ...

  6. [css] 你有使用过哪些栅格系统?都有什么区别呢?

    [css] 你有使用过哪些栅格系统?都有什么区别呢? bootstrap3 float完成的栅格 bootstrap4 flex完成的栅格 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易 ...

  7. php 和bootstrap,bootstrap4和bootstrap3的区别是什么

    Bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.下面本篇文章给大家介绍bootstrap4和bootstrap3的区别 ...

  8. BootStrap框架模块:BootStrap4基础

    BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库,它支持Sass混合.响应式矩阵系统和它自带的库分量和分量的JavaScript.基于Bootstrap提供强大的功能,能够让 ...

  9. Bootstrap4总结(3)

    一.Bootstrap4 导航 导航栏大多数放在页面的顶部. 1.水平导航栏 使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建 ...

最新文章

  1. 对象拷贝类PropertyUtils,BeanUtils,BeanCopier的技术沉淀
  2. 1086 就不告诉你
  3. 学习笔记:The Log(我所读过的最好的一篇分布式技术文章
  4. 江湖救急,换对姿势比《颈椎病康复指南》更有效丨极客官舍
  5. gan pytorch 实例_GaN教程(1)|美国宜普(EPC)公司推出“如何使用氮化镓器件”系列视频教程,讲授GaN功率晶体管和集成电路设计的方方面面...
  6. El表达式和fn函数一起使用
  7. 简单java面试题(带答案)
  8. React Native状态机和应用设计思路
  9. OpenCV 二值化分割方式
  10. MariaDB安装配置
  11. macBook笔记本音乐播放器没声音
  12. lol封号维护服务器,LOL手游:各大服务器突然断开,众主播账号被永久封停
  13. 【秒杀】一、系统设计要点,从卖病鹅说起
  14. 常用软件密码破解完全指南[转]
  15. 联通鸿蒙卡怎么样,联通腾讯大王卡对比百度大神卡:到底应该怎么选?
  16. Linux搭建maven私服
  17. Java的宝贝——反射
  18. shell exec命令
  19. 我的奇思妙想机器人消防员_我的奇思妙想机器人作文500字
  20. CentOS 7之ifconfig

热门文章

  1. 桌面窗口管理器 GPU 3D 占用100% 的解决方法
  2. Android webview登录手机QQ
  3. Problem Q: 计算公司员工的工资
  4. 数据挖掘十大经典算法 整理
  5. YYLabel的几个实用小技巧
  6. 一元线性回归方程的参数估计
  7. 树莓派实现温控风扇智能降温
  8. 从零点亮一个led灯
  9. 【PCB软件技巧】OrCAD与PADS相互搭配使用的相关要点
  10. 超级计算机还是超级烂尾?天河一号闲置近1年