11 CSS框架协助前端布局

技术交流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文件中使用上面两个模板标签。