经过上一章的内容，其实就页面层来说已结可以很轻松的实现功能了，但是很明显美观上还有很大的欠缺，现在有一些很好的前端css框架，如AmazeUI,腾讯的WeUI等等，这里推荐一个和flask集成很好的bootstrap框架

【相关视频推荐：Bootstrap教程】

安装框架

在模板中直接引用bootstrap的CDN或者本地路径外，还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装：

pip3.6 install flask-bootstrap

这是一个flask的扩展包，flask的所有扩展包默认默认的包名都为flask.ext打头，同样bootstrap也是如此，首先在default的文件的头部导入包：

from flask.ext.bootstrap import Bootstrap

然后对bootstrap进行初始化，修改代码：

bootstrap=Bootstrap(app)

初始化之后，就可以使用Jinja2的继承方式使用此包中的包含的一系列的针对Bootstrap的基模板。基模板中直接引用了一系列的bootstrap中的元素。

还记得如何在jinja2中使用模板继承吧，下面在使用之前，首先看看基模板的结构：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

{% block doc -%}

<!DOCTYPE html>

<html{% block html_attribs %}{% endblock html_attribs %}>

{%- block html %}

 <head>

 {%- block head %}

 <title>{% block title %}{{title|default}}{% endblock title %}</title>

 {%- block metas %}

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 {%- endblock metas %}

 {%- block styles %}

 <!-- Bootstrap -->

 <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="external nofollow" rel="stylesheet">

 {%- endblock styles %}

 {%- endblock head %}

 </head>

 <body{% block body_attribs %}{% endblock body_attribs %}>

 {% block body -%}

 {% block navbar %}

 {%- endblock navbar %}

 {% block content -%}

 {%- endblock content %}

 {% block scripts %}

 <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>

 <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

 {%- endblock scripts %}

 {%- endblock body %}

 </body>

{%- endblock html %}

</html>

{% endblock doc -%}

从源码中可以看出，这个基模板定义了12个block，分别对应了整个文档(doc),html属性(html_attribs),整个html(html),整个head部分(head),title部分(title),meta代码部分(metas),css样式(styles),body属性(body_attribs),body部分(body),导航(navbar),
页面内容(content),js(scripts)

并且title，meta，css，和js均有默认的内容，所以使用的时候需要加入{{super()}}

好，根据这个基模板的结构，修改login.html中的代码为：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

{% extends "bootstrap/base.html"%}

{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}

<nav class="navbar navbar-inverse"><!-- 导航部分 -->

 导航

</nav>

{% endblock %}

{% block content %} <!--具体内容-->

<p class="container">

 <p class="container">

 <form method="post">

 <p class="form-group">

 <label for="username">用户名</label>

 <input type="text" class="form-control" id="username" placeholder="请输入用户名">

 </p>

 <p class="form-group">

 <label for="passworld">密码</label>

 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">

 </p>

 <button type="submit" class="btn btn-default">登录</button>

 </form>

 </p>

</p>

{% endblock %}

运行程序，现在的显示结果为：

比刚刚漂亮多了，这时生成的html代码为：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

 <head>

 <title>牛博客 </title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- Bootstrap -->

 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">

 </head>

 <body>

 <nav class="navbar navbar-inverse"><!-- 导航部分 -->

 导航

 </nav>

 <!--具体内容-->

 <p class="container">

 <form method="post">

 <p class="form-group">

 <label for="username">用户名</label>

 <input type="text" class="form-control" id="username" placeholder="请输入用户名">

 </p>

 <p class="form-group">

 <label for="passworld">密码</label>

 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">

 </p>

 <button type="submit" class="btn btn-default">登录</button>

 </form>

 </p>

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

 </body>

</html>

注意这几个cdn的地址，这个地址有时候会被挡在墙外，这时怎么办呢？

修改的方式为在python的安装目录下找到Lib\site-packages\flask_bootstrap文件夹，文件夹下有__init__.py文件，打开后看到如下代码：

进行修改，顺便提一下，我比较常使用bootcdn这个cdn服务器

下面使用土法进行一下测试，输入test和123后的结果为：

显示的还是之前的测试登录成功页，这显然是不对的，一般来说，bbs或blog都是跳到登录前的页面或者首页，现在为了方便起见，都跳转到首页，同时，如果用户名或密码错误，也要在登录页进行提示，修改default.py代码如下：

