使用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的正则表达式re模块的常用方法
Mar 09 Python
python爬虫之百度API调用方法
Jun 11 Python
python的mysqldb安装步骤详解
Aug 14 Python
django项目搭建与Session使用详解
Oct 10 Python
Appium Python自动化测试之环境搭建的步骤
Jan 23 Python
使用pandas读取文件的实现
Jul 31 Python
django 连接数据库 sqlite的例子
Aug 14 Python
python之列表推导式的用法
Nov 29 Python
python手机号前7位归属地爬虫代码实例
Mar 31 Python
python判断正负数方式
Jun 03 Python
详解Django中views数据查询使用locals()函数进行优化
Aug 24 Python
python中类与对象之间的关系详解
Dec 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
python去除所有html标签的方法
2015/05/05 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python中怎么表示空值
2020/06/19 Python
python 实现单例模式的5种方法
2020/09/23 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
《小儿垂钓》教学反思
2014/02/23 职场文书
探亲假请假条
2014/04/11 职场文书
导师工作推荐信范文
2014/05/17 职场文书
小学运动会口号
2014/06/07 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
警察群众路线整改措施
2014/09/26 职场文书
考察邀请函范文
2015/01/31 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
家访教师心得体会
2016/01/23 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
浅谈如何提高PHP代码的质量
2021/05/28 PHP