繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

【Django2.0学习笔记】11.CSS框架协助前端布局_django前端 css

作者：繁依Fanyi0 | 2024-03-07 05:11:14

踩

django前端 css

文章目录

11、CSS框架协助前端布局

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文件-->
1
2

然后我们根据基本模板对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>
1
2
3
4
5
6

所以修改后的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

刷新页面：
在这里插入图片描述

下面我们对这个页面进行调整，首先我们调整导航栏：
我们点开官网文档里面的“起步”——“实例精选”——“固定位置导航条”
在这里插入图片描述

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在这里插入图片描述
刷新页面，我们就可以看到效果：

还有一个问题，当我们把页面缩小时，可以看到“首页”“博客”这两个叠放到一起了，不美观，我们参考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
在这里插入图片描述

至此，我们导航条部分的调整讲解完了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/203685?site