使用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实现分析apache和nginx日志文件并输出访客ip列表的方法
Apr 04 Python
python实现对一个完整url进行分割的方法
Apr 29 Python
详解Python装饰器由浅入深
Dec 09 Python
python实现壁纸批量下载代码实例
Jan 25 Python
Python爬虫基础之XPath语法与lxml库的用法详解
Sep 13 Python
python 字符串常用方法汇总详解
Sep 16 Python
pytorch torch.expand和torch.repeat的区别详解
Nov 05 Python
win10下python2和python3共存问题解决方法
Dec 23 Python
Python基于traceback模块获取异常信息
Jul 23 Python
pycharm Tab键设置成4个空格的操作
Feb 26 Python
Python中可变和不可变对象的深入讲解
Aug 02 Python
Python socket如何解析HTTP请求内容
Feb 12 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通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
jquery实现pager控件示例
2014/04/09 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
django实现前后台交互实例
2017/08/07 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python高斯消除矩阵
2019/01/02 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python3 读取Word文件方式
2020/02/13 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
社会实践自我鉴定
2013/11/07 职场文书
中学校庆方案
2014/03/17 职场文书
房屋授权委托书范本
2014/10/07 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
《风筝》教学反思
2016/02/23 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技