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文件中使用上面两个模板标签。
<!-- 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; }
