使用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查询阿里巴巴关键字排名的方法
Jul 08 Python
python如何实现远程控制电脑(结合微信)
Dec 21 Python
python 寻找优化使成本函数最小的最优解的方法
Dec 28 Python
Python装饰器原理与用法分析
Apr 30 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
May 15 Python
pandas中去除指定字符的实例
May 18 Python
python async with和async for的使用
Jun 20 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
Dec 09 Python
python等差数列求和公式前 100 项的和实例
Feb 25 Python
Python实现井字棋小游戏
Mar 09 Python
vscode+PyQt5安装详解步骤
Aug 12 Python
详解Python中的进程和线程
Jun 23 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实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js 目录列举函数
2008/11/06 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python实现弹跳小球
2019/05/13 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
中文师范生自荐信
2014/01/30 职场文书
幼儿园招生广告
2014/03/19 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
员工离职通知函
2015/04/25 职场文书
部门2015年度工作总结
2015/04/29 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
深入理解 Golang 的字符串
2022/05/04 Golang