文章目录

• Boostrap介绍
• 步骤流程
• 代码目录
• 具体实现步骤

Boostrap介绍

Bootstrap是一个流行的开源前端框架，用于快速构建现代响应式网站和Web应用程序。它基于HTML、CSS和JavaScript，并提供了一系列现成的组件和样式，可以轻松地创建网页、表单、导航栏、下拉菜单、模态框等等。Bootstrap是由Twitter开发和维护的，目前已经成为最受欢迎的前端框架之一。它不仅可以用于构建Web页面，也可以用于构建移动应用程序。Bootstrap使用简单易懂的文档和示例来帮助开发人员快速上手，并且可以轻松地自定义主题和样式，以满足不同项目的需求。

步骤流程

• 在PyCharm中创建一个新的Python项目，并创建一个新的虚拟环境。
  安装必要的第三方库，如Flask和Bootstrap，可以通过PyCharm的包管理器或命令行来安装。（或者我们可以直接通过进去官网下载Boostrap的模板文件 地址）
• 创建一个Python文件，并引入Flask和Bootstrap库。
  在Python文件中创建Flask应用程序对象。
• 创建一个路由函数，定义一个网页的URL和对应的函数，这个函数将渲染网页模板并返回给浏览器。
• 创建一个网页模板文件，可以使用Bootstrap的模板，也可以自己编写HTML代码，并将该模板保存在项目中的templates文件夹下。
• 在模板中定义网页的结构和样式，并使用Flask提供的模板语言将数据动态地呈现在网页上。
• 启动Flask应用程序，通过浏览器访问指定的URL，查看网页效果。

代码目录

具体实现步骤

第一步：选择一个自己喜欢的Boostrap网页模板

第二步：选择后将自己选择的HTML和css文件放入自己的目录下

第三步：找到HTML中所有相对路径的对应文件，并放入Static对应的文件夹下，并修改正确的相对路径。如下图

监控系统
Jumbotron heading
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Sign up today
Subheading
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
Subheading
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Subheading
Maecenas sed diam eget risus varius blandit sit amet non magna.
Subheading
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
Subheading
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Subheading
Maecenas sed diam eget risus varius blandit sit amet non magna.
 

第四步：直接打开HTML验证效果。

第五步：如果出现了一些格式上的问题，则需要看看是否忽略了一些重要的样式文件。接下来我们直接通过main.py文件来运行。下面给出main.py的代码。

import flask
from flask import *# 创建Flask程序并定义模板位置
app = Flask(__name__,static_url_path='/static',static_folder='static',template_folder='templates')# 将所有对主页面的访问都跳转到界面
@app.route('/', methods=['GET', 'POST'])
def index():return flask.redirect(flask.url_for('test'))
# ********************************************* #
# 首页跳转，render_template表示跳转到目标html文件 #
# ********************************************* #
@app.route('/test', methods=['GET'])
def test():return render_template('index.html')# ************* #
# 实时监控界面跳转#
# ************* #
@app.route('/real_time')
def real_time():return render_template('index1.html')# ************* #
# 视频回调界面跳转#
# ************* #
@app.route('/video_back')
def video_back():return render_template('index2.html')if __name__ == '__main__':# ************************************ ## 运行我们的Flask框架，调试时需要debug=True ## ************************************ ## app.run(host='127.0.0.1', port=8089, debug=True)app.run(host='192.168.31.11',port=8089,debug=True)

第六步：指定host为本机地址，然后运行，可出现网页链接，点击一样的能出现上面网页的效果。如果需要自己设计网页，则需要修改HTML的代码。