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对应的文件夹下，并修改正确的相对路径。如下图
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../static/image/favicon.ico">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../static/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../static/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="http://192.168.31.11:8089/test">首页</a></li>
<li role="presentation"><a href="http://192.168.31.11:8089/real_time">实时监控</a></li>
<li role="presentation"><a href="http://192.168.31.11:8089/video_back">视频回调</a></li>
</ul>
</nav>
<h3 class="text-muted">监控系统</h3>
</div>
<div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">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.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
第四步：直接打开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的代码。
