12 Boostrap响应式布局

技术交流QQ群:1027579432，欢迎你的加入！

本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！

1.Bootstra的响应式设计

栅格参数.png

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，栅格系统中的所有列(column)必须放在.row内。

2.栅格系统代码基本结构

<div class="container">
    <div class="row">
        <div class="col-xx-*"></div>
        <div class="col-xx-*"></div>
    </div>
</div>

因为博客分类的页面与blog这个Django应用联系更紧密，因此将mysite根目录下的templates文件夹下的blog文件夹剪切至blog文件目录下的templates文件夹中。这样，既方便整个项目的迁移，又不用去修改views.py文件中的路径。
修改blog文件夹下的views.py文件，在blog_list()函数中返回博客分类字段。如下所示：
```
context['blog_types'] = BlogType.objects.all()
```

打开博客列表前端页面对应的blog_list.html文件，添加Bootstrap中的栅格系统后的文件内容如下所示：

{% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}



{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                        <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
                            <p>{{ blog.content|truncatechars:30 }}</p>
                        {% empty %}
                            <p>--暂无博客，敬请期待--</p>
                        {% endfor %}

                    </div>
                </div>

            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客分类
                    </div>
                    <div class="panel-body">
                        <ul style="list-style: none;">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

对上述blog_list.html文件进行修改，主要修改ul style="list-style: none;"></ul>。在static目录下创建blog.css文件，将样式写在该文件下，如下所示：
```
ul.blog-types {
 list-style: none;
}
```

然后在blog_list.html文件中引入blog.css文件，即添加内容后的blog_list.html如下所示：

{% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                        <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
                            <p>{{ blog.content|truncatechars:30 }}</p>
                        {% empty %}
                            <p>--暂无博客，敬请期待--</p>
                        {% endfor %}

                    </div>
                </div>

            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客分类
                    </div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

因为blog.css与具体的Django应用blog相关，所以需要在Django应用blog文件夹下创建static文件夹，然后在该文件夹下创建blog文件夹。最后，将blog.css文件粘贴到blog文件夹中即可。注意：修改blog_list.html文件中加载blog.css文件的路径为：<link rel="stylesheet" href="{% static 'blog/blog.css' %}">，再重启本地服务。
因为博客首页预览显示的文字只有30，所以修改blog_list.html文件中的{{ blog.content|truncatechars:30 }}为** {{ blog.content|truncatechars:120 }}**，具体效果如下所示：

博客首页预览显示的文字个数.png

如上图所示，每篇博客的标题与博客列表(一共有3篇博客)之间的间距太大，因此修改blog_list.html，增加一个class名为blog的div盒子。如下所示：

{% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <h3>暂无博客，敬请期待</h3>
                           </div>
                        {% endfor %}
                    </div>
                </div>

            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客分类
                    </div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

给blog_list.html文件中的h3和class=blog的div标签增加css样式进行修饰，打开blog.css文件，增加如下内容：

div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border: 1px solid #eee;
}

div.blog h3 {
    margin-top: 0.5em;
}

在blog_list.html文件中增加博客的分类与发表时间，修改后的blog_list.html如下所示：

{% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p class="blog-info">
                                    分类：<a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a> &nbsp&nbsp&nbsp
                                    发表日期：{{ blog.created_time|date:"Y-m-d" }}
                                </p>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <h3>暂无博客，敬请期待</h3>
                           </div>
                        {% endfor %}
                    </div>
                </div>

            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客分类
                    </div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

修改博客正文内容与博客分类与发表日期之间的间距，在blog.css中增加如下代码：
```
div.blog p.blog-info {
    margin-bottom: 0;
}
```
接着将分类与发表日期修改为图标表示，在blog_list.html中增加如下代码：
```


```

点击首页中的博客，可以显示全部的博客。点击页面中的随笔，可以进入所有都是随笔类型博客。这个前端页面与主页中显示的全部博客页面类型。blog_list.html模板文件和blogs_with_type.html模板文件的不同是一个是统计总的博客数量，一个是按博客类型统计数量。因此，可以对blog_list.html模板文件进行修改。首先在blog_list.html文件中，增加模板标签{% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}，这样可以根据blogs_with_type.html中与blog_list.html不同部分的内容对模板标签进行替换，增加后的blog_list.html文件如下所示：

{% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p class="blog-info">
                                    <span class="glyphicon glyphicon-tag"></span><a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a> &nbsp&nbsp&nbsp
                                    <span class="glyphicon glyphicon-time"></span>{{ blog.created_time|date:"Y-m-d" }}
                                </p>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <h3>暂无博客，敬请期待</h3>
                           </div>
                        {% endfor %}
                    </div>
                </div>

            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        博客分类
                    </div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

接着对blogs_with_type.html文件进行修改，引用blog_list.html文件中已经写好的部分内容。修改后的内容如下所示：

{% extends 'blog/blog_list.html' %}

{# blogs_with_type.html文件内容 #}

{# 页面标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{% block blog_list_title %}
    分类：{{ blog_type.type_name }}(一共有{{ blogs|length }}篇博客)
{% endblock %}

因为blog文件目录下的views.py中缺少博客分类对应的处理方法，所以出现下面的画面：

博客分类显示暂无分类.png

打开blog文件目录下的views.py文件，对blogs_with_type()方法进行修改，修改后的views.py内容如下所示：

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog, BlogType
# Create your views here.


def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request, blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog/blog_detail.html', context)


def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    context['blog_type'] = blog_type
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blogs_with_type.html', context)

在blogs_with_type.html模板文件中增加查看全部博客，便于显示所有对应类别的博客。因此，对blogs_with_type.html文件进行修改，修改后的内容如下所示：

{% extends 'blog/blog_list.html' %}

{# blogs_with_type.html文件内容 #}

{# 页面标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{% block blog_list_title %}
    分类：{{ blog_type.type_name }}(一共有{{ blogs|length }}篇博客)
    <a href="{% url 'blogs_with_type' blog_type.pk %}">查看全部博客</a>
{% endblock %}

对具体某篇博客的模板文件blog_detail.html进行修改，修改后的内容如下所示：

{% extends 'base.html' %}

{# 页面标题 #}
{% block title %}
    {{ blog.title }}
{% endblock %}

{% block nav_blog_active %}
    active
{% endblock %}


{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
{% endblock %}


{# 页面内容 #}
{% block content %}
    <div class="contaiiner">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <h3>{{ blog.title }}</h3>
                <ul class="blog-info-description">
                    <li>作者: {{ blog.author }}</li>
                    <li>分类:
                        <a href="{% url 'blogs_with_type' blog.blog_type.pk %} ">
                            {{ blog.blog_type }}
                        </a>
                    </li>
                    <li>发表日期: {{ blog.created_time|date:"Y-m-d" }}</li>
                </ul>

                <div class="blog-content">{{ blog.content }}</div>
            </div>
        </div>
    </div>

{% endblock %}

最后，对blog_detail.html进行css美化修饰。在blog.css中增加如下内容：

ul.blog-info-description {
    list-style: none;
    margin-bottom: 1em;

}

ul.blog-info-description li {
    display: inline-block;
    margin-right: 2em;
}

div.blog-content {
    text-indent: 2em;
}