Flask引用Bootstrap模板

使用bootstrap前，如官网所述，需要引用相应的CSS、JS文件。
那在Flask文件中该如何引用呢？

1、引用链接式

仔细观察一下上图的.css .js引用方式，是一个http链接。
也就是说，现在引用的是官方某个网址的.css .js文件，此时我们并不需要再下载任何文件，直接把这几行导入至HTML文件中便可直接使用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

2、引用本地文件式

也可以在官网下载bootstrap源文件，需要引用某些.css .js文件时从本地引用。
下载后的文件目录：

引用本地文件时，flask中有规定的语法，具体该怎么写呢？

先看看我们需要引用哪个文件：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

这行代码说明现在需要引用 bootstrap@4.5.0/dist/js/bootstrap.min.js 文件，那就去自己下载的文件目录里找

然后写成这种形式：

<script src={{url_for("static",filename="bootstrap-4.5.0-dist/js/bootstrap.min.js")}}></script>

bootstrap.min.js的相对位置是：static/bootstrap-4.5.0-dist/js/bootstrap.min.js

• url_for即相对位置的根目录，static
• filename即剩下的目录位置，bootstrap-4.5.0-dist/js/bootstrap.min.js
  （这俩根据自己实际目录进行调整）

注：引用本地文件都是这种格式，包括.js .css 图片等。

注：创建app时需要注明static_folder

3、二者对比

显而易见，第一种会更加方（tou）便（lan）且不出错。
如果选择第二种方式，需要下载相应版本的bootstrap源文件、jQuery源文件，还得自己找目录，还得写成标准语法模式，好麻烦……