使用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 相关文章推荐
Windows中安装使用Virtualenv来创建独立Python环境
May 31 Python
Python 实现 贪吃蛇大作战 代码分享
Sep 07 Python
Python运算符重载详解及实例代码
Mar 07 Python
python素数筛选法浅析
Mar 19 Python
使用python爬取B站千万级数据
Jun 08 Python
浅谈python脚本设置运行参数的方法
Dec 03 Python
Laravel+Dingo/Api 自定义响应的实现
Feb 17 Python
Python3.6.x中内置函数总结及讲解
Feb 22 Python
Django Rest framework权限的详细用法
Jul 25 Python
Win10里python3创建虚拟环境的步骤
Jan 31 Python
Python3中的tuple函数知识点讲解
Jan 03 Python
Jupyter Notebook 远程访问配置详解
Jan 11 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基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
js中判断控件是否存在
2010/08/25 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
理解javascript异步编程
2016/01/27 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python的变量与赋值详细分析
2017/11/08 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
小区门卫岗位职责
2013/12/31 职场文书
新任教师自我鉴定
2014/02/24 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
2014年售票员工作总结
2014/11/19 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
社团个人总结范文
2015/03/05 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL