从零开始的django开发生活之Bootstrap响应式布局（6）

六、Bootstrap响应式布局

1、Bootstrap的响应式设计

在Bootstrap官网我们可以看到栅格系统的说明：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

2、基本结构

<div class="container">
    <div class="row">
    <div class="col-**-*">.col-md-8</div>
    <div class="col-**-*">.col-md-4</div>
    </div>
</div>

例如：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

实际效果将是这样：

在base.html中根据此结构编辑

<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 %}博客列表{% endblock %}（一共有{{ blogs|length }}篇博客）</div>
                    <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3>
                                <a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a>
                            </h3>
                            <p class="blog-info">
                                <span class="glyphicon glyphicon-tag" aria-hidden="true"></span><a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{blog.blog_type}}</a>
                                <span class="glyphicon glyphicon-time" aria-hidden="true"></span>{{blog.created_time|date:"Y-m-d"}}
                            </p>
                            <p>{{ blog.content|truncatechars:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>暂无博客，敬请期待</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
               <!--  <p>一共有{{ blogs|length }}篇博客</p>
                <p>{{ blog_count }}</p> -->
                <!-- {% for blog in blogs %}
                    <a href="{% url 'blog_detail' blog.pk %}">
                        <h3>{{ blog.title }}</h3>
                    </a>
                    <p>{{ blog.content|truncatechars:30 }}</p>
                {% empty %}
                    <p>--暂无博客，敬请期待--</p>
                {% endfor %}   -->
            </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>
                <!-- <h4>博客分类</h4>
                <ul>
                    {% 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>

效果：

几点说明：

1）栅格系统

<div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">

class中，xs适用于超小屏幕的栅格系统类，它是向上适应的，意思是适用于小屏幕的也会适用于中屏幕md，乃至大屏幕lg，如果我们只用col-md-9类，当屏幕缩小到一定程度时，右侧博客分类会移动到下部

2）儿子的儿子

<div class="panel-heading">{% block blog_list_title %}博客列表{% endblock %}（一共有{{ blogs|length }}篇博客）</div>

这里为什么写一个block块呢？我们比较一下就会发现，blog_list.html与blogs_type_list.html除了block块中内容，其他地方如出一辙，所以我们可以让blogs_type_list.html继承blog_list.html，也就是base儿子的儿子，代码就会非常简洁，省时省力，下面贴出blogs_type_list.html源代码

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

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

{% block blog_list_title %}
    分类：{{ blog_type.type_name }}
    <a href="{% url 'blog_list' %}">查看全部博客</a>
{% endblock %}

3）小图标

<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>使用这个类可以引用一个小画笔的图标

<span class="glyphicon glyphicon-time" aria-hidden="true"></span>使用这个类可以引用一个小钟表的图标

4）自动隐藏

<div class="hidden-xs col-sm-4 col-md-3 col-lg-2">使用hidden-xs类可以实现当屏幕缩小到超小屏幕尺寸时，自动隐藏div所包括内容

5）显示分类

<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>

这个地方用于显示博客分类，但是在实现这个功能之前，我们需要将BlogType中的对象传递给此模板页面，在views–>blog_list方法加入

context['blog_types'] = BlogType.objects.all()

ul.blog_types{ list-style-type: none; }

用于将列表前实心点去掉

下面贴出blog.css详细设置

ul.blog_types{
    list-style-type: none;
}
div.blog:not(:last-child){
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3{
    margin-top:0.5em;
}
div.blog p.blog-info{
    margin-bottom: 0;
}

/*blog_detail.html的CSS*/
ul.blog-info-description{
    list-style-type: none;
    margin-bottom: 2em;
}
ul.blog-info-description li{
    display: inline-block;
    margin-right: 1em;
}
div.blog-content{
    text-indent: 2em;
}

用于对整体效果进行一些微调，我将blog.css放入了在应用中新创建的static文件夹里的blog文件夹中，引入时路径要注意

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="container">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <h3>{{ blog.title }}</h3>
                <ul class="blog-info-description">
                    <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ blog.author }}</li>
                    <li><span class="glyphicon glyphicon-tag" aria-hidden="true"></span><a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a></li>
                    <li><span class="glyphicon glyphicon-time" aria-hidden="true"></span>{{ blog.created_time|date:"Y-m-d H:n:s" }}</li>
                </ul>
                <div class="blog-content">{{ blog.content }}</div>
            </div>
        </div>
    </div>
    
{% endblock %}

最后再对detail进行调整

3、Django静态文件命名空间

为了避免同名冲突问题

static/app/***.css，前面提到的将blog.css放入blog应用中是有其意义的，django搜索静态文件时首先在第一个static中搜索，如果找到对应文件，就会停止寻找下面的对应文件，即使是同名，所以为了避免以后APP中的静态文件重名，就在static下再创建一个应用目录