使用Flask集成bootstrap的方法


Posted in Python onJuly 24, 2018

1. 下载flask-bootstrap

pip install flask-bootstrap

2. 找到base.html文件

将site-packages\flask_bootstrap\templates文件夹下的bootstrap目录copy到你的项目\templates目录下,确保bootstrap目录下包含base.html文件,因为我们后面要用到。

3. 代码

user.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="/" rel="external nofollow" rel="external nofollow" >Flask</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
        </ul>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="container">
    <div class="page-header">
      <h1>Hello, {{ name }}</h1>
    </div>
  </div>
{% endblock %}

MyFlask.py :

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/user/<name>')
def user(name):
  return render_template('user.html', name=name)


if __name__ == '__main__':
  app.run()

4. 查看结果

浏览器输入:http://127.0.0.1:5000/user/Brown

结果:

使用Flask集成bootstrap的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中字典映射类型的学习教程
Aug 20 Python
浅谈python抛出异常、自定义异常, 传递异常
Jun 20 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
Jun 27 Python
Python数据分析之双色球中蓝红球分析统计示例
Feb 03 Python
解读python logging模块的使用方法
Apr 17 Python
python检索特定内容的文本文件实例
Jun 05 Python
详解python opencv、scikit-image和PIL图像处理库比较
Dec 26 Python
如何定义TensorFlow输入节点
Jan 23 Python
记录一下scrapy中settings的一些配置小结
Sep 28 Python
Python中免验证跳转到内容页的实例代码
Oct 23 Python
python中的插入排序的简单用法
Jan 19 Python
2021年pycharm的最新安装教程及基本使用图文详解
Apr 03 Python
用python统计代码行的示例(包括空行和注释)
Jul 24 #Python
Python 删除整个文本中的空格,并实现按行显示
Jul 24 #Python
Python常见MongoDB数据库操作实例总结
Jul 24 #Python
Python实现端口检测的方法
Jul 24 #Python
Flask框架信号用法实例分析
Jul 24 #Python
Flask框架响应、调度方法和蓝图操作实例分析
Jul 24 #Python
Django中的Model操作表的实现
Jul 24 #Python
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JS之小练习代码
2008/10/12 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery提示效果实例分析
2014/11/25 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Django实现表单验证
2018/09/08 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
如何查找网页漏洞
2016/06/22 面试题
物理教学随笔感言
2014/02/22 职场文书
预备党员承诺书
2014/03/25 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
委托书如何写
2014/08/30 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
环保证明
2015/06/23 职场文书
新闻报道稿范文
2015/07/23 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python