Flask-Bootstrap

最新推荐文章于 2024-09-15 22:31:42 发布

weixin_33851604

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量66

点赞数

文章标签： python javascript ViewUI

原文链接：https://yq.aliyun.com/articles/650766

版权

bootstrap是Twitter开发的一个开源框架，提供了css和JavaScript文件，便于构建网页。

hello.py初始化Flask-Bootstrap

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

了解bootstrap的基模板（base.html)

首先了解一下bootstrap提供了多少block，bootstrap中的base.html如下：

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
  <head>
    {%- block head %}
    <title>{% block title %}{% 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 -%}