说明

  • 操作系统：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的更多相关文章

  1. Flask 系列之 部署发布

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过 Windows 的 WSL,将我们的项目网站部署到 ...

  2. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  3. 【Python】Flask系列-URL和视图笔记

    1.学习目标 熟悉Flask相关知识. 熟悉web开发流程. 能独立开发Flask项目. 2.环境配置 Python虚拟环境安装 因为python的框架更新迭代太快了,有时候需要在电脑上存在一个框架的 ...

  4. flask之Twitter Bootstrap

    一:Twitter Bootstrap是什么? 1.开源框架:提供用户页面组件. 2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器. 特点: Bootstrap 是客户端框架, ...

  5. 实验4、Flask基于Blueprint & Bootstrap布局的应用服务

    1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...

  6. Flask 系列之 Migration

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 flask-migrate 实现数据库的迁移操 ...

  7. Flask系列04--Flask的蓝图

    flask蓝图 一.蓝图 蓝图(Blueprint),类似于实现django中路由分发那种感觉, 可以把Blueprint理解为不能被run的Flask对象 Blueprint实例化时需要的参数 基本 ...

  8. 【Python】Flask系列-cookie和session笔记

    cookie: 1.cookie出现的原因:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...

  9. Flask系列(二)Flask基础

    知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...

  10. Flask系列（三）蓝图、基于DButils实现数据库连接池、上下文管理

    知识点回顾 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Ani ...

随机推荐

  1. 解决jenkins控制台中文乱码问题

    1,进入[系统管理]->[系统设置]->全局属性:KEY: LANG; VALUE:zh.CH.UTF-8 2,修改Jenkins.xml文件 在Jenkins安装目录下找到jenkins ...

  2. Java线程小刀牛试

    线程简介 什么是线程 现代操作系统调度的最小单元是线程,也叫轻量级进程(Light Weight Process),在一个进程里可以创建多个线程,这些线程都拥有各自的计数器.堆栈和局部变量等属性,并且 ...

  3. 老罗最新发布了“子弹短信”这款IM，主打熟人社交能否对标微信？

    1.引言 2018年8月20日,锤子科技在北京召开了夏季新品发布会.除了新手机,发布会上还正式推出了主打语音功能的即时通讯IM聊天工具:子弹短信.这款工具此前今年早些时候在「鸟巢」发布会上初次亮相,在 ...

  4. Android屏幕相关的概念

    1. 屏幕尺寸 实际的物理尺寸,作为屏幕的对角线测量. 为简单起见,安卓所有的实际屏幕尺寸为四个广义的大小:小,正常,大,和特大. 2. 屏幕密度 一个屏幕的物理区域内像素的数量:通常称为DPI(每英 ...

  5. 从 0 开始手写一个 Mybatis 框架，三步搞定！

    阅读本文大概需要 3 分钟. MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码. 本文完成的Mybatis功能比较简单,代码还有许 ...

  6. 移动端调试神器-vConsole

    什么是vConsole?   官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...

  7. 运维笔记--docker高效查看后台日志

    场景描述: 应用程序运行在 Docker环境中,经常使用的查看后台日志的命令是:docker attach 容器名该命令优点:实时输出:不足之处:日志大量输出的时候,屏幕一闪而过,不便于调试,并且有一 ...

  8. Shell中判断文件,目录是否存在

    一. 具体每个选项对应的判断内容: -e filename 如果 filename存在,则为真 -d filename 如果 filename为目录,则为真 -f filename 如果 filena ...

  9. 【python】版本35 正则-非库-爬虫-读写xlw文件

    #交代:代码凌乱,新手一个,论坛都是高手,我也是鼓了很大勇气,发出来就是被批评和进步的   #需求:需要对某网站的某id子标签批量爬取,每个网页的id在xlw里,爬取完,再批量存取到这xlw里的第6行 ...

  10. 导入项目的时候报错Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha7

    问题描述 今天在导入项目的时候报错: Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha ...