Django學習：響應式導航條(9)

本文轉載自查看原文 2019-08-26 14:48 429 Django2學習

下載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 %}

此時跳轉各個頁面按鈕，可以正常顯示激活的情況。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap 響應式導航條（navigation） Bootstrap組件之響應式導航條 CSS高級篇：響應式導航條 bootstrap 響應式導航條模板（含下拉菜單，彈出框） Bootstrap導航條 bootstrap 導航條導航條——彈出式懸浮菜單 HTML導航條的制作 Bootstrap_導航條網頁設計_導航條