赵走x博客 - 开发者的网上家园

12、集成 Bootstrap

资源编号:76319 Tango with Django Python Web 热度：101

本章使用 Twitter Bootstrap 装饰 Rango 应用。Bootstrap 是最为流行的 HTML、CSS 和 JavaScript 框架，支持响应式设计，简单易用。

本章使用 Twitter Bootstrap  装饰 Rango 应用。Bootstrap 是最为流行的 HTML、CSS 和 JavaScript 框架，支持响应式设计，简单易用。
>★ 层叠样式表 ★
如果你不熟悉 CSS，推荐阅读[《CSS 实战手册》](https://about.ac/books/css-manual-4th/ "《CSS 实战手册》")一书，学习层叠样式表的基础知识。

现在打开 [Bootstrap 的网站](https://v4-alpha.getbootstrap.com/ "Bootstrap 的网站")，可以看到网站给出了很多示例代码，说明了各组件的用法。此外， Bootstrap 的网站中还有一些[布局示例](https://v4-alpha.getbootstrap.com/examples/ "布局示例")，我们可以参照这些示例设计 Rango 应用。

在众多布局中，笔者觉得[这个管理后台](https://v4-alpha.getbootstrap.com/examples/dashboard/ "这个管理后台")比较适合 Rango，有导航栏、侧边栏（用于显示分类列 表）和主内容区。

打开这个管理后台布局，保存 HTML 源码，存储在 templates/rango 目录里，命名为 base_bootstrap.html。

为了在 Rango 应用中使用，还要做些修改：

❏ 把所有 ../../ 路径替换为 http://v4-alpha.getbootstrap.com/ 。

❏ 把 dashboard.css 的路径替换为绝对地址：http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css 。

❏ 把导航栏中的搜索框删除。

❏ 把页面中不相关的内容都删掉，替换为 `{% block body_block %}{% endblock %}`。

❏ 把页面的标题元素改为 `<title> Rango - {% block title %}How to Tango with Django!{% endblock %} </title>`。

❏ 把网站名称（“Dashboard”）改为“Rango”。

❏ 在导航栏中添加首页、登录和注册等页面的链接。

❏ 添加侧边栏区块：{% block sidebar_block %}{% endblock %}。

❏ 在 DOCTYPE 下面添加 {% load staticfiles %}。

# 12.1 模板

```
<!DOCTYPE html>
{% load staticfiles %}
{% load rango_template_tags %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{% static 'images/favicon.ico' %}">

<title>Rango - {% block title %}How to Tango with Django!{% endblock %}</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/dashboard/">

<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
    <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse"
            data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="{% url 'index' %}">Rango</a>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'index' %}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'about' %}">About</a>
            </li>
            {% if user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'restricted' %}">Restricted Page</a>
                </li>

<li class="nav-item">
                    <a class="nav-link" href="{% url 'add_category' %}">Add a New Category</a>
                </li>

<li class="nav-item">
                    <a class="nav-link" href="{% url 'auth_logout' %}?next=/rango/">Logout</a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'registration_register' %}"> Register Here </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'auth_login' %}"> Login </a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar"> {% block sidebar_block %}
            {% get_category_list category %} {% endblock %} </div>
        <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main"> {% block body_block %}{% endblock %} </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

```
创建好这个模板之后，下载 [favicon](https://raw.githubusercontent.com/leifos/tango_with_django_19/master/code/tango_with_django_project/static/images/favicon.ico "favicon")，保存到 static/images/ 目录中。

![bs64](https://img.handsomemark.com/2020/02/18/e659c54c-5251-11ea-9e12-0242ac140002.png)

仔细看一下上述 HTML 源码，你会发现里面有好多使用 `<div>` 标签创建的结构。整个页面基本上 分为两部分：`<nav`> 标签里的顶部导航栏和 `<div class="container-fluid">` 标签里的主内容区。 主内容区里还有两个 `<div> `标签，分别放置 sidebar_block 和 body_block 区块。

注意，这个 HTML 模板从外部网站引用 CSS 和 JavaScript 文件。因此，为了正确加载那些文件， 需要联网。

# 12.2 调整模板
接下来还要做些调整，把 base.html 模板中的代码替换为 base_bootstrap.html 中的代码。为此，可 以先把 base.html 中现有的代码注释掉，然后复制粘贴 base_bootstrap.html 中的代码。

然后刷新网页，你会发现页面变得精美多了。以关于页面为例，修改前后的对比如图 12-1 和图 12-2 所示。

![bs64](https://img.handsomemark.com/2020/02/18/1549c316-5252-11ea-af51-0242ac140002.png)
图 12-1：没有样式的关于页面

![bs64](https://img.handsomemark.com/2020/02/18/24f69cc6-5252-11ea-9ef0-0242ac140002.png)
图 12-2：集成 Bootstrap 后的关于页面

浏览一下其他页面，因为都继承自基模板，所以看起来应该都不错，但也有不足之处。接下来我 们逐一修改各页面的模板，使用 Bootstrap 提供的 CSS 类改进外观。

### 首页

首页中最受欢迎的分类和网页最好分两栏显示。浏览 Bootstrap 的示例后我们发现，[Narrow Jumbotron ](https://v4-alpha.getbootstrap.com/examples/narrow-jumbotron/ "Narrow Jumbotron ")中的两栏就符合我们的要求。查看网页源码，找到实现分栏的 HTML 代码：

```
<div class="row marketing">
    <div class="col-lg-6"><h4>Subheading</h4>
        <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4>
    </div>
    <div class="col-lg-6"><h4>Subheading</h4>
        <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p></div>
</div>
```

`<div class="row marketing">` 中有两个类为 col-lg-6 的` <div>` 元素。Bootstrap 采用栅格布局，一 个容器分成 12 份。col-lg-6 类表明所在的分栏占 6 份，即容器（`<div class="row marketing">`） 宽度的一半。

参照上述代码，修改 index.html 模板。

```

{% extends 'rango/base.html' %}
{% load staticfiles %}

{% block title_block %} Index {% endblock %}

{% block body_block %}
    <div class="jumbotron">
        <h1 class="display-3">Rango says...</h1> 
        
        {% if user.is_authenticated %}
            <h1>hey there {{ user.username }}!</h1> 
        {% else %} 
            <h1>hey there partner! </h1> 
        {% endif %}
    </div>
    
    <div class="row marketing">
        <div class="col-lg-6">
            <h4>Most Liked Categories</h4>
            <p> 
                {% if categories %}
                <ul> {% for category in categories %}
                    <li><a href="{% url 'show_category' category.slug %}"> {{ category.name }}</a></li> 
                {% endfor %}
                </ul> 
                
                {% else %} 
                    <strong>There are no categories present.</strong> 
                
                {% endif %} 
            </p> 
        </div>
    
        <div class="col-lg-6">
            <h4>Most Viewed Pages</h4>
            <p> 
                {% if pages %}
                <ul> 
                    {% for page in pages %}
                    <li><a href="{{ page.url }}">{{ page.title }}</a></li> 
                    {% endfor %} 
                </ul> 
                {% else %}
                    <strong>There are no categories present.</strong> 
                {% endif %} 
            </p> 
        </div>
    </div> 
    
    <img src="{% static "images/rango.jpg" %}" alt="Picture of Rango"/> 
{% endblock %}
```

我们把页面的标题放在 `<div class="jumbotron"> `中，以此突出显示。现在刷新页面，看起来好多 了，不过列表项目还是丑。

下面使用 Bootstrap 提供的列表组样式美化一下。修改方法很简单，把 `<ul>` 元素改成 `<ul class="list-group">`，把 `<li>` 元素改成` <li class="list-group-item">` 即可。再次刷新页面，现在好点了吧？

![bs64](https://img.handsomemark.com/2020/02/18/826fac3a-5257-11ea-9d29-0242ac140002.png)
图 12-3：添加超大标题和分栏后的首页

### 登录页面

接下来修改登录页面。Bootstrap 网站中有个不错的登录表单。查看网页源码，你会发现我们要在 现有的表单中添加几个类才能实现演示的效果。参照下述代码更新 login.html 模板中的 body_block 区块。
```
{% extends 'rango/base.html' %}
{% block body_block %}
    <link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

<div class="jumbotron">
        <h1 class="display-3">Login</h1>
    </div>

<form class="form-signin" role="form" method="post" action=".">
        {% csrf_token %}
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputUsername" class="sr-only">Username</label>

<label for="inputPassword" class="sr-only">Password</label>

<button class="btn btn-lg btn-primary btn-block"
                type="submit" value="Submit"/>Sign in</button>
    </form>
{% endblock %}
```

除了引入 signin.css 样式表，修改一些 CSS 类之外，我们还删除了自动生成表单元素的代码，即 form.as_p。现在，各表单元素及其 id 都由我们自己编写。注意，表单元素的 id 十分重要。为了 找出各表单元素的 id，可以查看修改之前的登录页面源码，即使用 form.as_p 模板标签生成的 HTML。

我们把按钮的 CSS 类设为 btn 和 btn-primary。在[文档](https://v4-alpha.getbootstrap.com/components/buttons/ "文档")中可以看到，Bootstrap 为按钮提供了大量 不同的颜色、大小和样式。

![bs64](https://img.handsomemark.com/2020/02/18/aeeb5338-525a-11ea-b294-0242ac140002.png)
图 12-4：集成 Bootstrap 后的登录页面

### 其他有表单的模板

参照登录页面修改 add_cagegory.html 和 add_page.html 模板。修改后的 add_page.html 模板如下。
```
{% extends "rango/base.html" %}
{% block title %}Add Page{% endblock %}

{% block body_block %}
    {% if category %}
        <form role="form" id="page_form" method="post" action="/rango/category/{{ category.slug }}/add_page/">
        <h2 class="form-signin-heading"> 
            Add a Page to 
            <a href="/rango/category/{{ category.slug }}/"> {{ category.name }}</a>
        </h2> 
        
        {% csrf_token %}
    
        {% for hidden in form.hidden_fields %} 
            {{ hidden }} 
        {% endfor %} 
        
        {% for field in form.visible_fields %}
            {{ field.errors }} 
            {{ field.help_text }}<br/> 
            {{ field }}<br/> 
        {% endfor %} 
        
        <br/>
    
        <button class="btn btn-primary" type="submit" name="submit"> Add Page</button>
        </form>
    {% else %}
    <p>This is category does not exist.</p> 
    {% endif %} 
{% endblock %}
```

### 注册页面

registration_form.html 模板中的表单可以像下面这样修改。
```
{% extends "rango/base.html" %}

{% block body_block %}
    <h2 class="form-signin-heading">Sign Up Here</h2>
    <form role="form" method="post" action="."> 
        
        {% csrf_token %} 
        
        <div class="form-group" > 
            <p class="required">
                <label class="required" for="id_username"> Username:</label> 
                <input class="form-control" id="id_username" 
                       maxlength="30" name="username" type="text" /> 
                <span class="helptext"> 
                    Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only. 
                </span> 
            </p> 
            
            <p class="required">
                <label class="required" for="id_email"> E-mail:</label> 
                
                <input class="form-control" id="id_email" name="email" type="email" />
            </p> 
            
            <p class="required">
                <label class="required" for="id_password1"> Password:</label> 
                <input class="form-control" id="id_password1" name="password1" type="password" /> 
            </p> 
            
            <p class="required"> 
                <label class="required" for="id_password2"> Password confirmation:</label> 
                
                <input class="form-control" id="id_password2" name="password2" type="password" /> 
                
                <span class="helptext"> Enter the same password as before, for verification.</span> 
            </p> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
{% endblock %}
```

同样，我们删掉了 {{ form.as_p }} 模板标签，各表单元素及其 CSS 类都是自己动手编写的。

![bs64](https://img.handsomemark.com/2020/02/18/74a15cd0-525b-11ea-a316-0242ac140002.png)
图 12-5：集成 Bootstrap 后的注册页面

>◆ 蹩脚的集成方式 ◆
这不是集成 Bootstrap 的最好方式，如果能让 Django 在构建 HTML 时自动插入相关的 CSS 类就好了。

### 12.3 使用 Django-Bootstrap-Toolkit

除了自己动手集成之外，还可以使用 django-bootstrap-toolkit 这样的包。先使用 pip 安装：
```
$ pip install django-bootstrap-toolkit
```
然后打开 settings.py 模块，把 bootstrap_toolkit 添加到 INSTALLED_APPS 中。

为了在模板中使用这个包，首先要使用 load 模板标签加载它（{% load bootstrap_toolkit %}），然后调用一个函数，更新生成的 HTML，即 {{ form|as_bootstrap }}。按照下述代码更新 add_category.html 模板。

```
{% extends "rango/base.html" %}

{% load bootstrap_toolkit %}

{% block title %}Add Category{% endblock %}

{% block body_block %}
    <form id="category_form" method="post" action="{% url 'add_category' %}">
        <h2 class="form-signin-heading">Add aCategory</h2> 
        
        {% csrf_token %} 
        {{ form|as_bootstrap }} 
        <br/>
        <button class="btn btn-primary" type="submit" name="submit">Create Category</button>
    </form> 
{% endblock %}
```

这样得到的模板更简洁，而且自动化程度更高，但是渲染结果没有手动集成的细致，因此还要做 些调整和定制。

# 12.4 接下来

本章简要说明了如何使用 Bootstrap 装饰 Django 应用。Bootstrap 是个高度可扩展的框架，能轻易 更改整体风格。[StartBootstrap](https://startbootstrap.com/ "StartBootstrap") 网站中有很多不同的风格。

除了 Bootstrap 之外，还有很多 CSS 框架可用，例如 [Zurb Foundation](https://foundation.zurb.com/ "Zurb Foundation")、[Titon](http://titon.io/en/toolkit "Titon")、[Pure](https://purecss.io/ "Pure")、[GroundWorkd](https://groundworkcss.github.io/groundwork/?url=docs/home "GroundWorkd") 和 [BassCSS](http://basscss.com/ "BassCSS")。

知道如何修改模板，实现响应式设计之后，下面回归正题，继续为 Rango 应用添加功能。