Reference
- https://www.bilibili.com/video/BV1AQe9eqEj7/?p=2&spm_id_from=pageDriver&vd_source=3d4b12fb4a4bfbc98942d43612ae2fb9
1 BootStrap
BootStrap,别人写好的一堆css样式,我们可以直接拿过来用,我们只要掌握两点就可以开始使用BootStrap:
- BootStrap中什么样式对应什么效果
- 如何在项目中引入BootStrap
2 下载BootStrap
进入下载地址,下载生产文件,将文件夹解压后,把文件夹放到 static
文件夹下
3 使用BootStrap
3.1 测试
在 templates
文件夹下新建一个 test.html
,添加一个button
标签,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap_test</title>
</head>
<body>
<input type="button" value="提交">
</body>
</html>
用浏览器打开,可以看到此时没有css样式体现
3.2 使用BootStrap
- 使用
link
引入BootStrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap_test</title>
<link rel="stylesheet" href="../static/bootstrap-4.6.2-dist/css/bootstrap.min.css">
</head>
<body>
<input type="button" value="提交">
</body>
</html>
- 进入bootstrap官方文档,查询button的样式
- 对应修改
input
标签的class则会得到对应的样式效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap_test</title>
<link rel="stylesheet" href="../static/bootstrap-4.6.2-dist/css/bootstrap.min.css">
</head>
<body>
<input type="button" class="btn btn-primary" value="提交">
</body>
</html>
4 在flask中启动对应html
修改 app
文件夹中的 __init__.py
和 route.py
-
__init__.py
from flask import Flask from app.route import hello_world,test_html def create_app(): app = Flask(__name__,template_folder='../templates',static_folder="../static") app.add_url_rule('/hello_world', 'hello_world', hello_world) app.add_url_rule('/test_html', 'test_html', test_html) return app
-
route.py
from flask import render_template def hello_world(): return "Hello, MVC框架!" def test_html(): return render_template("test.html")
-
修改
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap_test</title> <link rel="stylesheet" href="{{url_for('static',filename='bootstrap-4.6.2-dist/css/bootstrap.min.css')}}"> </head> <body> <input type="button" class="btn btn-primary" value="提交"> </body> </html>
修改相对路径相关的设置是为了能让 jinjia2
能够正确找到文件,运行 python main.py
,手动跳转到/test_html
,网页运行正常