视频链接: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 %}