Bootstrap、Python、Flask两种设计方式

JunnGee

已于 2022-04-27 23:02:56 修改

阅读量270

点赞数

分类专栏： BootStrap 文章标签： html5

于 2019-09-27 17:11:37 首次发布

本文链接：https://blog.csdn.net/gejun318/article/details/101545136

版权

BootStrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、方式一

目录结构
在这里插入图片描述

#1.导入Flask类
from flask import Flask,render_template
from flask_bootstrap import Bootstrap

#2.创建Flask对象接收一个参数__name__，它会指向程序所在的包
app = Flask(__name__)
Bootstrap(app)
#3.装饰器的作用是将路由映射到视图函数index
@app.route('/')
def index():
    return render_template('index.html')

#4.Flask应用程序实例的run方法,启动WEB服务器
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000,debug=True)

{% extends "base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
<div class="navbar navbar-fixed-top">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello, Bootstrap</h1>
{% endblock %}

二、方式二

目录结构

在这里插入图片描述

from flask import Flask,render_template

app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')

#4.Flask应用程序实例的run方法,启动WEB服务器
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000,debug=True)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">;
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Bootstrap -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="../static/js/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="../static/js/bootstrap.js"></script> 
  <script src="../static/js/holder.js"></script>

  <style>
  .container{
    height: 200px;
  }
  .row{
    margin-bottom: 15px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Bootstrap前端框架</h1>
    <div class="row">
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>

    </div>
    <div class="row">
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
      <div class="col-md-3">
        <img src="holder.js/100px200" alt="100px200">
      </div>
    </div>
  </div>


</body>
</html>

JunnGee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap、Python、Flask两种设计方式

#一、方式一目录结构{% extends "base.html" %}{% block title %}This is an example page{% endblock %}{% block navbar %}<div class="navbar navbar-fixed-top"> </div>{% endbl...
复制链接

扫一扫

专栏目录