flask-bootstrap插件

最新推荐文章于 2021-12-21 21:34:47 发布

Claroja

最新推荐文章于 2021-12-21 21:34:47 发布

阅读量554

点赞数

分类专栏： flask 文章标签： css 插件

本文链接：https://blog.csdn.net/claroja/article/details/78539690

版权

flask 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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 % }