使用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使用saltstack生成服务器资产清单
Mar 01 Python
Python实现PS滤镜碎片特效功能示例
Jan 24 Python
Python使用numpy模块创建数组操作示例
Jun 20 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
Jul 25 Python
python将txt文档每行内容循环插入数据库的方法
Dec 28 Python
解决python ogr shp字段写入中文乱码的问题
Dec 31 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
Apr 10 Python
Python迭代器模块itertools使用原理解析
Dec 11 Python
torch 中各种图像格式转换的实现方法
Dec 26 Python
Python sqlite3查询操作过程解析
Feb 20 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
Dec 01 Python
python的列表生成式,生成器和generator对象你了解吗
Mar 16 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自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
JS数组的赋值介绍
2014/03/10 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python音频处理的示例详解
2020/12/23 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
工厂实习感言
2014/01/14 职场文书
元旦联欢会感言
2014/03/04 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
铁路安全事故反思
2014/04/26 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
停车场管理协议书范本
2014/10/08 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
诚信高考倡议书
2019/06/24 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python