使用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 相关文章推荐
在Ubuntu系统下安装使用Python的GUI工具wxPython
Feb 18 Python
实例解析Python的Twisted框架中Deferred对象的用法
May 25 Python
详解python的数字类型变量与其方法
Nov 20 Python
Python使用内置json模块解析json格式数据的方法
Jul 20 Python
python使用xslt提取网页数据的方法
Feb 23 Python
Python绘制KS曲线的实现方法
Aug 13 Python
对IPython交互模式下的退出方法详解
Feb 16 Python
Python队列RabbitMQ 使用方法实例记录
Aug 05 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
Sep 05 Python
python 消除 futureWarning问题的解决
Dec 25 Python
python实现三阶魔方还原的示例代码
Apr 28 Python
Django一小时写出账号密码管理系统
Apr 29 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
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python 标准差计算的实现(std)
2019/07/29 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
房地产管理毕业生自荐信
2013/11/04 职场文书
个人党性剖析材料
2014/02/03 职场文书
给校长的一封建议书
2014/03/12 职场文书
后备干部培训方案
2014/05/22 职场文书
调研座谈会发言材料
2014/08/23 职场文书
教育教学工作反思
2016/02/24 职场文书
导游词之无锡梅园
2019/11/28 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Python实现老照片修复之上色小技巧
2021/10/16 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript
一文搞懂MySQL索引页结构
2022/02/28 MySQL
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL