12 Bootstrap 响应式布局

响应式布局——根据终端更改显示效果，就是一个网站能够兼容多个终端——而不是为了每个终端制作一个特定的版本

Bootstrap参数与模板

1. Bootstrap的响应式设计

2. 基本结构

<div class="container">
    <div class="row">
        <div class="col-xx-*">
        </div>
        <div class="col-xx-*">
        </div>
    </div>
</div>

利用F12工具查看网页和查看bootstrap文档，copy其CSS文件

app/static/app/article_type.css

ul.article_type {
    list-style-type: none; 
}
ul.article_type li a{
     color:#74759b;
}

div.article:not(:last-child){
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eeeeee;
}
div.article h3{
    margin-top: 0.5em;
}
div.article h3 a{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
}
#bd{
    font-size: 16px;
    color:#7a7374;

}

p.article_info a{
    color:#74759b;
}
p.article_info{
    color:#7a7374;
    margin-bottom: 0;
}

div.page-header h1{
    font-weight: bold;
    color: #000000;
}
ul.article_info_description{
    list-style-type: none;
    margin-bottom: 2em;
    font-weight: bold;
}
ul.article_info_description li{
    display: inline-block;
    margin-right: 0.2em;
    margin-top: 0em;
}
ul.article_info_description p.text-right{
    color:#74759b;
    -ms-layout-grid-mode: unset;
}
ul.article_info_description p.text-right a{
    color:#74759b;

}

app/views.py 在articles_list和article_with_type函数中进行添加

context['article_types'] = ArticleType.objects.all()    #    html文件中调用

app/templates/article_list.html

<!-- coding=gbk -->
<!-- home -->
{% extends 'base.html' %}
<!-- title -->
{% block title %}lab site{% endblock%}
{% block nav_articles_active %}active{% endblock %}
{% load static %}
{% block header_extends %}
<link rel="stylesheet" href="{% static 's2aclab/article_type.css' %}">
{% endblock %}
<!-- content -->
{% block content %}
<div class="container-fluid">
    <div class="row">

        <div class="col-xs-12 col-sm-6 col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    {% block article_list_title %}Blog List | {{ articles| length }} blogs{% endblock %}
                </div>
                <div class="panel-body">
                    {% for article in articles %}
                    <div class="article">
                        <h3 id="title"><a href="{% url 'article_details' article.pk %}">{{ article.title }}</a></h3>
                        <p class="article_info">
                            <a href="{% url 'article_with_type' article.article_type.pk %}">{{article.article_type}}</a>
                            | {{ article.created_time| date:"Y-m-d H:i:s"}}
                        </p>
                        <h3 id='bd'>{{ article.content| truncatewords:15 }}</h3>
                    </div>
                    {% empty %}
                    <div class="article">
                        <h3>--暂无文章，敬请期�?--</h3>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">Blog Categories</div>
                <div class="panel-body">
                    <ul class="article_type">
                        {% for type in article_types %}
                        <li>
                            <a href="{% url 'article_with_type' type.pk %}">
                                {{ type.type_name }}
                            </a>
                        </li>
                        {% empty %}
                        <li></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

app/templates/article_details.html引用list的html文件

<!-- coding=utf8 -->
{% extends 'articles_list.html' %}
<!--title -->
{% load static%}
{% block title %}
    {{article_type.type_name}}
{% endblock %}
{% block article_list_title %}
    {{article_type.type_name}} | 共有{{ articles| length }}篇文�? <a href="{% url 'articles_list' %}"></a>
{% endblock %}

app/templates/article_details.html引用list的css文件

<!-- coding=gbk -->
{% extends 'base.html' %}
<!--title -->
{% block title %}
    {{article.title}}
{% endblock %}
{% load static %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 's2aclab/article_type.css' %}">
{% endblock %}
<!-- content-->
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <div class="page-header">
                    <h1>{{article.title}} </h1>
                </div>
                <ul class='article_info_description'>
                    <li>Posted by {{ article.author }}</li>
                    <li>at: {{ article.created_time| date:"Y-m-d H:i:s"}}</li>
                    <p class='text-right'>Category:<a href="{% url 'article_with_type' article.article_type.pk %}">{{ article.article_type }}</a></p>
                </ul>
                <p class='article_content'>{{ article.content }}</p>

            </div>
        </div>
    </div>

{% endblock %}