Django学习：响应式导航条(9)

下载BootStrap

https://v3.bootcss.com/

在static文件夹下面建立一个文件夹bootstrap-3.3.7，3.3.7是bootstrap版本号。将BootStrp的三个文件夹剪切到bootstrp-3.3.7文件夹里面。下载jquery1.12.4的js文件到bootstrap-3.3.7目录下。

为了更直观，css文件夹里面只保留含min的两个文件，js文件夹中只保留含min的js文件。

修改base.html文件，增加对css，js文件的引用。

{% load staticfiles %}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 'boostrap-3.3.7/css/bootstrap.min.css' %}">
	<script type="text/javascript" src="{% static 'jquery1.12.4.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'boostrap-3.3.7/js/bootstrap.min.js' %}"></script>
	{% 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>

按照https://v3.bootcss.com/components/#navbar设置类似的导航条

修改base.html文件如下：

{% load staticfiles %}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 'boostrap-3.3.7/css/bootstrap.min.css' %}">
	<script type="text/javascript" src="{% static 'jquery1.12.4.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'boostrap-3.3.7/js/bootstrap.min.js' %}"></script>
	{% 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 %}

</body>
</html>

刷新localhost:8000页面。

目前存在一个问题，当页面缩小时，首页和博客的标签会缩到第二行去，我们可以做一个按钮，当页面变小时，可以通过点击这个按钮，显示相应的首页和博客标签，也就是响应式布局。

按照https://v3.bootcss.com/components/#navbar进行导航条的设置

修改base.html

{% load staticfiles %}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 'jquery1.12.4.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    {% 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>
                <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 class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href='{% url "home" %}'>首页</a></li>
                    <li><a href='{% url "blog_list" %}'>博客</a></li>
                </ul>
            </div>
        </div>
    </div>  

    {% block content %}{% endblock %}

</body>
</html>

再次访问127.0.0.1:8000，当页面缩小的时候可以看到多了一个按钮，点击可以显示首页和博客标签。

在阅读长博客时下方内容的时候，导航按钮就看不到了，需要给导航栏div块设置一个navbar-fixed-top的class属性。

base.html修改如下：

{% load staticfiles %}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 'jquery1.12.4.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    {% block header_extends %}{% endblock %}
</head>
<body>
    <div class="navbar navbar-default navbar-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 class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href='{% url "home" %}'>首页</a></li>
                    <li><a href='{% url "blog_list" %}'>博客</a></li>
                </ul>
            </div>
        </div>
    </div>  

    {% block content %}{% endblock %}

</body>
</html>

增加导航条按钮后标题不能正常显示，为了让其显示，需要让它下沉，修改base.css

* {
	margin: 0;
	padding: 0;
}
body {
	margin-top: 70px!important;
}

为了让各个标签显示出被选中的情况，需要设置class为active

base.html修改如下：

{% load staticfiles %}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 'jquery1.12.4.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    {% block header_extends %}{% endblock %}
</head>
<body>
    <div class="navbar navbar-default navbar-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 class="collapse navbar-collapse" id="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>

home.html修改如下：

{% extends 'base.html' %}
{% load staticfiles %}

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

{% block header_extends %}
	<link rel="stylesheet" type="text/css" 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:m: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' %}

{# 页面标题 #}
{% block title %}
	个人博客网站
{% endblock %}

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

{# 页面内容 #}
{% block content %}
	{% for blog in blogs %}
		<a href="{% url 'blog_detail' blog.pk %}">
			<h3>{{ blog.title }}</h3>
		</a>
		<p>{{ blog.content|truncatechars_html:30 }}</p>

	{% empty %}
		<p>-- 暂无博客，敬请期待 --</p>
	{% endfor %}
	<p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}

blogs_with_type.html修改如下：

{% extends 'base.html' %}

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

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

{# 页面内容 #}
{% block content %}
	<h3>{{ blog_type.type_name }}</h3>
	{% for blog in blogs %}
		<a href="{% url 'blog_detail' blog.pk %}">
			<h3>{{ blog.title }}</h3>
		</a>
		<p>{{ blog.content|truncatechars_html:30 }}</p>

	{% empty %}
		<p>-- 暂无博客，敬请期待 --</p>
	{% endfor %}
	<p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}

此时跳转各个页面按钮，可以正常显示激活的情况。

posted on 2019-08-26 14:48 月见空青阅读(1325) 评论(0) 编辑收藏举报

刷新页面返回顶部

月见空青

Django学习：响应式导航条(9)

导航

公告