使用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实现提取百度搜索结果的方法
May 19 Python
关于Django显示时间你应该知道的一些问题
Dec 25 Python
Python GUI布局尺寸适配方法
Oct 11 Python
在Python中使用Neo4j的方法
Mar 14 Python
python批量修改图片尺寸,并保存指定路径的实现方法
Jul 04 Python
python+selenium 鼠标事件操作方法
Aug 24 Python
python实现的读取网页并分词功能示例
Oct 29 Python
python3 自动打印出最新版本执行的mysql2redis实例
Apr 09 Python
Python 将 QQ 好友头像生成祝福语的实现代码
May 03 Python
python 如何引入协程和原理分析
Nov 30 Python
python链表类中获取元素实例方法
Feb 23 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
Apr 02 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
JavaScript实现区块链
2018/03/14 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python3 集合set入门基础
2020/02/10 Python
python实现学生成绩测评系统
2020/06/22 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
心理学专业求职信
2014/06/16 职场文书
实习生辞职信范文
2015/03/02 职场文书
《藏戏》教学反思
2016/02/23 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript