关于bootstrap4 以下 与bootstrap5 的区别
过年了,好无聊,顺便把bs5 学习了下,看了下B站的课程和官方文档,感觉比BS4 更容易操作了,慢慢的变成了一个组件性的东西,觉得跟vue.js 一起用,应该不错,特此总结说明下,BS5 与之前版本的区别,目录1.不支持IE浏览器2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLAS
·
过年了,好无聊,顺便把bs5 学习了下,看了下B站的课程和官方文档,感觉比BS4 更容易操作了,慢慢的变成了一个组件性的东西,觉得跟vue.js 一起用,应该不错,特此总结说明下,BS5 与之前版本的区别,
目录
2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置
3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLASS 里面设置了,不用特别设定style 了 ,也比较方便
4. 需要在 head 里面引入:(这个在BS4 里面就有要求,不算增加),不能貌似更加要求了,不加的话,根本用不了BS5
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
);
更多推荐
已为社区贡献1条内容
所有评论(0)