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>