flask-bootstrap安装与使用

2023-05-16

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

Flask-Bootstrap 的base.html 模板还定义了很多其他块,都可在衍生模板中使用,下表列出了所有可用的块:

块名  说明
doc整个html文档
html_attribshtml标签属性
html  html标签中的内容
headhead标签中的内容
titletitle标签中的内容
metas一组meta标签
styles层叠样式表定义
body_attribsbody标签的属性
bodybody标签中的内容
navbar用户定义的导航条
content用户定义的页面内容
scripts文档底部的JavaScript 声明

  上表中的很多块都是Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供的super() 函数。例如,如果要在衍生模板中添加新的JavaScript 文件,需要这么定义scripts 块:


{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flask-bootstrap安装与使用 的相关文章

  • vue总结系列 ---- 响应式原理

    检测变化 vue是数据驱动的视图框架DOM是通过数据映射的 xff0c 只有数据改变 xff0c DOM才改变 那么数据是怎么来的呢 xff1f 1 来自父元素的属性 xff08 prop xff09 2 来自组件的自身状态 xff08 d
  • Object.defineProperty()的学习了解

    背景 最近在总结vue系列的时候是看到响应原理的时候 看到一个新的知识点也就是我们的标题Object defineProperty 的时候 xff0c 好了话不多说 xff0c 我们来看看这个是怎么使用的 开始 strong Object
  • vue总结系列 ----- 单向数据流

    可能很多人都以为vue的双向绑定其实是错误的 xff0c vue真正的是单向数据流 xff0c vue的双向绑定只不过是语法糖 我的理解是 xff1a model层 xff1a data对象中的数据 xff0c 或后台传过来的数据 view
  • vue总结系列 ---- 在组件上的v-model单向数据流

    背景 目前是在复习vue原理的过程中 xff0c 前端负责人知道我最近在复习vue xff0c 跟我说要我看组件上的v model 我一听本来是不想放在心上的 xff0c 刚好那天晚上没什么事干想看一下 xff0c 毕竟负责人 xff0c
  • ES6 函数扩展

    参数默认值 也就是说现在ES6对函数中的参数添加了默认值 我们在ES5种的处理 function Fn a b b 61 b 34 nodeing 34 return a 43 b console log Fn 34 hello 34 这样
  • ES6 对象扩展

    对象简写 对象中又分了属性和方法的简写 在es5中 xff0c 有这样一种写法 var name 61 34 xiaoqiang 34 var age 61 12 var obj 61 name name age age 在es6中 xff
  • Bootstrap基础学习笔记

    网格系统 row定义一行 col均分列数 xff0c 最多一行12列 每列左右间隙各15px col 1到12 定义在所有屏幕下的列宽 col sm md lg xl 1到12 定义在指定屏幕下该列占据的列宽 xff0c sm 屏幕 gt
  • ES6 Symbol用法

    Symbol用法 什么是Symbol Symbol是es6中一种新增加的数据类型 xff0c 它表示独一无二的值 es5中我们把数据类型分为基本数据类型 xff08 字符串 数字 布尔 undefined null xff09 和引用数据类
  • img标签中的src在绝对引用的时候的问题

    昨天晚上我一个朋友目前在培训 xff0c 他在群里问了下img标签如何绝对路径引用 xff0c 我当时就笑了这个就是培训机构的老师 xff0c 就大概看了一下就告诉我朋友那里错了 xff0c 但是却出来不 xff0c 我就想自己写一个dem
  • 在vue-cli中使用vue-router的学习笔记

    以前不会vue cli的时候学过router xff0c 当时的写法和在vue cli中的写法还是有一些不一样的 xff0c 但是我以后应该还是会用vue的单文件写小程序啊什么的所以我就吧我学习的过程全部记录下来 router创建 那么问题
  • js中bind()使用详情

    前言 最近在在搞React的时候有用到bind 的时候 xff0c 因为他的用法其实我还一直不是特别的清楚 xff0c 所以今天我把bind 他的用法和我遇到的结合起来这样来写一个博客 xff0c 这样应该可以加深自己的印象同时可以来跟好的
  • var let const 详细区别

    用了ES6已经有一段事件了 xff0c 也看了很多文档 xff0c 以前觉得不用写一个文档总结 xff0c 但是经过一段时间的接触以后 xff0c 认为自己还是有必要去吧他们的区别详详细细的总结一下 块级作用域 白话一点就是在 中就是一个块
  • Git 速查表

    配置 git config global user name 34 lt 姓名 gt 34 设置提交者姓名 git config global user email 34 lt 邮箱 gt 34 设置提交者邮箱 这个有什么用呢 xff1f
  • async比Promise好在什么地方

    什么是Promise xff1f Promise是ES6中的异步编程解决方案 xff0c 在代码中表现为一个对象 xff0c 可以通过构造函数Promise来实例化 xff0c 有了Promise对象 xff0c 可以将异步操作以同步的流程
  • css面试题----css测试9

    每个星期6都会去去看张鑫旭直播写一些小demo然后再去吧写每天学习到的东西 xff0c 心得记下来 xff0c 并且会长期去完成这个任务 IT这个东西真的是要去强迫自己学学习一些好的东西 xff0c 多去优化代码 xff0c 而不是去停滞不
  • css面试题----DOM基础测试34

    这个其实是上上个星期张鑫旭直播的内容 xff0c 我吧我不会的内容总结一下 xff0c 从而来分享给大家 题目 第一问 document querySelectorAll 39 a 39 第二问 1 有bug当有这个href属性但没属性值
  • fon in 和 for of 的区别

    for 循环 其实他一般情况下是根据数组 xff0c 类数组的length的属性值去循环 for in 一般的作用是枚举把key枚举出来 xff0c 但是当我们枚举数组 xff0c 或者字符串的时候会把原型上的方法枚举出来 Object p
  • 词云图wordcloud学习笔记

    词云图 也叫文字云 是对文本中出现频率较高的 关键词 予以视觉化的展现 词云图过滤掉大量的低频低质的文本信息 使得浏览者只要一眼扫过文本就可领略文本的主旨 github https github com amueller word clou
  • ++a-a++解析

    有题目当a为1的时候 43 43 a a 43 43 为多少答案为0 我们再输出a这个时候a等于3 为什么呢 xff1f 运算顺序 前置递增 减 大于 数字运算和后置递增 减 大于 比较 布 大于 逻辑 或 且 大于 赋值 好当我们把运算顺
  • sync修饰符的使用

    为什么使用sync 再vue中官网的介绍 xff1a 我们可能需要对一个 prop 进行 双向绑定 不幸的是 xff0c 真正的双向绑定会带来维护上的问题 xff0c 因为子组件可以修改父组件 xff0c 且在父组件和子组件都没有明显的改动

随机推荐