flask-bootstrap安装与使⽤
  要想在程序中集成Bootstrap，显然要对模板做所有必要的改动。不过，更简单的⽅法是使⽤⼀个名为Flask-Bootstrap 的Flask 扩展，简化集成的过程。Flask-Bootstrap 使⽤pip安装：
pip install flask-bootstrap
初始化bootstrap
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
在templates下添加base.html
{%extends "bootstrap/base.html"%}
{%block title %}Flask{% endblock %}
{%block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Flask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
显⽰效果如图：
为什么使用bootstrap?
增加⼀个⾃定义的CSS⽂件:
{% block styles %}
{{super()}}
<link rel="stylesheet"
href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}
⾃定义在Bootstrap的javascript代码 之前 加载的Javascript:
{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}
增加 lang="zh" 属性到 <html> 标签:
{% block html_attribs %} lang="zh"{% endblock %}
Flask-Bootstrap 的base.html 模板还定义了很多其他块，都可在衍⽣模板中使⽤，下表列出了所有可⽤的块：
块名  说明
doc整个html⽂档
html_attribs html标签属性
html  html标签中的内容
head head标签中的内容
title title标签中的内容
metas⼀组meta标签
styles层叠样式表定义
body_attribs body标签的属性
body body标签中的内容
navbar⽤户定义的导航条
content⽤户定义的页⾯内容
scripts⽂档底部的JavaScript 声明
  上表中的很多块都是Flask-Bootstrap ⾃⽤的，如果直接重定义可能会导致⼀些问题。例如，Bootstrap 所需的⽂件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容，必须使⽤Jinja2 提供的super() 函数。例如，如果要在衍⽣模板中添加新的JavaScript ⽂件，需要这么定义scripts 块：
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。