flask-bootstrap插件

来源：互联网发布：词典软件推荐编辑：程序博客网时间：2024/05/24 22:42

pip install flask-bootstrap

flask-bootstrap目录

├── forms.py├── __init__.py├── nav.py├── static│   ├── css│   │   ├── bootstrap.css│   │   ├── bootstrap.css.map│   │   ├── bootstrap.min.css│   │   ├── bootstrap-theme.css│   │   ├── bootstrap-theme.css.map│   │   └── bootstrap-theme.min.css│   ├── fonts│   │   ├── glyphicons-halflings-regular.eot│   │   ├── glyphicons-halflings-regular.svg│   │   ├── glyphicons-halflings-regular.ttf│   │   ├── glyphicons-halflings-regular.woff│   │   └── glyphicons-halflings-regular.woff2│   ├── jquery.js│   ├── jquery.min.js│   ├── jquery.min.map│   └── js│       ├── bootstrap.js│       ├── bootstrap.min.js│       └── npm.js└── templates    └── bootstrap        ├── base.html # 这个用来做基础页面框架        ├── fixes.html        ├── google.html        ├── pagination.html        ├── utils.html        └── wtf.html # 这个用来渲染表单

base.html 内容

在{% block %}{% endblock %}中可以填写自己需要的内容(衍生网页的内容)

{% block doc -%}<!DOCTYPE html><html{% block html_attribs %}{% endblock html_attribs %}>{%- block html %}  <head>    {%- block head %}    <title>{% block title %}{{title|default}}{% endblock title %}</title>    {%- block metas %}    <meta name="viewport" content="width=device-width, initial-scale=1.0">    {%- endblock metas %}    {%- block styles %}    <!-- Bootstrap -->    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">    {%- endblock styles %}    {%- endblock head %}  </head>  <body{% block body_attribs %}{% endblock body_attribs %}>    {% block body -%}    {% block navbar %}    {%- endblock navbar %}    {% block content -%}    {%- endblock content %}    {% block scripts %}    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>    {%- endblock scripts %}    {%- endblock body %}  </body>{%- endblock html %}</html>{% endblock doc -%}

实例

定义一个模板的基础实例
/template/base.html
这个例子包含了一个导航条，其他继承的页面可以在content中添加

{% extends "bootstrap/base.html" %}{% block title %}Flask{% endblock %}{% block navbar %}<nav class="navbar navbar-default" role="navigation">    <!--居中的盒子-->    <div class="container">        <!--导航栏的头部，一般用来放置商标brand-->        <div class="navbar-header">            <a class="navbar-brand" href="#">测试</a>        </div>        <!--导航栏列表-->        <div>            <ul class="nav navbar-nav">                <li><a href="#">nv1</a></li>                <li><a href="#">nv2</a></li>                <!--这里添加下拉菜单-->                <li class="dropdown">                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">                        nv3                    </a>                    <ul class="dropdown-menu">                        <li><a href="#">nv3.1</a></li>                        <li><a href="#">nv3.2</a></li>                        <li class="divider"></li>                        <li><a href="#">nv3.2.1</a></li>                    </ul>                </li>            </ul>        </div>    <div></nav>{% endblock %}{ % block content % }{ % endblock % }

阅读全文

0 0