Flask-Bootstrap

简介: bootstrap是Twitter开发的一个开源框架,提供了css和JavaScript文件,便于构建网页。hello.py初始化Flask-Bootstrapfrom flask.

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 -%}
目录
相关文章
|
7月前
|
机器学习/深度学习 存储 算法
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
101 0
|
7月前
|
机器学习/深度学习 数据采集 算法
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(上)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
153 0
|
7月前
|
机器学习/深度学习 数据可视化 Python
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(下)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
156 0
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
|
前端开发 Python
Python:Flask-Bootstrap和Bootstrap-Flask
Python:Flask-Bootstrap和Bootstrap-Flask
240 0
Python:Flask-Bootstrap和Bootstrap-Flask
|
JSON 前端开发 JavaScript
Flask使用bootstrap为HttpServer添加上传文件功能
今天朋友说,之前写的文章Flask开发vip版HttpServer,具备了httpserver的下载功能,比python原生的http服务好用多了,但能否再此基础上添加一个文件上传的功能呢?必须可以啊,正好复习下bootstrap和jQuery的相关知识。
187 0
|
监控 前端开发 数据可视化
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
382 0
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
|
开发框架 前端开发 JavaScript
第44天:Flask 框架集成Bootstrap
第44天:Flask 框架集成Bootstrap
793 0
第44天:Flask 框架集成Bootstrap
|
前端开发 Python
Python:Flask-Bootstrap和Bootstrap-Flask
Python:Flask-Bootstrap和Bootstrap-Flask
287 0
Python:Flask-Bootstrap和Bootstrap-Flask
|
前端开发 Python 内存技术
Flask入门 表单Flask-wtf form原生与Bootstrap渲染(七)
(1) 原生的表单 模板页面,form表单form.html 用户名: 密码: 在manage.