flask-bootstrap安装与使用

2020-04-16 18:42:15 浏览数 (1)

flask-bootstrap中文手册

 Bootstrap(http://getbootstrap.com/)是Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代Web 浏览器。

  要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展,简化集成的过程。Flask-Bootstrap 使用pip安装:

代码语言:javascript复制
pip install flask-bootstrap

初始化bootstrap

代码语言:javascript复制
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

在templates下添加base.html

代码语言:javascript复制
{%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 %}

显示效果如图:

增加一个自定义的CSS文件:

代码语言:javascript复制
{% block styles %}
{{super()}}
<link rel="stylesheet"
      href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}

自定义在Bootstrap的javascript代码 之前 加载的Javascript:

代码语言:javascript复制
{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}

增加 lang="zh" 属性到 <html> 标签:

代码语言:javascript复制
{% block html_attribs %} lang="zh"{% endblock %}

0 人点赞