1

2

3

4

5

6

7

8

9

10

11

from flask import session #导入session对象

@app.route("/login",methods=["POST"])

def loginPost():

 username=request.form.get("username","")

 password=request.form.get("password","")

 if username=="test" and password=="123" :

 session["user"]=username

 return render_template("/index.html",name=username,site_name='myblog')

 else:

 return "登录失败"

登录成功后的源码为：

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>myblog</title>

</head>

<body>

<h1>这个站点的名字为 myblog </h1>

</body>

</html>

哦，对了，没有引用bootstrap的基模板，修改index.html的模板代码，将第一行的

{% extends "base.html" %}

修改为

{% extends "bootstrap/base.html" %}

刷新为：

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

 <head>

 <title>blog</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- Bootstrap -->

 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

 </head>

 <body>

 <h1>这个站点的名字为 myblog </h1>

 </body>

</html>

看到已经成功引用了bootstrap框架，但是导航部分全部都没有，这时当然不能在写一遍导航，直接修改自定义的基模板，然后让其他模板引用即可，修改基模板为：

1

2

3

4

5

6

7

8

9

10

11

12

{%extends "bootstrap/base.html "%}

{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}

<nav class="navbar navbar-inverse"><!-- 导航部分 -->

 导航

</nav>

{% endblock %}

{% block content %} <!--具体内容-->

<p class="container">

</p>

{% endblock %}

然后修改首页代码：

1

2

3

4

5

{% extends "base.html" %}

{% block content %}

 <h1>这个站点的名字为 {{site_name}} </h1>

{% endblock %}

修改登录页代码为：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{% extends "base.html"%}

{% block content %} <!--具体内容-->

<p class="container">

 <form method="post">

 <p class="form-group">

 <label for="username">用户名</label>

 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">

 </p>

 <p class="form-group">

 <label for="passworld">密码</label>

 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">

 </p>

 <button type="submit" class="btn btn-default">登录</button>

 </form>

</p>

{% endblock %}

下面登录成功页的显示结果为：

页面风格与登录页保持了一致，但是，目前还是如果用户名密码错误（即输入的不是test和123），那么除了和刚刚一样返回一个登录错误的字符串之外，用户是无法获悉的，就需要一个反应用户状态的方法，这一点，flask提供了flash函数，下面继续修改default.py文件：

1

2

3

4

5

6

7

8

9

10

11

12

from flask import flash

@app.route("/login",methods=["POST"])

def loginPost():

 username=request.form.get("username","")

 password=request.form.get("password","")

 if username=="test" and password=="123" :

 session["user"]=username

 return render_template("/index.html",name=username,site_name='myblog')

 else:

 flash("您输入的用户名或密码错误")

 return render_template("/login.html") #返回的仍为登录页

修改login.html模板：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

{% extends "base.html"%}

{% block content %} <!--具体内容-->

<p class="container">

 {% for message in get_flashed_messages() %}

 <p class="alert alert-warning">

 <button type="button" class="close" data-dismiss="alter">&times</button>

 {{message}}

 </p>

 {% endfor %}

 <form method="post">

 <p class="form-group">

 <label for="username">用户名</label>

 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">

 </p>

 <p class="form-group">

 <label for="passworld">密码</label>

 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">

 </p>

 <button type="submit" class="btn btn-default">登录</button>

 </form>

</p>

{% endblock %}

好下面输入test和1234，显示结果为：

状态很完美的显示出来。

继续美化

登录的页面和控制器的基本功能都已经完成，但是仅仅就现在这个页面来说，没有登录框占整个屏幕的，一般来说，都是居中的一部分，这块不涉及flask的部分，轮到bootstrap的栅格系统登场了。

栅格系统简单说就是将一个container或container-fluid中分为12个列，每个列都可以合并或偏移，与html中的table类似，并且支持响应式，通过xs，sm，md，lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

{% extends "base.html"%}

{% block content %} <!--具体内容-->

<p class="container">

 <p class="row"></p>

 <p class="row">

 <#-- col-md-4表示合并4列，col-md-offset-4表示偏移4列 sm意思相同 --#>

 <p class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">

 <p class="page-header">

 <h1>欢迎您登陆</h1>

 </p>

 {% for message in get_flashed_messages() %}

 <p class="alert alert-warning">

 <button type="button" class="close" data-dismiss="alter">&times</button>

 {{message}}

 </p>

 {% endfor %}

 <form method="post">

 <p class="form-group">

 <label for="username">用户名</label>

 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">

 </p>

 <p class="form-group">

 <label for="passworld">密码</label>

 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">

 </p>

 <button type="submit" class="btn btn-default">登录</button>

 </form>

 </p>

 </p>

