12 Boostrap响应式布局

技术交流QQ群:1027579432，欢迎你的加入！

本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！

1.Bootstra的响应式设计

栅格参数.png
  • Bootstrap需要为页面内容和栅格系统包裹一个.container容器，栅格系统中的所有列(column)必须放在.row内。

2.栅格系统代码基本结构 

<div class="container">
    <div class="row">
        <div class="col-xx-*"></div>
        <div class="col-xx-*"></div>
    </div>
</div>
  • 因为博客分类的页面与blog这个Django应用联系更紧密，因此将mysite根目录下的templates文件夹下的blog文件夹剪切至blog文件目录下的templates文件夹中。这样，既方便整个项目的迁移，又不用去修改views.py文件中的路径。
  • 修改blog文件夹下的views.py文件，在blog_list()函数中返回博客分类字段。如下所示： 
    context['blog_types'] = BlogType.objects.all()
  • 打开博客列表前端页面对应的blog_list.html文件，添加Bootstrap中的栅格系统后的文件内容如下所示： 
    {% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% 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">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                        <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
                            <p>{{ blog.content|truncatechars:30 }}</p>
                        {% empty %}
                            <p>--暂无博客，敬请期待--</p>
                        {% 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 style="list-style: none;">
                            {% 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_list.html文件进行修改，主要修改ul style="list-style: none;"></ul>。在static目录下创建blog.css文件，将样式写在该文件下，如下所示： 
    ul.blog-types {
    list-style: none;
}
  • 然后在blog_list.html文件中引入blog.css文件，即添加内容后的blog_list.html如下所示： 
    {% extends 'base.html' %}
{# blog_list.html文件内容 #}
{# 页面标题 #}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static '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">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                        <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
                            <p>{{ blog.content|truncatechars:30 }}</p>
                        {% empty %}
                            <p>--暂无博客，敬请期待--</p>
                        {% 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.css与具体的Django应用blog相关，所以需要在Django应用blog文件夹下创建static文件夹，然后在该文件夹下创建blog文件夹。最后，将blog.css文件粘贴到blog文件夹中即可。注意：修改blog_list.html文件中加载blog.css文件的路径为：<link rel="stylesheet" href="{% static 'blog/blog.css' %}">，再重启本地服务。
  • 因为博客首页预览显示的文字只有30，所以修改blog_list.html文件中的<p>{{ blog.content|truncatechars:30 }}</p>为** <p>{{ blog.content|truncatechars:120 }}</p>**，具体效果如下所示：
    博客首页预览显示的文字个数.png
  • 如上图所示，每篇博客的标题与博客列表(一共有3篇博客)之间的间距太大，因此修改blog_list.html，增加一个class名为blog的div盒子。如下所示： 
    {% extends 'base.html' %}
{# blog_list.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">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <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_list.html文件中的h3和class=blog的div标签增加css样式进行修饰，打开blog.css文件，增加如下内容： 
    div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border: 1px solid #eee;
}

div.blog h3 {
    margin-top: 0.5em;
}
  • 在blog_list.html文件中增加博客的分类与发表时间，修改后的blog_list.html如下所示： 
    {% extends 'base.html' %}
{# blog_list.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">
                        博客列表(一共有{{ blogs|length }}篇博客)
                    </div>
                    <div class="panel-body">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p class="blog-info">
                                    分类：<a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a> &nbsp&nbsp&nbsp
                                    发表日期：{{ blog.created_time|date:"Y-m-d" }}
                                </p>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <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.css中增加如下代码： 
    div.blog p.blog-info {
    margin-bottom: 0;
}
  • 接着将分类与发表日期修改为图标表示，在blog_list.html中增加如下代码： 
    <span class="glyphicon glyphicon-tag"></span>
<span class="glyphicon glyphicon-time"></span>
  • 点击首页中的博客，可以显示全部的博客。点击页面中的随笔，可以进入所有都是随笔类型博客。这个前端页面与主页中显示的全部博客页面类型。blog_list.html模板文件和blogs_with_type.html模板文件的不同是一个是统计总的博客数量，一个是按博客类型统计数量。因此，可以对blog_list.html模板文件进行修改。首先在blog_list.html文件中，增加模板标签{% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}，这样可以根据blogs_with_type.html中与blog_list.html不同部分的内容对模板标签进行替换，增加后的blog_list.html文件如下所示： 
    {% extends 'base.html' %}
{# blog_list.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">
                        <!-- 下一行中的blogs来自于views.py中的context['blogs'] = Blog.objects.all() -->
                        {% for blog in blogs %}
                            <div class="blog">
                                <!-- 下一行中的blog.title来自于models.py中的title = models.CharField(max_length=50) -->
                                <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> &nbsp&nbsp&nbsp
                                    <span class="glyphicon glyphicon-time"></span>{{ blog.created_time|date:"Y-m-d" }}
                                </p>
                                <p>{{ blog.content|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                           <div class="bog">
                                <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 %}
  • 接着对blogs_with_type.html文件进行修改，引用blog_list.html文件中已经写好的部分内容。修改后的内容如下所示： 
    {% extends 'blog/blog_list.html' %}

{# blogs_with_type.html文件内容 #}

{# 页面标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{% block blog_list_title %}
    分类：{{ blog_type.type_name }}(一共有{{ blogs|length }}篇博客)
{% endblock %}

  • 因为blog文件目录下的views.py中缺少博客分类对应的处理方法，所以出现下面的画面：


    博客分类显示暂无分类.png
  • 打开blog文件目录下的views.py文件，对blogs_with_type()方法进行修改，修改后的views.py内容如下所示： 
    from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog, BlogType
# Create your views here.


def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request, blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog/blog_detail.html', context)


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)
  • 在blogs_with_type.html模板文件中增加查看全部博客，便于显示所有对应类别的博客。因此，对blogs_with_type.html文件进行修改，修改后的内容如下所示： 
    {% extends 'blog/blog_list.html' %}

{# blogs_with_type.html文件内容 #}

{# 页面标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{% block blog_list_title %}
    分类：{{ blog_type.type_name }}(一共有{{ blogs|length }}篇博客)
    <a href="{% url 'blogs_with_type' blog_type.pk %}">查看全部博客</a>
{% endblock %}
  • 对具体某篇博客的模板文件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="contaiiner">
        <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" }}</li>
                </ul>

                <div class="blog-content">{{ blog.content }}</div>
            </div>
        </div>
    </div>

{% endblock %}
  • 最后，对blog_detail.html进行css美化修饰。在blog.css中增加如下内容： 
    ul.blog-info-description {
    list-style: none;
    margin-bottom: 1em;

}

ul.blog-info-description li {
    display: inline-block;
    margin-right: 2em;
}

div.blog-content {
    text-indent: 2em;
}
全部评论

相关推荐

头像
11-22 11:19
已编辑
门头沟学院 前端工程师
简历这样写真的很难挂
没有标题党哈，从我实习到现在，虽然简历也有挂过，但基本都是中小厂（很怪）。最近有好多牛u私信我说很多公司简历关过不去，私信询问简历应该怎么写怎么改，正好现在好多26届甚至27届的学弟学妹们都在准备日常实习，明年3月份开始也要准备暑期实习，简历这块感觉我也许有一些建议是大家都可以用到的。下面的话我会从整体到每个内容，再到一些细节点去给大家一些建议。每个模块都很细致！快快收藏起来！！！1.整体结构大部分的牛u应该都是比较正常的履历，可能没有竞赛，有些项目。所以这块应该是大家都适用的。对于没有实习经历的牛u，从上到下依次是：【个人信息】-【教育经历】-【项目经历】-【专业技能】-【社团和荣誉证书等其...
投递完美世界等公司10个岗位 > 我的上岸简历长这样 你的简历改到第几版了
点赞 评论 收藏
分享
11-19 15:08
中国矿业大学（北京） 后端
25届浙江二本JAVA简历：估计投500份，最多3-5个面试
注：为保证用户信息安全，姓名和学校等信息已经进行同层次变更，内容部分细节也进行了部分隐藏另外：我们出这一系列校招简历指导的原因，就是看很多学生被忽悠，没有先定位大厂、中厂还是小公司，导致没有面试机会。&nbsp;我们不放任何的广告和品牌名，完全是反馈牛客社区。大家也不要私信，现在比较忙，没空帮大家改简历。简历总体说明校招的第一法则就是必须要确定校招层次。开发岗分为大中小厂，不同的层次对学校背景、时间点、项目和考点的要求都不太一样，所以必须要确定就业的层次。&nbsp;这是一份25届某二本的计算机的JAVA简历。如果是我们的老粉丝会知道，HR第一眼要看你学的专业满不满足招聘需求，所以投递简历的时候一定要注意，先...
投递联想等公司10个岗位 > 简历中的项目经历要怎么写 你觉得哪一届的校招最难？
点赞 评论 收藏
分享
09-26 10:57
ノートルダム清心女子大学 Java
2k我也干，我要技术入股
害怕一个人的小黄鸭胖乎乎：笑死了，没有技术大牛，招一堆应届生，不到半年，代码就成屎山了
点赞 评论 收藏
分享
10-05 11:11
海南大学 Java
投票
说是先实习，有机会转正。可信吗？能转正吗？
理想江南137：感觉挺真诚的 感觉可以试一试
点赞 评论 收藏
分享
11-17 21:35
青岛理工大学 供应链其他
希音上班的真实体验
先说说工作强度吧，这里的节奏真快。我在分拣岗位，基本上从上班开始就没停过。再说薪资，希音的待遇还是挺吸引人的，收入相当可观，我身边不少同事每个月都能过万。而且福利也不错，有餐补和高温补贴，工资发放也很准时。工作环境方面，仓库整体挺整洁有序的，设备也比较先进，工作起来很方便。宿舍条件也还行，虽然是多人间，但有空调、洗衣机、热水器，基本生活需求都能满足。团队氛围方面，我的团队都是年轻人，有活力。大家互相帮助，遇到问题一起讨论解决。偶尔有小摩擦，但大家都能很快化解，不会影响工作。在希音这段时间，我学到了很多，不仅是工作技能，还有对物流行业的深入了解。公司定期组织培训，让我们了解最新的行业动态，个人成...
SHEIN希音公司福利 25人发布
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
267331次浏览 2244人参与
# 学历or实习经历，哪个更重要 #
44028次浏览 332人参与
# 北方华创开奖 #
23815次浏览 260人参与
# 地方国企笔面经互助 #
2912次浏览 7人参与
# 你觉得专业和学校哪个对薪资影响最大 #
28362次浏览 213人参与
# 选完offer后，你后悔学本专业吗 #
13869次浏览 99人参与
# 0offer是寒冬太冷还是我太菜 #
888416次浏览 7914人参与
# 你最想要的公司福利是？ #
42315次浏览 150人参与
# 查收我的offer竞争力报告 #
20051次浏览 257人参与
# 如何一边实习一边秋招 #
987713次浏览 12610人参与
# 应届生被毁约被毁意向了怎么办 #
28390次浏览 244人参与
# 一觉醒来，我觉醒了超级打工人系统 #
3374次浏览 36人参与
# 没有实习经历，还有机会进大厂吗 #
807422次浏览 13856人参与
# 来聊聊机械薪资天花板是哪家 #
66167次浏览 447人参与
# 面试体验感最好的是哪家？ #
83772次浏览 819人参与
# 机械应届生薪资要多少才合适？ #
12555次浏览 61人参与
# 如果公司降薪，你会跳槽吗？ #
24838次浏览 236人参与
# 如何写一份好简历 #
605536次浏览 8526人参与
# 秋招OC许愿 #
228520次浏览 1881人参与
# 寒假躺平还是提前实习 #
59663次浏览 457人参与
# 你认为第一份工作重要吗 #
5467次浏览 50人参与
牛客网
牛客企业服务