使用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高并发异步服务器核心库forkcore使用方法
Nov 26 Python
python实现批量下载新浪博客的方法
Jun 15 Python
Python处理XML格式数据的方法详解
Mar 21 Python
python3中dict(字典)的使用方法示例
Mar 22 Python
Python Web程序部署到Ubuntu服务器上的方法
Feb 22 Python
Python (Win)readline和tab补全的安装方法
Aug 27 Python
Python 类的私有属性和私有方法实例分析
Sep 29 Python
python3实现绘制二维点图
Dec 04 Python
Python实现变声器功能(萝莉音御姐音)
Dec 05 Python
python3实现网页版raspberry pi(树莓派)小车控制
Feb 12 Python
Virtualenv 搭建 Py项目运行环境的教程详解
Jun 22 Python
python实现图片,视频人脸识别(dlib版)
Nov 18 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python ansible服务及剧本编写
2017/12/29 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python lxml中etree的简单应用
2019/05/10 Python
Python assert语句的简单使用示例
2019/07/28 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python中def是做什么的
2020/06/10 Python
机电一体化专业应届本科生求职信
2013/09/27 职场文书
实习单位接收函模板
2014/01/10 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
2015年新农合工作总结
2015/03/30 职场文书
离婚协议书范文2016
2016/03/18 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript