专栏首页菲宇flask-bootstrap安装与使用

flask-bootstrap安装与使用

flask-bootstrap中文手册

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

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

pip install flask-bootstrap

初始化bootstrap

from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

在templates下添加base.html

{%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文件:

{% block styles %}
{{super()}}
<link rel="stylesheet"
      href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}

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

{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}

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

{% block html_attribs %} lang="zh"{% endblock %}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flask 使用bootstrap

    ----------------------------------index.html------------------------------ {% e...

    用户5760343
  • Python Flask简介及安装

    Flask 诞生于2010年,是 Armin ronacher 用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架。

    Python碎片公众号
  • python之flask框架

    Flask是python编写的, Web应用框架;微内核的web框架,适用于小型网站

    用户7886150
  • 【一周掌握Flask框架学习笔记】Flask概念及基础

    Web(World Wide Web)诞生最初的目的,是为了利用互联网交流工作文档。

    天道Vax的时间宝藏
  • Flask 学习篇二:学习Flask过程中的记录

    Flask学习笔记: GitHub上面的Flask实践项目 https://github.com/SilentCC/FlaskWeb 1.Applicati...

    ShenduCC
  • Flask学习笔记-Flask模板集成Bootstrap 顶

    Flask模板集成Bootstrap。一般情况下Flask都是搭配Jinja2模板引擎来实现视图展现,不过现在Bootstrap比较流行,内置的样式也比较好看,...

    bdcn
  • 带你认识 flask 美化

    虽然我们可以争辩说写代码不容易,但是与那些必须让网页在所有Web浏览器上具有良好一致外观的网页设计师相比,我们的痛苦不值一提。虽然近年来这种情况得到一定程度的缓...

    公众号---人生代码
  • python flask web基本结构 常用

    |-flasky |-app/ |-templates/ |-static/ |-main/ |-init.py |-errors.py |-fo...

    用户5760343
  • Flask简介&入门

    Flask作为Web框架,它的作用主要是为了开发Web应用程序。那么我们首先来了解下Web应用程序。Web应用程序 (World Wide Web)诞生最初的目...

    py3study
  • Python总结-----Flask框架

    django-admin 可以快速创建工程目录 manage.py 管理工程项目 orm 这是一个模型类,是一个抽象层的数据库,类似于iOS的Model、...

    GuangdongQi
  • Flask 入门系列教程(三)

    在通常的 Web 程序中,访问一个 URL 地址,一般都会返回一个 HTML 页面,而我们的数据就是嵌套在这些 HTML 代码当中的,再辅以 JavaScrip...

    周萝卜
  • Python web开发:Flask系列之表单操作

    Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。

    double
  • 18段代码带你玩转18个机器学习必备交互工具

    作者:曼纽尔·阿米纳特吉(Manuel Amunategui)、迈赫迪·洛佩伊(Mehdi Roopaei)

    华章科技
  • 18段代码带你玩转18个机器学习必备交互工具

    作者 | 曼纽尔·阿米纳特吉(Manuel Amunategui)、迈赫迪·洛佩伊(Mehdi Roopaei)

    AI科技大本营
  • 【错】ImportError: No module named flask_sqlalchemy

    使用uwsgi --ini uwsgi.ini可以运行,但是使用系统服务启动时却报错

    静默加载
  • 使用Flask部署ML模型

    https://github.com/schmidtbri/using-ml-model-abc?source=post_page---------------...

    代码医生工作室
  • 使用Flask和Vue.js开发一个单页面应用程序(二)

    书接上回,继续开整。上一次,已经把前后端的基础环境,都已经搭建好了。现在加一些自己的功能进行。试试效果。

    TalkPython
  • 《Flask Web开发》学习笔记

      前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备。为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制。

    py3study
  • Python学习路线

    标签: 无 ...

    KEVINGUO_CN

扫码关注云+社区

领取腾讯云代金券