视频监控笔记(六): 如何快速通过Boostrap创建视频监控网页，保姆级别教程

ZZY_dl

已于 2023-03-16 17:14:50 修改

阅读量554

点赞数

文章标签： python 后端 bootstrap

于 2023-03-16 16:13:23 首次发布

本文链接：https://blog.csdn.net/m0_51004308/article/details/129588912

版权

文章目录

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对应的文件夹下，并修改正确的相对路径。如下图

<!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>&copy; 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的代码。

ZZY_dl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
视频监控笔记(六): 如何快速通过Boostrap创建视频监控网页，保姆级别教程

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

扫一扫