整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一章我們完成了“學習筆記”Web應用程序的大部分功能，本章我們將通過Bootstrap對頁面樣式進行美化，這樣會讓我們的項目看起來更加專業。
Bootstrap主頁地址：
https://getbootstrap.com/Bootstrap主頁：
Bootstrap可以看作一個大型樣式設置工具集，提供了大量模版用于設置頁面樣式，創建獨特的項目總體風格。
1.下載安裝
我們將使用django_bootstrap5將Bootstrap包含到項目當中，執行如下命令，下載安裝django_bootstrap5：
pip install django_bootstrap52.注冊第三方應用
修改項目的setting.py，將django_bootstrap5作為第三方應用程序注冊到項目當中：
3.設置base.html的樣式
修改base.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>學習筆記</title>
<!-- 加載bootstrap的樣式 -->
{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- 定義導航欄 -->
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
學習筆記</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="{% url 'learning_logs:topics' %}">
主題列表</a></li>
</ul> <!-- End of links on left side of navbar -->
<!-- Account-related links -->
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-text me-2">你好， {{ user.username }}.
</span></li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:register' %}">
注冊</a></li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:login' %}">
登錄</a></li>
{% endif %}
</ul> <!-- End of account-related links -->
{% if user.is_authenticated %}
<form action="{% url 'accounts:logout' %}" method='post'>
{% csrf_token %}
<button name='submit' class='btn btn-outline-secondary btn-sm'>
注銷</button>
</form>
{% endif %}
</div> <!-- Closes collapsible parts of navbar -->
</div> <!-- Closes navbar's container -->
</nav> <!-- End of navbar -->
<!--div可以看作一個包含其他內容的容器，class屬性設置塊樣式-->
<main class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
</body>
</html>3.設置index.html的樣式
修改index.html：
{% extends 'learning_logs/base.html' %}
{% block page_header %}
<div class="p-3 mb-4 bg-light border rounded-3">
<div class="container-fluid py-4">
<h1 class="display-3">記錄您感興趣的內容</h1>
<p class="lead">使用學習筆記，每當您遇到感興趣的內容，
創建一個新主題，通過條目分類記錄下來。</p>
<a class="btn btn-primary btn-lg mt-1"
href="{% url 'accounts:register' %}">注冊 ?</a>
</div>
</div>
{% endblock page_header %}4.設置topics.html的樣式
修改topics.html：
{% extends 'learning_logs/base.html' %}
{% block page_header %}
<h1>所有主題</h1>
{% endblock page_header %}
{% block content %}
<ul class="list-group border-bottom pb-2 mb-4">
{% for topic in topics %}
<li class="list-group-item border-0">
<a href="{% url 'learning_logs:topic' topic.id %}">
{{ topic.text }}</a>
</li>
{% empty %}
<li class="list-group-item border-0">還沒有創建任何主題。</li>
{% endfor %}
</ul>
<a href="{% url 'learning_logs:new_topic' %}">創建主題</a>
{% endblock content %}5.修改new_topic.html
{% extends "learning_logs/base.html" %}
{% block content %}
<p>創建主題:</p>
<form action="{% url 'learning_logs:new_topic' %}" method='post'>
{% csrf_token %}
{{ form.as_p }}
<button name="submit">保存</button>
</form>
{% endblock content %}6.修改new_entry.html
{% extends "learning_logs/base.html" %}
{% block content %}
<p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>
<p>創建條目:</p>
<form action="{% url 'learning_logs:new_entry' topic.id %}" method='post'>
{% csrf_token %}
{{ form.as_p }}
<button name='submit'>保存</button>
</form>
{% endblock content %}7.修改new_entry.html
{% extends "learning_logs/base.html" %}
{% block content %}
<p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>
<p>編輯條目:</p>
<form action="{% url 'learning_logs:edit_entry' entry.id %}" method='post'>
{% csrf_token %}
{{ form.as_p }}
<button name="submit">保存</button>
</form>
{% endblock content %}從上面修改過程可以看到，修改頁面樣式，并不需要修改后段代碼，這正是MTV（模型M，模板T和視圖V）模式帶來的好處。
1.啟動服務器
python manage.py runserver2.使用瀏覽器訪問
http://127.0.0.1:80003.默認主頁展示
4.登錄成功
5.創建新主題
6.點擊主題列表
7.點擊特定主題
8.創建新條目
檔的標題
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>標題不會顯示在文檔區</title>
</head>
<body>
<p>這段文本會顯示出來。</p>
</body>
</html>
[/demo]
<title> 標題定義文檔的標題。
所有鏈接一個目標
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a target="_blank">這個連接</a> 將在新窗口中加載，因為 target 屬性被設置為 "_blank"。
</p>
<p>
<a >這個連接</a> 也將在新窗口中加載，即使沒有 target 屬性。
</p>
</body>
</html>
[/demo]
如何使用 base 標簽使頁面中的所有標簽在新窗口中打開。
文檔描述
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</head>
<body>
<p>本文檔的 meta 屬性標識了創作者和編輯軟件。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來描述文檔。
文檔關鍵詞
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
<body>
<p>本文檔的 meta 屬性描述了該文檔和它的關鍵詞。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來定義文檔的關鍵詞。
重定向用戶
[demo]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<body>
<p>
對不起。我們已經搬家了。您的 URL 是 <a >http://www.w3school.com.cn</a>
</p>
<p>您將在 5 秒內被重定向到新的地址。</p>
<p>如果超過 5 秒后您仍然看到本消息，請點擊上面的鏈接。</p>
</body>
</html>
[/demo]
如何把用戶重定向到新的網址。
HTML <head> 元素
<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 標簽定義文檔的標題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素能夠：
定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時顯示的標題
顯示在搜索引擎結果中的頁面標題
一個簡化的 HTML 文檔：
[demo]
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
[/demo]
HTML <base> 元素
<base> 標簽為頁面上的所有鏈接規定默認地址或默認目標（target）：
<head>
<base />
<base target="_blank" />
</head>
HTML <link> 元素
<link> 標簽定義文檔與外部資源之間的關系。
<link> 標簽最常用于連接樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素
<style> 標簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
元數據（metadata）是關于數據的信息。
<meta> 標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。
典型的情況是，meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
<meta> 標簽始終位于 head 元素中。
元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
針對搜索引擎的關鍵詞
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
下面的 meta 元素定義頁面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定義頁面的關鍵詞：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 屬性的作用是描述頁面的內容。
HTML <script> 元素
<script> 標簽用于定義客戶端腳本，比如 JavaScript。
我們會在稍后的章節講解 script 元素。
HTML 頭部元素
標簽 描述
<head> 定義關于文檔的信息。
<title> 定義文檔標題。
<base> 定義頁面上所有鏈接的默認地址或默認目標。
<link> 定義文檔與外部資源之間的關系。
<meta> 定義關于 HTML 文檔的元數據。
<script> 定義客戶端腳本。
<style> 定義文檔的樣式信息。
管現代Web開發更加依賴于各種MVC框架，但是開發者仍然需要對HTML和DOM有基本的了解。然而，即使對有多年經驗的前端開發人員來說，也會遇到一些不知道的情況。
HTML<head>元素用作元數據（關于數據的數據）的容器。它用在<html>標簽和<body>標簽之間。
HTML文檔的頭部內容在頁面加載時不會顯示在瀏覽器中。它僅包含有關HTML文檔的元數據。
元數據定義HTML文檔的標題，字符集，樣式，鏈接，腳本和其他元信息。
HTML頭部可以包含很多元數據信息，也可以很少或沒有信息，這取決于我們的需求。但是頭部對HTML文檔至關重要。
<head>元素包含了所有的頭部標簽元素。在<head>元素中你可以插入腳本（scripts）,樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。
HTML<title>元素用于定義文檔的標題。它在所有HTML/XHTML文檔中使用。<title>元素必須放在<head>元素之間，并且一個文檔只能有一個title元素。
它定義了瀏覽器選項卡中的標題。
當用戶將頁面添加到收藏夾時，它為頁面提供標題。
它在搜索引擎結果中顯示頁面的標題。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>文檔內容......</body>
</html>12345678復制代碼類型：[html]HTML<base>元素
<base>標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123復制代碼類型：[html]HTML<link>元素
HTML<link>元素用于將外部樣式表鏈接到您的網頁。<link>元素包含兩個主要屬性，即“rel”和“href”。rel屬性表示它是一個樣式表，href給出該外部文件的路徑。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123復制代碼類型：[html]HTML<style>元素
HTML<style>元素用于為HTML頁面設置樣式。<style>元素只影響當前頁面HTML頁面的CSS屬性。如果要對多個頁面應用CSS，則應使用單獨的CSS文件。
<head>
<style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123復制代碼類型：[html]HTML<meta>元素
HTML<meta>元素用于指定網頁上的字符集，頁面描述，關鍵字，作者和其他元數據。
搜索引擎和其他Web服務使用元數據來更好地對網頁進行排名。
<meta>標簽提供的元數據不顯示在頁面上，但會被瀏覽器解析。
<meta>一般放置于<head>區域。
<meta>標簽定義字符集：
<meta charset="UTF-8"> 1復制代碼類型：[html]charset屬性指定字符編碼。在此示例中，我們將其設置為“UTF-8”，這意味著它可以顯示任何語言。
<meta>標簽定義搜索引擎關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1復制代碼類型：[html]<meta>標簽定義網頁描述內容:
<meta name="description" content="免費 Web & 編程 教程">1復制代碼類型：[html]<meta>標簽定義網頁作者:
<meta name="author" content="Runoon">1復制代碼類型：[html]<meta>標簽定義每30秒鐘刷新頁面:
<meta http-equiv="refresh" content="30">1復制代碼類型：[html]元刷新用于向瀏覽器提供指令，以在給定的時間間隔后自動刷新頁面。如上例所示，它將在30秒后自動刷新。
<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1復制代碼類型：[html]如果添加了URL，則在指定時間結束后重定向到該頁面。
<meta>標簽定義設備尺寸
HTML5中引入了此方法，以通過使用<meta>標簽來控制視窗大小。視窗是用戶在網頁上的可見區域。它隨設備的不同而變化，在手機上的顯示尺寸明顯小于計算機屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1復制代碼類型：[html]<meta>視窗元素如何設定和控制頁面的尺寸和縮放比例。
width=device-width是用來設置頁面的寬度將與設備的屏幕寬度保持一致。
當最初由瀏覽器加載頁面時，initial-scale=1.0用于設置初始縮放級別。
HTML<script>元素
<script>標簽用于加載腳本文件，如：JavaScript。
<script>元素在以后的章節中會詳細描述。
HTMLhead元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
「鏈接」
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
