Flsk-Bootstrap-2
结构
$ tree -I "__pycache*|*.pyc|*.xlsx" -FCL 3
.
|-- app/
| |-- __init__.py # 初始文件
| |-- static/ # 静态文件夹
| | |-- css/ # 项目中引入的 css 样式表
| | |-- fonts/ # 项目中需要的字体
| | |-- images/ # 项目中的图片文件夹
| | `-- js/ # 项目中引入的 js
| |-- templates/ # html 模板文件夹
| | |-- common/ # 通用打模板文件
| | `-- index.html
| | `-- views.py #视图函数
`-- run.py # 启动文件
解压Bootstrap
下载Bootstrap,解压到static/,结构如上。
制作基础模板
模板都存放在templates/common/
common/
|-- base.html
|-- footer.html
|-- header.html
`-- sidebar.html
基础模板base.html
<!DOCTYPE html>
<html lang="zh-CN">
<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="author" content="xuwei">
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}"><!--引入项目的图标，将需要的 ico 文件放到 static/images 文件夹下．-->
<title>{% block title %}首页{% endblock %}</title>
<!--设置网页的标题，通过这样的设置，你可以利用 jinja2 的一些特性，将每个网页的标题进行不通的设置．-->
{% block css %} <!--css模块区域-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/offcanvas.css') }}" rel="stylesheet">
{% endblock %}
</head>
<body>
{% include "common/header.html" %}<!--引入网页的头部模板-->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
{% block content %}<!--自定义模板区域-->
{% endblock %}
{% include "common/sidebar.html" %}<!--引入网页的侧边模板-->
</div><!--/row-->
{% include "common/footer.html" %}<!--引入网页的底部模板-->
</div>
{% block js %}<!--js模块区域-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/offcanvas.js') }}"></script>
{% endblock %}
</body>
</html>
footer.html 页脚
<hr>
<footer>
<p>© 2018 Company, Inc.</p>
</footer>
header.html 页头
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
侧边栏 sidebar.html
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">
<button type="button" class="btn btn-block btn-danger" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-block btn-info" aria-label="Left Align">
<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-primary" aria-label="Left Align">
<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-success" aria-label="Left Align">
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-block btn-warning" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/.sidebar-offcanvas-->
首页index.html
{% extends "common/base.html" %}<!--继承基础模板-->
{% block content %}<!--自定义模板区域-->
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
{% endblock %}
视图函数
views.py
from app import app
from flask import render_template
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
初始文件
__init__.py
from flask import Flask
app = Flask(__name__)
from app import views
启动文件
run.py
from app import app
app.run(debug=True)
浏览器
python run.py
浏览器打开：
http://localhost:5000/
