使用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实现异步回调机制代码分享
Jan 10 Python
Python正则表达式的使用范例详解
Aug 08 Python
python中as用法实例分析
Apr 30 Python
详解python之简单主机批量管理工具
Jan 27 Python
Python实现简单文本字符串处理的方法
Jan 22 Python
Python学习_几种存取xls/xlsx文件的方法总结
May 03 Python
Django使用中间键实现csrf认证详解
Jul 22 Python
Python3 无重复字符的最长子串的实现
Oct 08 Python
python实现银行管理系统
Oct 25 Python
python opencv根据颜色进行目标检测的方法示例
Jan 15 Python
Python 文件数据读写的具体实现
Jan 24 Python
opencv python图像梯度实例详解
Feb 04 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版(3)
2006/10/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
查看Django和flask版本的方法
2018/05/14 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
服装设计专业自荐信
2014/06/17 职场文书
在人间读书笔记
2015/06/30 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
晶体管单管来复再生式收音机
2021/04/22 无线电
i7 6700处理器相当于i5几代
2022/04/19 数码科技
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang