使用Flask集成bootstrap的方法

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

结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • bootstrap flask登录页面编写实例

    bootstrap flask登录页面编写实例

    本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .在一般应用或个人开发中,可以很容易的写出应用.本篇就结合bootstrap,写一个简单的login界面. 一.效果图 无图无真像,先上效果图: flask-bootstrap flask-login 二.目录结构 该代码写时采

  • 一个基于flask的web应用诞生 bootstrap框架美化（3）

    一个基于flask的web应用诞生 bootstrap框架美化（3）

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架 安装框架 在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装: pip3.6 install flask-bootstrap 这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为

  • 使用Flask集成bootstrap的方法

    使用Flask集成bootstrap的方法

    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" %} {% bloc

  • flask项目集成swagger的方法

    flask项目集成swagger的方法

    此次主要介绍介绍在flask框架中如何集成swagger文档, 我们知道以前给同事提供接口文档主要是写一个文档, 当遇到频繁修改时,就需要更新文档非常麻烦, 这时swagger文档就出现了,一个在线得接口文档,同事可以在线上查看接口文档, 当需要修改接口时秩序修改对应得代码,文档也会随之更新.如下图所示. 此次集成参考flask-restplus官方文档,flask-restplus框架是flask-restful框架的一个加强版, 类似django框架的rest framework框架,应用前

  • 在ASP.NET Core Mvc集成MarkDown的方法

    这几天在做文章编辑,首先就想到了markdown,它比其它的都要新,而且很好用,相对于其它的html编辑器,好久不更新,要好得多,哦~对了我现在已经用上新版的Edge了,经过很多朋友测试,性能比谷歌浏览器都要好很多,并且资源消耗也相对来说小. 一.前提 好吧,言归正传,你首先需要下载MarkDown的相关样式脚本资源,下载完毕之后拖放你的ASP.NET Core Mvc 项目中的wwwroot中. 二.初始化 在页面中我们理所当然需要引用css 脚本资源,随后调用它的初始化方法. <script

  • CI框架集成Smarty的方法分析

    本文实例讲述了CI框架集成Smarty的方法.分享给大家供大家参考,具体如下: 因为CI自带的模板功能不是很方便,所以大家普遍采用集成Smarty的方式来弥补CI这方面的不足. 本人在网上看了不少CI集成Smarty的教程,包括咱们CI论坛里面的一个精华帖子 http://codeigniter.org.cn/forums/forum.php?mod=viewthread&tid=10345. 自己对比了一下这些教程,我认为下面这个方案是所有里面最优秀的,强烈推荐给大家(当然也是我自己采取的方案

  • CodeIgniter集成smarty的方法详解

    本文实例讲述了CodeIgniter集成smarty的方法.分享给大家供大家参考,具体步骤如下: 1.下载smarty 解压到ci的libraries目录 如: ci/application/libraries/Smarty-2.6.20 2.编写Mysmarty.php 自己的类库文件 代码如下: <?php if (!defined('BASEPATH')) exit('No direct script access allowed'); require "Smarty-2.6.20/

  • 创建SpringBoot工程并集成Mybatis的方法

    今天我们在springboot上集成mybatis.首先创建一个maven项目. 添加依赖 <!--springboot依赖--> <dependency> <groupId>org.springframework.boot<groupI> <artifactId>springbootstarter<artifactId> </dependency> <dependency> <groupId>or

  • Flask框架单例模式实现方法详解

    本文实例讲述了Flask框架单例模式实现方法.分享给大家供大家参考,具体如下: 单例模式: 程序运行时只能生成一个实例,避免对同一资源产生冲突的访问请求. Django   admin.py下的admin.site.register() ,  site就是使用文件导入方式的单例模式 创建到单例模式4种方式: 1.文件导入 2. 类方式 3.基于__new__方式实现 4.基于metaclass方式实现 1.文件导入: in  single.py class Singleton(): def __

  • vue 集成jTopo 处理方法

    jTopo 帮助说明网站 http://www.jtopo.com/index.html 使用例子: http://www.jtopo.com/demo/helloworld.html 不建议直接安装 github 上的代码,因为代码版本不是最新,有部分功能未实现. 下载最新的js类库文件放到  vue  项目 public   文件夹下. 引入  import "/jtopo/jtopo-0.4.8-min.js"; <template> <div> <

  • Spring Boot 快速集成 Redis的方法

    Spring Boot 如何快速集成 Redis?没错,栈长本文教你,让大家少走弯路! 添加依赖 使用像 Redis 这类的 NoSQL 数据库就必须要依赖 spring-data-redis 这样的能力包,开箱即用,Spring Boot 中都封装好了: 引入spring-boot-starter-data-redis: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>

  • Spring Boot项目集成UidGenerato的方法步骤

    Spring Boot项目集成UidGenerato的方法步骤

    前言 UidGenerato 基于snowflake算法实现 UidGenerato 由百度开发,基于SnowFlake算法的唯一ID生成器.UidGenerato 已组件的形式工作在应用项目中,支持自定义workeid位数和初始化策略,从而适用docker等虚拟化环境下实例自动重启等场景. 准备一个maven项目,构建两个模块.分别作为使用方和提供方.(建两个模块主要是为了"造轮子",其他模块或项目可以直接引用,无需关心uid配置,如果没有分模块,可以指忽略构建两个模块) 下载uid

随机推荐