Bootstrap的响应式设计
修改博客列表页面
- 使用 bootstrap 里面带标题的面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
博客列表页面
在blog App 里面创建一个static, 用来存储此App用的静态文件, 把li标签前面的小圆点去掉, 创建了一个blog_type.css文件, 然后在html文件里面引入此文件.
blog_list.html
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}
{% block head %}
<link rel="stylesheet" href="{% static 'blog/css/blog_type.css' %}">
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="panel panel-default">
<div class="panel-heading">博客列表 (一共有{{ blogs | length }}篇博客)</div>
<div class="panel-body">
{% for blog in blogs %}
<div class="blog">
<h3>
<a href="{% url 'blog_detail' blog.id %}">
{{ blog.title }}
</a>
</h3>
<p class="blog-info">
<span class="glyphicon glyphicon-tag"></span> <a href="{% url 'blog_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:50 }}</p>
</div>
{% empty %}
<div class="blog">
<h3> 暂无博客,敬请期待 </h3>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-sm-3 hidden-xs">
<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 'blog_with_type' blog_type.pk %}">
{{ blog_type.type_name }}
</a>
</li>
{% empty %}
<li>暂无分类</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
设置样式
/* 设置小圆点不显示 */
.blog-types {
list-style-type: none
}
/* 设置外边距,内边距和边框, 最后一个元素不设置 */
.blog:not(:last-child) {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.blog h3 {
margin-top: 0.5em;
}
博客详情页
{% extends 'base.html' %}
{% block title %} {{ blog.title }} {% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}
{% block head %}
<link rel="stylesheet" href="{% static 'blog/css/blog_content.css' %}">
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<p>作者: {{ blog.author }}</p>
<p>创建时间: {{ blog.created_time | date:"Y-m-d H:n:s" }}</p>
<p>分类:
<a href="{% url 'blog_with_type' blog.blog_type.pk %}">
{{ blog.blog_type }}
</a>
</p>
<p class="blog-content">{{ blog.content }}</p>
</div>
</div>
</div>
{% endblock %}
设置样式
.blog-types {
list-style-type: none
}
.blog:not(:last-child) {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.blog h3 {
margin-top: 0.5em;
}
div.blog p.blog-info {
margin-bottom: 0;
}
.blog-content {
width: 100%;
height: auto;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
text-indent: 2em;
}
.blog-info-description {
list-style-type: none;
margin-bottom: 5px;
}
.blog-info-description li {
display: inline-block;
margin-right: 10px;
}