Flask Bootstrap #3 - BootStrap快速入门

news2024/11/27 16:33:15

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>