整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一章我們完成了“學(xué)習(xí)筆記”Web應(yīng)用程序的大部分功能，本章我們將通過Bootstrap對頁面樣式進(jìn)行美化，這樣會讓我們的項(xiàng)目看起來更加專業(yè)。
Bootstrap主頁地址：
https://getbootstrap.com/Bootstrap主頁：
Bootstrap可以看作一個(gè)大型樣式設(shè)置工具集，提供了大量模版用于設(shè)置頁面樣式，創(chuàng)建獨(dú)特的項(xiàng)目總體風(fēng)格。
1.下載安裝
我們將使用django_bootstrap5將Bootstrap包含到項(xiàng)目當(dāng)中，執(zhí)行如下命令，下載安裝django_bootstrap5：
pip install django_bootstrap52.注冊第三方應(yīng)用
修改項(xiàng)目的setting.py，將django_bootstrap5作為第三方應(yīng)用程序注冊到項(xiàng)目當(dāng)中：
3.設(shè)置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>學(xué)習(xí)筆記</title>
<!-- 加載bootstrap的樣式 -->
{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- 定義導(dǎo)航欄 -->
<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' %}">
學(xué)習(xí)筆記</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可以看作一個(gè)包含其他內(nèi)容的容器，class屬性設(shè)置塊樣式-->
<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.設(shè)置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">記錄您感興趣的內(nèi)容</h1>
<p class="lead">使用學(xué)習(xí)筆記，每當(dāng)您遇到感興趣的內(nèi)容，
創(chuàng)建一個(gè)新主題，通過條目分類記錄下來。</p>
<a class="btn btn-primary btn-lg mt-1"
href="{% url 'accounts:register' %}">注冊 ?</a>
</div>
</div>
{% endblock page_header %}4.設(shè)置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">還沒有創(chuàng)建任何主題。</li>
{% endfor %}
</ul>
<a href="{% url 'learning_logs:new_topic' %}">創(chuàng)建主題</a>
{% endblock content %}5.修改new_topic.html
{% extends "learning_logs/base.html" %}
{% block content %}
<p>創(chuàng)建主題:</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>創(chuàng)建條目:</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.啟動服務(wù)器
python manage.py runserver2.使用瀏覽器訪問
http://127.0.0.1:80003.默認(rèn)主頁展示
4.登錄成功
5.創(chuàng)建新主題
6.點(diǎn)擊主題列表
7.點(diǎn)擊特定主題
8.創(chuàng)建新條目
檔的標(biāo)題
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>標(biāo)題不會顯示在文檔區(qū)</title>
</head>
<body>
<p>這段文本會顯示出來。</p>
</body>
</html>
[/demo]
<title> 標(biāo)題定義文檔的標(biāo)題。
所有鏈接一個(gè)目標(biāo)
[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">這個(gè)連接</a> 將在新窗口中加載，因?yàn)?target 屬性被設(shè)置為 "_blank"。
</p>
<p>
<a >這個(gè)連接</a> 也將在新窗口中加載，即使沒有 target 屬性。
</p>
</body>
</html>
[/demo]
如何使用 base 標(biāo)簽使頁面中的所有標(biāo)簽在新窗口中打開。
文檔描述
[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 屬性標(biāo)識了創(chuàng)作者和編輯軟件。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來描述文檔。
文檔關(guān)鍵詞
[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 屬性描述了該文檔和它的關(guān)鍵詞。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來定義文檔的關(guān)鍵詞。
重定向用戶
[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>
對不起。我們已經(jīng)搬家了。您的 URL 是 <a >http://www.w3school.com.cn</a>
</p>
<p>您將在 5 秒內(nèi)被重定向到新的地址。</p>
<p>如果超過 5 秒后您仍然看到本消息，請點(diǎn)擊上面的鏈接。</p>
</body>
</html>
[/demo]
如何把用戶重定向到新的網(wǎng)址。
HTML <head> 元素
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 標(biāo)簽定義文檔的標(biāo)題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素能夠：
定義瀏覽器工具欄中的標(biāo)題
提供頁面被添加到收藏夾時(shí)顯示的標(biāo)題
顯示在搜索引擎結(jié)果中的頁面標(biāo)題
一個(gè)簡化的 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> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）：
<head>
<base />
<base target="_blank" />
</head>
HTML <link> 元素
<link> 標(biāo)簽定義文檔與外部資源之間的關(guān)系。
<link> 標(biāo)簽最常用于連接樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素
<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內(nèi)規(guī)定 HTML 元素在瀏覽器中呈現(xiàn)的樣式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。
典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。
<meta> 標(biāo)簽始終位于 head 元素中。
元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
針對搜索引擎的關(guān)鍵詞
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
下面的 meta 元素定義頁面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定義頁面的關(guān)鍵詞：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 屬性的作用是描述頁面的內(nèi)容。
HTML <script> 元素
<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。
我們會在稍后的章節(jié)講解 script 元素。
HTML 頭部元素
標(biāo)簽 描述
<head> 定義關(guān)于文檔的信息。
<title> 定義文檔標(biāo)題。
<base> 定義頁面上所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。
<link> 定義文檔與外部資源之間的關(guān)系。
<meta> 定義關(guān)于 HTML 文檔的元數(shù)據(jù)。
<script> 定義客戶端腳本。
<style> 定義文檔的樣式信息。
管現(xiàn)代Web開發(fā)更加依賴于各種MVC框架，但是開發(fā)者仍然需要對HTML和DOM有基本的了解。然而，即使對有多年經(jīng)驗(yàn)的前端開發(fā)人員來說，也會遇到一些不知道的情況。
HTML<head>元素用作元數(shù)據(jù)（關(guān)于數(shù)據(jù)的數(shù)據(jù)）的容器。它用在<html>標(biāo)簽和<body>標(biāo)簽之間。
HTML文檔的頭部內(nèi)容在頁面加載時(shí)不會顯示在瀏覽器中。它僅包含有關(guān)HTML文檔的元數(shù)據(jù)。
元數(shù)據(jù)定義HTML文檔的標(biāo)題，字符集，樣式，鏈接，腳本和其他元信息。
HTML頭部可以包含很多元數(shù)據(jù)信息，也可以很少或沒有信息，這取決于我們的需求。但是頭部對HTML文檔至關(guān)重要。
<head>元素包含了所有的頭部標(biāo)簽元素。在<head>元素中你可以插入腳本（scripts）,樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽為:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。
HTML<title>元素用于定義文檔的標(biāo)題。它在所有HTML/XHTML文檔中使用。<title>元素必須放在<head>元素之間，并且一個(gè)文檔只能有一個(gè)title元素。
它定義了瀏覽器選項(xiàng)卡中的標(biāo)題。
當(dāng)用戶將頁面添加到收藏夾時(shí)，它為頁面提供標(biāo)題。
它在搜索引擎結(jié)果中顯示頁面的標(biāo)題。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</title>
</head>
<body>文檔內(nèi)容......</body>
</html>12345678復(fù)制代碼類型：[html]HTML<base>元素
<base>標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:
<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123復(fù)制代碼類型：[html]HTML<link>元素
HTML<link>元素用于將外部樣式表鏈接到您的網(wǎng)頁。<link>元素包含兩個(gè)主要屬性，即“rel”和“href”。rel屬性表示它是一個(gè)樣式表，href給出該外部文件的路徑。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123復(fù)制代碼類型：[html]HTML<style>元素
HTML<style>元素用于為HTML頁面設(shè)置樣式。<style>元素只影響當(dāng)前頁面HTML頁面的CSS屬性。如果要對多個(gè)頁面應(yīng)用CSS，則應(yīng)使用單獨(dú)的CSS文件。
<head>
<style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123復(fù)制代碼類型：[html]HTML<meta>元素
HTML<meta>元素用于指定網(wǎng)頁上的字符集，頁面描述，關(guān)鍵字，作者和其他元數(shù)據(jù)。
搜索引擎和其他Web服務(wù)使用元數(shù)據(jù)來更好地對網(wǎng)頁進(jìn)行排名。
<meta>標(biāo)簽提供的元數(shù)據(jù)不顯示在頁面上，但會被瀏覽器解析。
<meta>一般放置于<head>區(qū)域。
<meta>標(biāo)簽定義字符集：
<meta charset="UTF-8"> 1復(fù)制代碼類型：[html]charset屬性指定字符編碼。在此示例中，我們將其設(shè)置為“UTF-8”，這意味著它可以顯示任何語言。
<meta>標(biāo)簽定義搜索引擎關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1復(fù)制代碼類型：[html]<meta>標(biāo)簽定義網(wǎng)頁描述內(nèi)容:
<meta name="description" content="免費(fèi) Web & 編程 教程">1復(fù)制代碼類型：[html]<meta>標(biāo)簽定義網(wǎng)頁作者:
<meta name="author" content="Runoon">1復(fù)制代碼類型：[html]<meta>標(biāo)簽定義每30秒鐘刷新頁面:
<meta http-equiv="refresh" content="30">1復(fù)制代碼類型：[html]元刷新用于向?yàn)g覽器提供指令，以在給定的時(shí)間間隔后自動刷新頁面。如上例所示，它將在30秒后自動刷新。
<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1復(fù)制代碼類型：[html]如果添加了URL，則在指定時(shí)間結(jié)束后重定向到該頁面。
<meta>標(biāo)簽定義設(shè)備尺寸
HTML5中引入了此方法，以通過使用<meta>標(biāo)簽來控制視窗大小。視窗是用戶在網(wǎng)頁上的可見區(qū)域。它隨設(shè)備的不同而變化，在手機(jī)上的顯示尺寸明顯小于計(jì)算機(jī)屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1復(fù)制代碼類型：[html]<meta>視窗元素如何設(shè)定和控制頁面的尺寸和縮放比例。
width=device-width是用來設(shè)置頁面的寬度將與設(shè)備的屏幕寬度保持一致。
當(dāng)最初由瀏覽器加載頁面時(shí)，initial-scale=1.0用于設(shè)置初始縮放級別。
HTML<script>元素
<script>標(biāo)簽用于加載腳本文件，如：JavaScript。
<script>元素在以后的章節(jié)中會詳細(xì)描述。
HTMLhead元素
標(biāo)簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標(biāo)題 |
<base> | 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 |
<link> | 定義了一個(gè)文檔和外部資源之間的關(guān)系 |
<meta> | 定義了HTML文檔中的元數(shù)據(jù) |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
「鏈接」
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
