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

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

1.为什么用CSS框架

  • 不会或不怎么会CSS
  • 不知道如何设计前端样式
  • 从头到尾写整个网站的CSS代码量大

2.如何选用CSS框架

  • 易用性、兼容性、大小、效果、功能，本教程选用Boostrap框架：文档齐全，使用简单、兼容较多浏览器、非轻量级、扁平与简洁、组件齐全与响应式。

3.部署Boostrap

  • 打开Boostrap网站www.bootcss.com
  • 下载Boostrap
  • 引用Boostrap：解压下载下来的压缩文件，将文件夹下的css、js、fonts这三个文件夹复制到mysite文件目录下的static文件夹下的bootstrp-3.3.7文件夹(需手动创建这个文件夹)下。打开css文件夹，删除当中的若干文件，只留下bootstrap.min.css和bootstrap.min.css.map这两个文件。同时，打开js文件夹，删除当中的若干文件，只留下bootstrap.min.js文件。
  • 使用前的步骤：打开网址https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js，接着点击另存为jquery-1.12.4.min.js至static文件夹下。
  • 开始使用：打开mysite文件夹下的tempaltes文件夹下的base.html，引入Bootstrap具体base.html内容如下所示： 
    {% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>{% block title %}{% endblock %}</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/base.css">
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
    <script src="{% static 'jquery-1.12.4.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    {% block header_extends %}

    {% endblock %}
</head>
<body>
    <div class="navbar navbar-default nav-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                 <a  class="navbar-brand" href="{% url 'home' %}">
                   个人博客网站
                </a>
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar-collapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="{% block nav_home_active %}{% endblock %}">
                        <a href="{% url 'home' %}">首页</a>
                    </li>
                    <li class="{% block nav_blog_active %}{% endblock %}">
                        <a href="{% url 'blog_list' %}">博客</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    {% block content %} {% endblock %}
</body>
</html>
  • 为了将导航条中的导航项目激活，即选择首页或博客时按钮会变灰，具体效果如下所示。此时在base.html文件中引入模板标签{% block nav_home_active %}{% endblock %}和{% block nav_blog_active %}{% endblock %}。接着在home.html、blog_list.html、blog_detail.html、blogs_with_type.html文件中使用上面两个模板标签。 
    <!-- home.html -->
{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
{% endblock %}


{% block nav_home_active %}active{% endblock %}

{% block content %}
    <h3 class="home-content">欢迎访问我的网站，随便看</h3>
{% endblock %}



<!-- blog_detail.html -->
{% extends 'base.html' %}

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

{% block nav_blog_active %}
    active
{% endblock %}


{# 页面内容 #}
{% block content %}
    <h3>{{ blog.title }}</h3>
    <p>作者: {{ blog.author }}</p>
    <p>发表日期: {{ blog.created_time|date:"Y-m-d G:i:s"}}</p>
    <p>分类:
        <a href="{% url 'blogs_with_type' blog.blog_type.pk%} ">
            {{ blog.blog_type }}
        </a>
    </p>
    <p>{{ blog.content }}</p>
{% endblock %}



<!-- blog_list.html -->
{% extends 'base.html' %}

{# blog_list.html文件内容 #}

{# 页面标题 #}
{% block title %}
    我的网站
{% endblock %}

{% block nav_blog_active %}
    active
{% endblock %}

{# 页面内容 #}
{% block content %}
    <!-- 下一行中的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 %}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}



<!-- blogs_with_type.html -->
{% extends 'base.html' %}

{# blogs_with_type.html文件内容 #}

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


{% block nav_blog_active %}
    active
{% endblock %}


{# 页面内容 #}
{% block content %}
    <!-- 下一行中的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 %}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}
激活导航条中的导航项目.png
  • 修改static文件夹下的base.css文件，修改后的文件内容如下所示： 
    * {
    margin: 0;
    padding: 0;
}

body {
    margin-top: 70px!import;
    padding-top: 50px;
}