11、CSS框架协助前端布局
1、为什么用CSS框架
- 1、不会或不怎么会CSS
- 2、不知道如何设计前端样式
- 3、从头到尾写整个网站的CSS代码量大
- 4、…
2、如何选择CSS框架
- 易用性
- 兼容性
- 大小
- 效果
- 功能
——Bootstrap——
- 文档齐全，使用简单
- 兼容较多浏览器
- 非轻量级
- 扁平、简洁
- 组件齐全、响应式
3、部署Bootstrap
- 1、打开bootstrap网站
- 2、下载Bootstrap
- 3、引用Bootstrap
- 4、开始使用
下载完成后，打开
有三个文件夹：
（1）css文件夹——样式文件（说明文档）
有两个部分：bootstrap(min是压缩过的，map是给一些浏览器需要用到会自动搜索这个文件，不需要我们去引用)、bootstrap-theme（是涉及到相关的主题，一般我们在初学的时候也不太会去使用这个文件）。实际上我们用bootstrap.min.css和bootstrap.min.css.map这两个就够了。
（2）fonts文件夹——字体文件（https://v3.bootcss.com/components/有说明）
主要是一些图标，直接调用就可
（3）js文件夹——需要bootstrap.min.js文件就够了，它是对一些样式进行处理，例如下拉效果、跳转效果等
我们把这个三个文件夹拷贝到mysite\static目录下面，新建文件夹bootstrap-3.3.7，删掉其中一些不需要的文件
下面我们就要开始引用了，我们可以参照基本模块来写
打开base.html，先引用bootstrap的css和js文件
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> <!--src属性是引用js文件-->
然后我们根据基本模板对base.html进行调整补全：
语言设置为中文、
meta标签、
jQuery是一个JavaScript的库，它解决了js在不同的浏览器兼容的问题，这里bootstrap有些js插件会依赖于jquery，所以我们要引用这个。当然我们可以到jQuery网站去下载，直接打开这个网址，右键另存为，存到我们的静态文件夹static下，取名jquery-1.12.4.min.js，然后在base.html中引用它
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--这条针对IE浏览器的，告诉浏览器，使用最新的内核-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式供应关系。响应式：根据不同的屏幕自动响应布局-->
<script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}"></script>
所以修改后的base.html：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\templates\base.html-->
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--这条针对IE浏览器的，告诉浏览器，使用最新的内核-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式供应关系。响应式：根据不同的屏幕自动响应布局-->
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
<script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> <!--src属性是引用js文件-->
{% block header_extends %}{% endblock %}
</head>
<body>
<div class="nav">
<a class="logo" href="{% url 'home' %}">
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{% block content %}{% endblock %}
</body>
</html>
刷新页面：
下面我们对这个页面进行调整，首先我们调整导航栏：
我们点开官网文档里面的“起步”——“实例精选”——“固定位置导航条”
在base.html中写div.navbar.navbar-default，然后按Tab键，就会自动补全这个div标签，点代表class，多个点表示多个class，
因为是响应式布局，需要加一个容器，div.container-fluid，按Tab键，这个容器是按照比例，直接100%填满整个页面
然后分为两个部分，一个是logo部分：div.navbar-header，按Tab键
这里我们写一个列表ul.nav navbar-nav，按Tab键，然后在里面写li*2>a，按Tab键，然后在里面写“首页”“博客”，然后它们相应的地址写入，然后把base.css里面除*{}以外其他标签样式的css代码都删除掉
blog\templates\base.html：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\templates\base.html-->
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--这条针对IE浏览器的，告诉浏览器，使用最新的内核-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式供应关系。响应式：根据不同的屏幕自动响应布局-->
<title>{% block title %}{% endblock %}</title> <!--block标签，参数为：block的名称为title。【注意】这个标签没有endblock-->
<!-- <link rel="stylesheet" type="text/css" href="/static/base.css"> -->
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
<script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> <!--src属性是引用js文件-->
{% block header_extends %}{% endblock %}
</head>
<body>
<div class="navbar navbar-default" role='navigation'>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'home' %}">个人博客网站</a>
</div>
<ul class="nav navbar-nav">
<li><a href="{% url 'home' %}">首页</a></li>
<li><a href="{% url 'blog_list' %}">博客</a></li>
</ul>
</div>
</div>
{% block content %}{% endblock %}<!--block标签，参数为：block的名称为contente-->
</body>
</html>
刷新页面，我们就可以看到效果：
还有一个问题，当我们把页面缩小时，可以看到“首页”“博客”这两个叠放到一起了，不美观，我们参考bootstrap官网页面缩小后，我们可以看到一个下拉菜单的效果.我们查看导航条里面的实例代码：
我们把按钮效果加入到base.html里面去：buttom.navbar-toggle.collapsed，按Tab键，div.collapse.navbar-collapse#navbar-collapse，按Tab键，把上面写好的ul复制粘贴进这个div中：
然后把下拉菜单的图标对应的代码复制粘贴过来：
刷新页面，效果如下：
这里还有个东西需要讲一下，我们点击“博客”或者“首页”，我们需要这个地方变成选中激活状态，这就需要给对应的“首页”和“博客”设置class=active
我们需要在这里定义一个模块，例如“首页”这里：class="{% block nav_home_active %}{% endblock %}"，“博客”这里：class="{% block nav_blog_active %}{% endblock %}"
然后在home.htm加入代码{% block nav_home_active %}active{% endblock %}，在blog_list.html也加入代码{% block nav_blog_active %}active{% endblock %}（在blogs_with_type.html和blog_detail.html中都要添加这一行代码）
还有一点，当我们进入到某篇很长的博客，然后往下拉，会发现这个导航条就被顶出去了，如果我们想要在下拉滚动条的时候也保留导航条，就需要设置一下：在div.navbar.navbar-default这一标签里再添加一个class：navbar-fixed-top
刷新页面：
还有文章标题看不见的问题，我们需要在base.css里面设置一下：body{margin-top: 50px;}外边距50px，刷新一下发现还是不行，我们按F12查看body的styles，发现我们设置的这条被划掉无效了，因为已经有个重复设置了，所以我们需要改为body{margin-top: 50px!important;}提高优先级，表示这条设置是非常重要的，再刷新页面，成功。我们发现标题离导航条太近，效果不美观，我们就将50px调整为70px
至此，我们导航条部分的调整讲解完了
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
