greyli / bluelog

The 2024 version: https://github.com/greyli/greybook
MIT License
449 stars 657 forks source link

base.html中引入bootstrap主题的疑问 #35

Closed AshenOne-N closed 3 years ago

AshenOne-N commented 3 years ago

您好。 filename='css/%s.min.css' % request.cookies.get('theme', 'perfect_blue') 关于这行代码,我不明白的地方有三点,可以请教一下吗? 1.您书中提到要换主题去Bootswatch下载覆盖bootstrap.min.css即可,这里是在链接同一个目录下的perfect_blue.min.css吗? 2.在这里链接perfect_blue.min.css是起到什么效果? 3.perfect_blue.min.css文件我在bootswatch网站上没有找到,这个文件是如何获取的。 先谢谢您了。

greyli commented 3 years ago

Hello,不好意思,最近太忙所以没能及时回复。

1.您书中提到要换主题去Bootswatch下载覆盖bootstrap.min.css即可,这里是在链接同一个目录下的perfect_blue.min.css吗?

是的,Bootstrap 的主要样式定义都在 bootstrap.min.css 文件内,这也是一般在 HTML 文件里引入的 CSS 文件。在示例程序里,为了区分两个不同主题的 Bootstrap 样式文件,所以我给它换了名字——即 perfect_blue.min.cssblack_swan.min.css

2.在这里链接perfect_blue.min.css是起到什么效果?

接上一条回答,Boostrap 的样式即 CSS 类都定义在这个文件里,所以我们在 HTML 里给各种元素附加 CSS 类属性的时候,就是在使用这个文件里定义的 CSS 类,比如 primary-btn

3.perfect_blue.min.css文件我在bootswatch网站上没有找到,这个文件是如何获取的。

同上,perfect_blue.min.css 是我自己改的名字,所以你在 Bootswatch 上应该下载的是每个主题的 bootstrap.min.css 文件。点下载按钮就会下载:

image

下载后把它放到 bluelog/static/css 目录下,再把基模板里加载 CSS 文件的代码改成下面这样即可:

<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">

下次有问题可以发到 HelloFlask 论坛