1.Bootstrap5

279 阅读2分钟

Bootstrap5与Bootstrap4相比都有哪些重大改变呢?

  1. 不在支持internet explorer10和internet explorer11。节省了很多为兼容而写的代码,同时也可以更好的运用html5和css3的一些新特征。
  2. 不再依赖jQuery。jQuery优点很多,更能也很强大,但是对于一些小项目而言,jQuery大大的增加了源码包的大小。Bootstrap5不再依赖jQuery,可以大大的减小Bootstrap的源码包大小。当然,这里说的不再依赖是说jQuery不再是必须的,如果你需要jQuery,依然可以单独引入,另外单独引入的话你还可以直接使用最新版本的jQuery,而不是Bootstrap配套的版本。
  3. 优化了各个组件的外观,包括调色板、字体等,使设计的网站变得更加好看,一直以来Bootstrap给人诟病的一点就是做出的网站页面太死板,面目丑陋,需要自己另外写css优化,现在Bootstrap5做好的页面已经非常美观,可直接应用了,大家可以直接看看www.bootstrap.cn ,纯Bootstrap5开发,没有使用任何其他css文件。
  4. 增加了很多组件,现在基本上设计网页的常用组件都能找到了,网页设计变得不要太轻松了,简单复制、粘贴、修改以下文字,拼凑起来即可。
  5. 体积大大减小。完整编译版仅12. Bootstrap版本说明M多,经俺老刘试验,如果你很在意软件包大小,完全可以将bootstrap.min.css和bootstrap.bundle.min.js提取出来,总共不到100k,目前没发现任何问题。

2.#  Bootstrap版本说明

1.## Bootstrap的版本- 已编译版。已编译好的js和css文件,包含所有的已编译文件,可以整体引入框架,也可以部分引入你需要的框架组件。

  • 源码版。你可以根据需要修改源码后,重新编译出定制版的Bootstrap、 2.## 最简版本可以直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件,就完全可以使用Bootstrap了,是不是太爽了

Bootstrap5安装

(1)普通安装

1 、Bootstrap下载。 Bootstrap5安装非常简单,下载已编译版js和css文件(由于框架经常会更新,源码下载建议到www.bootstrap.cn 下载最新版本),解压缩后将目录改名称为bootstrap5,放在你的网站目录,例如static目录下,之所以改名是为了书写的时候简单,避免输错。

2、在你的网页<head> </head>之间,添加

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/bootstrap5/css/bootstrap.min.css" >

\

3、在你的网页 </body>之前,添加

<script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>

注意:要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。 另外如果你使用了最简安装或改变了路径,要按照你的实际路径写。

4、你的代码就可以写在<body><script之间了

最小化安装

1、直接下载最小化版本,或者下载已编译版本文件,提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件放在静态文件所在目录下的Bootstrap5文件夹中。 2、在你的网页<head> </head>之间,添加

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap5/css/bootstrap.min.css" >

3、在你的网页 </body>之前,添加

<script src="bootstrap5/js/bootstrap.bundle.min.js" ></script>

注意:这里用相对路径可以在编辑静态页面预览效果的时候不用放在服务器,直接用浏览器打开即可。