首页 > 代码库 > FlaskWebDevelopment - Flask模板2 - Flask-Bootstrap插件

FlaskWebDevelopment - Flask模板2 - Flask-Bootstrap插件

2024-07-27 15:14:21   221人阅读

这部分还是属于模板，讲Flask里嵌入Bootstrap，利用Flask-Bootstrap插件。这个插件存在的意义就是简化这个嵌入的操作过程，当然不用也可以。

通过Flask-Bootstrap集成Bootstrap

Bootstrap的介绍就不翻了。

Bootstrap作为一个client端的框架，他最终存在于HTML文件中，做Flask应用开发的话，应该把它放入模板中。

Flask-Bootstrap插件可以简化这个集成操作，用pip安装：

$ pip install flask-bootstrap

Flask插件一般与Flask app实例一同初始化，如：

`hello.py`

from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

还是之前的hello.py，又增加了Flask-Bootstrap。类似于Flask-Script，插件由flask.ext控件引入，通过向构造器传入app实例来初始化并得到这个插件的实例。

Flask-Bootstrap初始化完成后，就得到一个包含了所有Bootstrap需要文件的基础模板。这个模板利用了Jinja2的继承机制，应用只需要继承这个模板，就得到了已经集成了Bootstrap的新模板。修改之前的user.html：

user.html

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% 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="http://www.mamicode.com/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="http://www.mamicode.com/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
</div>
{% endblock %}

上面的模板，继承了由Flask-Bootstrap提供的bootstrap/base.html基础模板。这个基础模板包含了一个网页的骨架，同时已经包含了Bootstrap的CSS和JS文件。

基础模板中定义的区块，可以被继承的模板里定义的区块覆盖。在block与endblock之间的内容会被填充到基础模板中。

新的user.html里有title，navbar和content三个区块，在navbar里，利用Bootstrap组件定义了简单的导航条。

注：

  • 想找这个基础模板的，到python的包安装目录去找，它保存在FLask-Bootstrap的包的：\site-packages\flask_bootstrap\templates\bootstrap内。
  • 当前代码在3b tag下
  • Bootstrap官方文档里有很多改改就能用的实例。

新的网页效果如图:

Bootstrap template

Flask-Bootstrap的基础模板里提供多种区块：

名称              描述
doc               全部HTML文档
html_attribs      <html> tag 内部的属性
html              <html> tag 中间的内容
head              <head> tag 中间的内容
title             <title> tag 中间的内容
metas             <meta> tags的一个列表
styles            CSS
body_attribs      <body> tag  内部的属性
body              <body> tag  中间的内容
navbar            自定义导航栏
content           自定义页面内容
scripts           文件底部的JavaScript声明

上表中的一些区块Flask-Script本身也有使用，直接覆盖可能导致问题，比如styles和scripts区块里就声明了一些Bootstrap文件。建议直接看看基础模板的内容，有个了解。如果只是需要增加自己的内容，那么可以使用Jinja2提供的super()方法，可以保留原有内容。例如：

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="http://www.mamicode.com/my-script.js"></script> 
{% endblock %}

注：模板这可能还需要1~2个，才能搞定。

FlaskWebDevelopment - Flask模板2 - Flask-Bootstrap插件


联系
我们