flask制作html警告框
时间: 2023-11-13 10:02:03 浏览: 30
在Flask中制作HTML警告框,可以使用Bootstrap框架中的警告框组件。
首先,需要在HTML文件中引入Bootstrap的CSS和JS文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask警告框示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 在这里添加警告框组件 -->
</body>
</html>
```
然后,在需要添加警告框的位置,可以使用如下代码:
```html
<div class="alert alert-danger" role="alert">
<!-- 警告框的内容 -->
</div>
```
其中,`alert-danger`是警告框的颜色,可以根据需要替换为其他颜色,如`alert-warning`、`alert-success`等。在`div`标签内部,可以添加需要显示的警告信息。
最终的HTML代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask警告框示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-danger" role="alert">
这是一个警告框示例。
</div>
</body>
</html>
```
在Flask中,可以将HTML文件渲染后返回给客户端,示例代码如下所示:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
```