Django2.0：【Django2.0教程】12.Bootstrap响应式布局 视频学习笔记

视频链接：12.Bootstrap响应式布局

bootstrap响应式布局

将templates/blog移至blog/templates/。
修改blog/templates/blog/blog_list.html：

{% extends 'base.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">
                        {% for blog in blogs %}
                            <div class="blog">
                                <h3></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>
                                    <span class="glyphicon glyphicon-time"></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> 
            </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/static/blog/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;
}

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

修改blog/views.py：

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

blog/templates/blog/blogs_with_type.html：

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

{% block title %}
    {{ blog_type.type_name }}
{% endblock%}

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

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

blog/templates/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>作者：{{ 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 H:n:s" }}</li>
                </ul>
                <div class="blog-content">{{ blog.content }}</div>
            </div>
        </div>
    </div>  
{% endblock %}