</p>

{% endblock %}

显示结果如下：

毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。

以上就是关于bootstrap框架美化的实例教程（python）的详细内容，更多请关注php中文网其它相关文章！

关于bootstrap框架美化的实例教程（python）的更多相关文章

  1. 搭建自己的博客（七）：使用bootstrap框架美化导航栏

    前面发现自己写css代码以及很多功能太麻烦,故希望在自己的博客中引入bootstrap框架,bootstrap是一个非常强大的前端框架,简单易学容易上手.附上官网地址:bootstrap官网 我使用的 ...

  2. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. [Python][flask][flask-wtf]关于flask-wtf中API使用实例教程

    简介:简单的集成flask,WTForms,包括跨站请求伪造(CSRF),文件上传和验证码. 一.安装(Install) 此文仍然是Windows操作系统下的教程,但是和linux操作系统下的运行环境 ...

  4. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  5. Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求

    相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...

  6. Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

  7. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  8. PHP: 手把手编写自己的 MVC 框架实例教程

    1 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller ...

  9. python迭代器与iter()函数实例教程

    python迭代器与iter()函数实例教程 发布时间:2014-07-16编辑:脚本学堂 本文介绍了python迭代器与iter()函数的用法,Python 的迭代无缝地支持序列对象,而且它还允许程 ...

随机推荐

  1. 2019年春季学期第二周作业 基础作业 请在第一周作业的基础上，继续完成：找出给定的文件中数组的最大值及其对应的最小下标（下标从0开始）。并将最大值和对应的最小下标数值写入文件。 输入： 请建立以自己英文名字命名的txt文件，并输入数组元素数值，元素值之间用逗号分隔。 输出 在不删除原有文件内容的情况下，将最大值和对应的最小下标数值写入文件

    ~~~ include<stdio.h> include<stdlib.h> int main() { FILE*fp; int i=0,max=0,j=0,maxb=0; i ...

  2. 2017(4)数据库系统，分布式数据库，NoSQL，反规范化

    试题四(共 25 分) 阅读以下关于数据库分析与建模的叙述,在答题纸上回答问题 1至问题 3. [说明] 某电子商务企业随着业务不断发展,销售订单不断增加,每月订单超过了 50 万笔,急需开发一套新的 ...

  3. defaultdict(list)

  4. 关闭 synactive guixt. 在sap gui的右上角一个标志里，将 active guixt 选项去掉即可。

    关闭 synactive guixt.  在sap gui的右上角一个标志里,将 active guixt 选项去掉即可.

  5. vi检索

    / :检索 n    :向下执行上一步的检索 N   :向上执行上一步的检索

  6. 3.1.4 Spring的事务管理

    四.Spring的事务管理 事务原本是数据库中的概念, 在Dao层. 但一般情况下, 需要将事务提升到 业务层, 即Service层. 这样做是为了 能够使用事务的特性来管理具体的业务. 1. Spr ...

  7. 构造方法，this关键字，static关键字，封装，静态变量

    1.构造方法 构造方法是一种特殊的方法,是专门用于创建/实例化对象的方法. 构造方法根据是否有参数分为两类:1.无参构造方法  2.有参构造方法 1.1无参构造方法 无参构造方法就是构造方法中没有参数 ...

  8. ubuntu 切换到ROOT权限

    1.sudo+命令,输入当前用户密码后以root权限执行命令,有时间限制且仅限当前命令. 2.sudo -i,输入当前用户密码后以root权限登录shell,无时间限制.使用exit或logout退出 ...

  9. java学习之成员内部类

    //成员内部类:直接在类中定义 /*成员内部类的通常用法: * 通常是提供给外部类使用不进行内部类的实例化 * 因此一般把他设为私有的类用private限定 * * */ /*Demo*/ class ...

  10. Oracle exp和expdp对数据进行备份

    以下给出两个示例,详细内容需要查阅手册: exp system OWNER=ZLTX FILE=ZLTX20190123.DMP expdp system DUMPFILE=ZLTX20190123. ...