Flask 系列之 Bootstrap-Flask
说明
- 操作系统:Windows 10
- Python 版本:3.7x
- 虚拟环境管理器:virtualenv
- 代码编辑器:VS Code
实验目标
通过使用 Bootstrap-Flask 来进行页面美化,为网站应用上 Bootstrap4.x 的样式。
由于 Flask-Bootstrap 很久没有更新,并且不支持 BS4,所以这里我们使用支持 BS4 的 Bootstrap-Flask 来进行界面美化
安装
pip install bootstrap-flask
使用
修改 todolist\app\__init__.py
文件,示例代码如下所示
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
from config import Config
app = Flask(__name__)
app.config.from_object(Config)
db = SQLAlchemy(app)
bootstrap = Bootstrap(app)
from app import views
在 todolist\app
目录下创建 views.py 文件,示例代码如下所示:
from app import app
from flask import render_template
@app.route('/')
@app.route('/index')
def index():
return render_template('index.html', title="首页")
@app.route('/login')
def login():
return render_template('login.html', title='登录')
@app.route('/register')
def register():
return render_template('register.html', title='注册')
在 todolist\templates
目录下创建一个 nav.html 文件,示例代码如下所示:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">愿望清单</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% if request.endpoint == 'index' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('index') }}">首页<span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item {% if request.endpoint == 'login' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('login') }}">登录</a>
</li>
<li class="nav-item {% if request.endpoint == 'register' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('register') }}">注册</a>
</li>
</ul>
</div>
</div>
</nav>
在 todolist\templates
目录下创建一个 login.html 文件,示例代码如下所示:
{% extends 'base.html' %} {% block content %}
<h1>登录页面</h1>
{% endblock %}
在 todolist\templates
目录下创建一个 register.html 文件,示例代码如下所示:
{% extends 'base.html' %} {% block content %}
<h1>注册页面</h1>
{% endblock %}
修改 todolist\templates\index.html
,示例代码如下所示
{% extends 'base.html' %} {% block content %}
<h1>首页</h1>
{% endblock %}
在 todolist\static
目录下添加一个网站的 ico 格式 图片资源 ,取名 favicon.ico
修改 todolist\templates\base.html
,示例代码如下所示
<!doctype html>
<html lang="en">
<head>
{% block head %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% block styles %}
<!-- Bootstrap CSS -->
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"> {{ bootstrap.load_css() }} {% endblock %} {% if title %}
<title>{{title}}</title>
{% else %}
<title>愿望清单</title>
{% endif %} {% endblock %}
</head>
<body>
{% include "nav.html" %}
<div class="container">
<!-- Your page contont -->
{% block content %}{% endblock%}
</div>
{% block scripts %}
<!-- Optional JavaScript -->
{{ bootstrap.load_js() }} {% endblock %}
</body>
</html>
此时,打开当前项目的 shell 窗口,执行 python manage.py 即可看到 Bootstrap4 的样式已经被应用到我们的网站页面上了。
参考
Flask 系列之 Bootstrap-Flask的更多相关文章
- Flask 系列之 部署发布
说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过 Windows 的 WSL,将我们的项目网站部署到 ...
- python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
- 【Python】Flask系列-URL和视图笔记
1.学习目标 熟悉Flask相关知识. 熟悉web开发流程. 能独立开发Flask项目. 2.环境配置 Python虚拟环境安装 因为python的框架更新迭代太快了,有时候需要在电脑上存在一个框架的 ...
- flask之Twitter Bootstrap
一:Twitter Bootstrap是什么? 1.开源框架:提供用户页面组件. 2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器. 特点: Bootstrap 是客户端框架, ...
- 实验4、Flask基于Blueprint & Bootstrap布局的应用服务
1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...
- Flask 系列之 Migration
说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 flask-migrate 实现数据库的迁移操 ...
- Flask系列04--Flask的蓝图
flask蓝图 一.蓝图 蓝图(Blueprint),类似于实现django中路由分发那种感觉, 可以把Blueprint理解为不能被run的Flask对象 Blueprint实例化时需要的参数 基本 ...
- 【Python】Flask系列-cookie和session笔记
cookie: 1.cookie出现的原因:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...
- Flask系列(二)Flask基础
知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...
- Flask系列(三)蓝图、基于DButils实现数据库连接池、上下文管理
知识点回顾 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Ani ...
随机推荐
- str2-045漏洞事件,你想要的这里都有
话说昨天一觉醒来,发现整个安全圈被一个名为str2-045的漏洞霸屏了,好多小伙伴已经开始了喜刷刷的艰苦奋斗过程.然而对于很多小白童鞋来讲,他们可能还是处于懵逼的状态,别急,咱们专门为你们做了一期专题 ...
- 谈谈Java中的代理模式
首先来看一下代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用, 其特征是代理类与 ...
- Spring依赖注入(DI)详解
一.依赖简介 一个典型的企业应用程序不是由一个单一的对象组成(或Spring的说法中的bean).即使是最简单的应用程序也只有几个对象一起工作来呈现最终用户看作是一个连贯的应用程序.如何从定义许多独立 ...
- 阿里巴巴Java开发规约及插件安装
[上海尚学堂编辑整理]10.14日,阿里巴巴在杭州云栖大会上,正式发布了由阿里巴巴 P3C 项目组,经过 近一年的持续研发,正式发布众所期待的 <阿里巴巴 Java 开发规约>的扫描插件. ...
- 面试官问我,Redis分布式锁如何续期?懵了。
前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...
- centos7使用wordpress布署网站(2)
1.接下来需要配置数据库,为使用wordpress做准备 修改认证方式: vim .../phpMyAdmin/config.inc.php [...] $cfg['Servers'][$i]['au ...
- Eclipse 修改自动补全触发器只能输入四个字符为多个字符
如果eclipse中的[auto activation triggers for java]自动补全触发器这个位置的文本框有时候只能输入4个字符, 可以通过修改配置文件的方法实现,具体操作步骤如下: ...
- Linux 下 安装Python第三方模块工具箱pip,以及用pip安装的方法
下载文件 wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 执行安装 python get-pip.py 可以做一个软连 ...
- log4j日志输出到日志文件中和控制台中 +log4j配置详解
1.引入log4j的jar包 https://mvnrepository.com/,可以找到log4j的jar和依赖. 2.创建log4j.properties,并配置log4j #设置日志的级别 , ...
- Target优化
优化目标主要包括以下几方面: 1 优化平面文件 如果目标平面文件在某机器的共享目录下,则该机器最好是专门用于文件存储的,如果还应用于其他非文件存储任务,则会降低加载效率 如果Integration s ...