Bootstrap栅格系统
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。.container
类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度)中。
通过“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row
和 .col-xs-4
这种预定义的类,可以用来快速创建栅格布局。
超小屏幕.col-xs-,小屏幕.col-sm-,中等屏幕.col-md-,大屏幕.col-lg-
列偏移.col-md-offset-*
<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 %}博客列表(一共有{{ page_of_blogs.paginator.count }}篇博客){% endblock %}</div>
<div class="panel-body">
{% for blog in page_of_blogs.object_list %}
<div class="blog">
<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>
带标题的面板
通过 .panel-heading
可以很简单地为面板加入一个标题容器。
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div>