Bootstrap響應(yīng)式Web開(kāi)發(fā)（第2版）-課件 第6-8章 Bootstrap表單、Bootstrap常用組件、項(xiàng)目實(shí)戰(zhàn)-基于Bootstrap的在線學(xué)習(xí)平臺(tái)

第6章Bootstrap表單《Bootstrap響應(yīng)式Web開(kāi)發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握表單控件樣式的使用方法，能夠靈活設(shè)置文本框、下拉列表、單選按鈕、復(fù)選框和輸入組的樣式掌握表單布局方式的使用方法，能夠?qū)崿F(xiàn)行內(nèi)表單布局、水平表單布局

和響應(yīng)式表單布局效果

掌握表單驗(yàn)證的使用方法，能夠?qū)Ρ韱沃械臄?shù)據(jù)進(jìn)行驗(yàn)證章節(jié)概述/Summary在Web開(kāi)發(fā)中，表單是網(wǎng)頁(yè)常見(jiàn)的組成部分，可以實(shí)現(xiàn)用戶(hù)注冊(cè)、登錄、留言等功能。Bootstrap提供了一系列的類(lèi)來(lái)應(yīng)用表單控件的樣式、布局和驗(yàn)證。本章將詳細(xì)講解如何使用Bootstrap來(lái)創(chuàng)建和定制表單，以及如何應(yīng)用表單控件樣式、布局和驗(yàn)證來(lái)滿(mǎn)足實(shí)際需求。目錄/Contents6.16.26.3表單控件樣式表單布局方式表單驗(yàn)證表單控件樣式6.1

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置文本框的樣式6.1.1文本框6.1.1文本框文本框通常指<input>標(biāo)簽和<textarea>標(biāo)簽。<input>標(biāo)簽用于創(chuàng)建單行文本框，用戶(hù)可以在其中輸入單行文本內(nèi)容，其type屬性值可以是text、password、number、email、tel和file等；<textarea>標(biāo)簽用于創(chuàng)建多行文本框，用戶(hù)可以在其中輸入多行文本內(nèi)容。6.1.1文本框Bootstrap提供了應(yīng)用于文本框的相關(guān)類(lèi)，具體解釋如下：.form-control類(lèi)：用于創(chuàng)建基本文本框樣式，設(shè)置默認(rèn)的邊框、填充和字體樣式。.form-control-lg類(lèi)：用于創(chuàng)建較大尺寸的文本框，增加文本框的高度和字號(hào)。.form-control-sm類(lèi)：用于創(chuàng)建較小尺寸的文本框，減小文本框的高度和字號(hào)。.form-text類(lèi)：用于文本框下方的輔助文本，如提供額外的說(shuō)明或提示。.form-label類(lèi)：用于<label>標(biāo)簽，可以與相關(guān)的文本框關(guān)聯(lián)，以改善可訪問(wèn)性和用戶(hù)體驗(yàn)。.form-control-plaintext類(lèi)：用于創(chuàng)建只讀文本框，適用于顯示只讀或不可編輯的文本且沒(méi)有邊框樣式。下面通過(guò)案例的形式講解如何使用文本框控件結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)項(xiàng)目進(jìn)度表單。6.1.1文本框創(chuàng)建D:\Bootstrap\chapter06目錄，并使用VSCode編輯器打開(kāi)該目錄。放入bootstrap-5.3.0-dist文件夾。創(chuàng)建textInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟2步驟3步驟4使用文本框控件結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)一個(gè)項(xiàng)目進(jìn)度表單6.1.1文本框編寫(xiě)頁(yè)面邏輯，使用JavaScript獲取滑動(dòng)條文本框的數(shù)值，在頁(yè)面加載時(shí)顯示初始值，拖動(dòng)滑動(dòng)條時(shí)實(shí)時(shí)顯示數(shù)值。步驟5在瀏覽器中打開(kāi)textInput.html文件，項(xiàng)目進(jìn)度表單效果如下圖所示。6.1.1文本框圖中可以看出，單行文本框和多行文本框都添加了一個(gè)帶有圓角的淺色邊框，且文本框的文字顏色較淺。

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置下拉列表的樣式6.1.2下拉列表下拉列表可以使用<select>和<option>標(biāo)簽創(chuàng)建。<select>標(biāo)簽定義了下拉列表的整體結(jié)構(gòu)，而<option>標(biāo)簽定義了下拉列表中的選項(xiàng)。用戶(hù)可以從預(yù)定義的選項(xiàng)中選擇一個(gè)或多個(gè)值。6.1.2下拉列表Bootstrap提供了應(yīng)用于下拉列表的相關(guān)類(lèi)，具體解釋如下：.form-select類(lèi)：用于為下拉列表設(shè)置基本樣式，將下拉列表呈現(xiàn)為可單擊的選擇框。.form-select-lg類(lèi)：用于創(chuàng)建較大尺寸的下拉列表，增加選擇框的高度和字號(hào)。.form-select-sm類(lèi)：用于創(chuàng)建較小尺寸的下拉列表，減小選擇框的高度和字號(hào)。默認(rèn)尺寸較大尺寸較小尺寸6.1.2下拉列表下面通過(guò)案例的形式講解如何使用下拉列表控件結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)一個(gè)選擇支付方式的下拉列表。6.1.2下拉列表使用下拉列表結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)選擇支付方式的下拉列表創(chuàng)建radioSelect.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟26.1.2下拉列表在瀏覽器中打開(kāi)radioSelect.html文件，選擇支付方式的下拉列表效果如下圖所示。默認(rèn)選中的選項(xiàng)是“微信支付”。6.1.2下拉列表單擊下拉列表，即可顯示展開(kāi)后的列表選項(xiàng)，列表選項(xiàng)效果如下圖所示。6.1.2下拉列表

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置單選按鈕和復(fù)選框的樣式6.1.3單選按鈕和復(fù)選框單選按鈕和復(fù)選框提供預(yù)定義的選項(xiàng)供用戶(hù)選擇，用戶(hù)只能從給定的選項(xiàng)中進(jìn)行選擇，不能自由輸入文本。單選按鈕通常以圓形按鈕的形式呈現(xiàn)，適用于只允許選擇一個(gè)選項(xiàng)的情況。復(fù)選框通常以方形框的形式呈現(xiàn)，適用于允許選擇多個(gè)選項(xiàng)的情況。6.1.3單選按鈕和復(fù)選框Bootstrap提供了應(yīng)用于單選按鈕和復(fù)選框的相關(guān)類(lèi)，具體解釋如下。.form-check類(lèi)：用于為一組單選按鈕或復(fù)選框設(shè)置樣式。可將這個(gè)類(lèi)應(yīng)用于包裹單選按鈕或復(fù)選框的容器元素（例如<div>），為整個(gè)組設(shè)置樣式，使其呈現(xiàn)為可單擊的選項(xiàng)。.form-check-inline類(lèi)：與form-check類(lèi)的功能相同，將一組單選按鈕或復(fù)選框元素水平排列，使它們?cè)谕恍酗@示。.form-check-input類(lèi)：用于單選按鈕或復(fù)選框的<input>標(biāo)簽上，定義單選按鈕或復(fù)選框的樣式。.form-check-label類(lèi)：用于與單選按鈕或復(fù)選框關(guān)聯(lián)的<label>標(biāo)簽上，確保標(biāo)簽與單選按鈕或復(fù)選框一起呈現(xiàn)，保持一致的樣式。6.1.3單選按鈕和復(fù)選框下面通過(guò)案例的形式講解如何使用單選按鈕和復(fù)選框結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)問(wèn)卷調(diào)查表單。6.1.3單選按鈕和復(fù)選框使用單選按鈕和復(fù)選框結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)一個(gè)問(wèn)卷調(diào)查表單創(chuàng)建radioInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟26.1.3單選按鈕和復(fù)選框在瀏覽器中打開(kāi)radioInput.html文件，問(wèn)卷調(diào)查表單效果如下圖所示。圖中可以看出，性別的選項(xiàng)使用了單選按鈕，愛(ài)好的選項(xiàng)使用了復(fù)選框，且性別和愛(ài)好的選項(xiàng)都呈水平排列，并添加了合適的樣式。6.1.3單選按鈕和復(fù)選框

先定一個(gè)小目標(biāo)！掌握表單控件樣式的使用方法，能夠靈活設(shè)置輸入組的樣式6.1.4輸入組輸入組用于對(duì)文本框進(jìn)行擴(kuò)展，通常由一個(gè)文本框和一個(gè)或多個(gè)附加元素組成，附加元素可以是文本、圖標(biāo)、按鈕、下拉菜單和復(fù)選框等，它們都是表單控件的一部分，用于增強(qiáng)用戶(hù)輸入的交互性和功能性。6.1.4輸入組Bootstrap提供了應(yīng)用于輸入組的相關(guān)類(lèi)，具體解釋如下：.input-group類(lèi)：應(yīng)用于包含輸入組元素的父容器，創(chuàng)建一個(gè)輸入組，可以將多個(gè)表單控件組合在一起，形成一個(gè)整體，為輸入組提供基本的樣式。.input-group-lg類(lèi)：用于創(chuàng)建較大尺寸的輸入組，增加輸入組容器的大小和字號(hào)。.input-group-sm類(lèi)：用于創(chuàng)建較小尺寸輸入組，減小輸入組容器的大小和字號(hào)。.input-group-text類(lèi)：用于輸入組內(nèi)的附加文本或附加元素上，為附加文本或附加元素提供樣式，并確保它們與文本框?qū)R，與輸入組的整體樣式保持一致。6.1.4輸入組下面演示如何創(chuàng)建一個(gè)輸入組，示例代碼如下。6.1.4輸入組<divclass="input-group"><inputtype="text"class="form-control"placeholder="商品價(jià)格"><spanclass="input-group-text">￥</span></div>下面通過(guò)案例的形式講解如何使用輸入組結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)商品搜索表單，表單包括商品名稱(chēng)、搜索按鈕和商品價(jià)格范圍。6.1.4輸入組6.1.4輸入組使用輸入組結(jié)合相關(guān)類(lèi)實(shí)現(xiàn)一個(gè)商品搜索表單復(fù)制本章配套源代碼中的bootstrap-icons-1.10.5文件夾并放入chapter06目錄下，該文件夾保存了圖標(biāo)相關(guān)文件。創(chuàng)建groupInput.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap-icons.min.css文件。步驟1步驟2步驟3編寫(xiě)頁(yè)面結(jié)構(gòu)，創(chuàng)建一個(gè)包含商品名稱(chēng)輸入組和商品價(jià)格輸入組的表單。在瀏覽器中打開(kāi)groupInput.html文件，商品搜索表單效果如下圖所示。6.1.4輸入組圖中可以看出，第一個(gè)輸入組包含1個(gè)單行文本框和1個(gè)搜索按鈕；第二個(gè)輸入組包含2個(gè)單行文本框和3個(gè)附加文本，且附加文本都添加了一個(gè)特定的背景色。表單布局方式6.2

先定一個(gè)小目標(biāo)！掌握表單布局的使用方法，能夠?qū)崿F(xiàn)行內(nèi)表單布局效果6.2.1行內(nèi)表單布局行內(nèi)表單布局是一種將表單控件在同一行內(nèi)水平排列的布局方式，適用于表單內(nèi)容較少、緊湊的情況。在Bootstrap中，可以使用柵格系統(tǒng)的.row類(lèi)和.col-auto類(lèi)實(shí)現(xiàn)行內(nèi)表單布局。6.2.1行內(nèi)表單布局首先，使用<div>標(biāo)簽創(chuàng)建一個(gè)行容器，并添加.row類(lèi)；然后，在行容器內(nèi)添加一個(gè)<div>標(biāo)簽用于包裹表單控件，并添加.col-auto類(lèi)。這樣可以使表單控件在同一行內(nèi)水平排列，并根據(jù)內(nèi)容自動(dòng)調(diào)整寬度，示例代碼如下。<formaction=""><divclass="row"><divclass="col-auto"><!--表單控件1--></div><divclass="col-auto"><!--表單控件2--></div></div></form>6.2.1行內(nèi)表單布局6.2.1行內(nèi)表單布局下面通過(guò)案例的形式講解如何使用行內(nèi)表單布局實(shí)現(xiàn)員工篩選表單，該表單的內(nèi)容包括員工姓名、部門(mén)、崗位和入職日期范圍。創(chuàng)建inlineForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟2使用行內(nèi)表單布局實(shí)現(xiàn)一個(gè)員工篩選表單6.2.1行內(nèi)表單布局在瀏覽器中打開(kāi)inlineForm.html文件，員工篩選表單效果如下圖所示。6.2.1行內(nèi)表單布局6.2.2水平表單布局

先定一個(gè)小目標(biāo)！掌握表單表單布局的使用方法，能夠?qū)崿F(xiàn)水平表單布局效果水平表單布局將表單控件（如<label>標(biāo)簽）和輸入控件（如<input>標(biāo)簽、<select>標(biāo)簽、<textarea>標(biāo)簽等）放置在同一行內(nèi)，每個(gè)表單組單獨(dú)占一行，這樣就可避免一行顯示太多的內(nèi)容。6.2.2水平表單布局通過(guò)柵格系統(tǒng)的.row類(lèi)和.col-{sm|md|lg|xl|xxl}-{value}類(lèi)可以創(chuàng)建水平表單布局。6.2.2水平表單布局為<label>標(biāo)簽添加.col-form-label類(lèi)，可以使表單標(biāo)簽與其關(guān)聯(lián)的表單控件在同一行內(nèi)水平排列，并且垂直對(duì)齊。如果需要調(diào)整標(biāo)簽的尺寸，可以使用.col-form-label-sm類(lèi)設(shè)置小尺寸樣式，使用.col-form-label-lg類(lèi)設(shè)置大尺寸樣式。<form><divclass="row"><labelclass="col-form-labelcol-sm-3">Label1</label><divclass="col-sm-9"><inputtype="text"class="form-control"></div></div><divclass="row"><labelclass="col-form-labelcol-sm-3">Label2</label><divclass="col-sm-9"><inputtype="text"class="form-control"></div></div></form>6.2.2水平表單布局下面演示如何創(chuàng)建一個(gè)在小型及以上設(shè)備（視口寬度≥576px）中呈水平布局的表單。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)登錄表單，該表單在小型及以上設(shè)備（視口寬度≥576px）中呈水平布局。6.2.2水平表單布局創(chuàng)建horizontalForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟2登錄表單在小型及以上設(shè)備中呈水平布局6.2.2水平表單布局在瀏覽器中打開(kāi)horizontalForm.html文件，登錄表單效果如下圖所示。6.2.2水平表單布局6.2.3響應(yīng)式表單布局

先定一個(gè)小目標(biāo)！掌握表單布局的使用方法，能夠?qū)崿F(xiàn)響應(yīng)式表單布局效果6.2.3響應(yīng)式表單布局在Bootstrap中可以將柵格系統(tǒng)和其他相關(guān)類(lèi)結(jié)合使用，以實(shí)現(xiàn)響應(yīng)式表單布局。以下是對(duì)響應(yīng)式表單布局相關(guān)類(lèi)的具體解釋。.row-cols-{sm|md|lg|xl|xxl}-auto類(lèi)：用于根據(jù)不同視口寬度響應(yīng)式地調(diào)整列的寬度。例如.row-cols-sm-auto類(lèi)將使表單控件在小型及以上設(shè)備（視口寬度≥576px）中自動(dòng)調(diào)整列寬，而在超小型設(shè)備（視口寬度<576px）中垂直堆疊。.g-{sm|md|lg|xl|xxl}-{value}類(lèi)：用于設(shè)置垂直方向的間距。其中，value表示間距的數(shù)值，取值為0~5，分別表示的間距為0、0.25rem、0.5rem、1rem、1.5rem和3rem。.align-items-center類(lèi)：用于將表單的控件在垂直方向上居中對(duì)齊，該類(lèi)應(yīng)用于包含表單控件的容器元素。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)產(chǎn)品篩選的響應(yīng)式表單。在中型及以上設(shè)備（視口寬度≥768px）中自動(dòng)調(diào)整表單控件的寬度，而在中型以下設(shè)備（視口寬度<768px）中垂直堆疊表單控件。6.2.3響應(yīng)式表單布局創(chuàng)建responseForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)頁(yè)面結(jié)構(gòu)。步驟1步驟2實(shí)現(xiàn)一個(gè)產(chǎn)品篩選的響應(yīng)式表單6.2.3響應(yīng)式表單布局在瀏覽器中打開(kāi)responseForm.html文件，產(chǎn)品篩選表單在中型及以上設(shè)備（視口寬度≥768px）中的頁(yè)面效果如下圖所示。6.2.3響應(yīng)式表單布局圖中可以看出，表單控件呈水平排列顯示。產(chǎn)品篩選表單在中型及以下設(shè)備（視口寬度＜768px）中的頁(yè)面效果如下圖所示。6.2.3響應(yīng)式表單布局圖中可以看出，表單控件呈垂直堆疊顯示。表單驗(yàn)證6.3

先定一個(gè)小目標(biāo)！掌握表單驗(yàn)證的使用方法，能夠?qū)Ρ韱沃械臄?shù)據(jù)進(jìn)行驗(yàn)證6.3表單驗(yàn)證6.3表單驗(yàn)證在瀏覽器向服務(wù)器提交表單數(shù)據(jù)時(shí)，為了確保表單數(shù)據(jù)的正確性，需要對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。在表單驗(yàn)證過(guò)程中，前端（客戶(hù)端）和后端（服務(wù)器）需要共同發(fā)揮作用。在這里僅對(duì)前端表單驗(yàn)證進(jìn)行講解。6.3表單驗(yàn)證前端表單驗(yàn)證階段：可以使用JavaScript等技術(shù)對(duì)用戶(hù)輸入的數(shù)據(jù)進(jìn)行實(shí)時(shí)驗(yàn)證，以確保其符合特定規(guī)則或格式要求。例如，驗(yàn)證電子郵件地址的格式、檢查密碼的長(zhǎng)度和包含特殊字符等。如果用戶(hù)的輸入不能通過(guò)前端驗(yàn)證，可以通過(guò)顯示錯(cuò)誤消息或高亮無(wú)效字段的方式提醒用戶(hù)重新輸入數(shù)據(jù)。常見(jiàn)的驗(yàn)證樣式類(lèi)如下表所示。類(lèi)描述.needs-validation用于表單的父元素或包含表單控件的父元素，觸發(fā)表單驗(yàn)證.valid-feedback用于為通過(guò)驗(yàn)證的表單控件提供附加的反饋信息或圖標(biāo)，通常與.is-valid類(lèi)一起使用.invalid-feedback用于為未通過(guò)驗(yàn)證的表單控件提供附加的反饋信息或圖標(biāo)，通常與.is-invalid類(lèi)一起使用.is-valid用于表單控件，用于標(biāo)識(shí)輸入為有效狀態(tài)，觸發(fā)正確狀態(tài)樣式.is-invalid用于表單控件，用于標(biāo)識(shí)輸入為無(wú)效狀態(tài)，觸發(fā)錯(cuò)誤狀態(tài)樣式.was-validated用于整個(gè)表單，在驗(yàn)證后將驗(yàn)證狀態(tài)應(yīng)用于表單，并將無(wú)效表單的字段顯示為紅色6.3表單驗(yàn)證Bootstrap提供了內(nèi)置的驗(yàn)證樣式類(lèi)，用于顯示表單控件的正確狀態(tài)或錯(cuò)誤狀態(tài)，通過(guò)驗(yàn)證樣式的變化，用戶(hù)可以清楚地知道哪些輸入是有效的，哪些輸入存在錯(cuò)誤。6.3表單驗(yàn)證注意：為了使表單驗(yàn)證正常工作，需要確保在提交表單時(shí)取消瀏覽器的默認(rèn)驗(yàn)證行為，可以通過(guò)在<form>標(biāo)簽上添加novalidate屬性以禁用瀏覽器的默認(rèn)驗(yàn)證行為。此外，在提交表單時(shí)，默認(rèn)的表單提交行為會(huì)被執(zhí)行。如果開(kāi)發(fā)者希望在表單提交之前處理表單數(shù)據(jù)或執(zhí)行其他操作，可以通過(guò)調(diào)用事件對(duì)象的preventDefault()方法阻止瀏覽器按照默認(rèn)方式處理表單提交。6.3表單驗(yàn)證考慮到在一些情況下，可能會(huì)有嵌套的元素或事件捕獲的情況，可以通過(guò)調(diào)用事件對(duì)象的stopPropagation()方法阻止事件冒泡，確保僅在當(dāng)前的元素上阻止默認(rèn)行為。下面演示如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的用戶(hù)名文本框驗(yàn)證效果。這個(gè)示例只關(guān)注樣式的改變，不考慮具體的校驗(yàn)規(guī)則。當(dāng)用戶(hù)輸入的用戶(hù)名為空時(shí)，會(huì)阻止表單提交，并顯示提示信息“請(qǐng)輸入用戶(hù)名”。當(dāng)輸入用戶(hù)名后，會(huì)顯示提示信息“輸入正確”，示例代碼如下。6.3表單驗(yàn)證<formclass="needs-validationtext-center"novalidate><divclass="input-groupmy-3"><labelclass="input-group-text"for="username">用戶(hù)名：</label><inputtype="text"class="form-control"id="username"required><divclass="invalid-feedbacktext-center">請(qǐng)輸入用戶(hù)名</div><divclass="valid-feedbacktext-center">輸入正確</div></div><buttontype="submit"class="text-whitebg-primaryborder-0rounded-1px-5py-2">注冊(cè)</button></form>6.3表單驗(yàn)證>>接上頁(yè)代碼<script>varform=document.querySelector('.needs-validation');form.addEventListener('submit',function(event){if(!form.checkValidity()){event.preventDefault();event.stopPropagation();}form.classList.add('was-validated');});</script>上述示例代碼運(yùn)行后，當(dāng)用戶(hù)輸入的用戶(hù)名為空時(shí)，驗(yàn)證未通過(guò)的提示信息如下圖所示。6.3表單驗(yàn)證當(dāng)用戶(hù)輸入了用戶(hù)名后，驗(yàn)證通過(guò)的提示信息如下圖所示。6.3表單驗(yàn)證下面通過(guò)案例的形式講解如何實(shí)現(xiàn)用戶(hù)注冊(cè)表單，并為表單添加校驗(yàn)規(guī)則，以貼近實(shí)際開(kāi)發(fā)的情況。通過(guò)JavaScript監(jiān)聽(tīng)用戶(hù)的輸入，并實(shí)時(shí)檢查輸入的信息是否符合預(yù)設(shè)的格式要求。在用戶(hù)輸入數(shù)據(jù)的過(guò)程中，根據(jù)校驗(yàn)結(jié)果通過(guò)JavaScript向用戶(hù)提供實(shí)時(shí)的反饋和提示信息。在提交表單之前，需要對(duì)整個(gè)表單進(jìn)行驗(yàn)證，確保所有的驗(yàn)證規(guī)則都通過(guò)才能進(jìn)行表單提交。6.3表單驗(yàn)證創(chuàng)建validationForm.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.min.js文件。編寫(xiě)頁(yè)面結(jié)構(gòu)，創(chuàng)建一個(gè)包含用戶(hù)名、密碼、確認(rèn)密碼和“注冊(cè)”按鈕的表單。步驟1步驟2實(shí)現(xiàn)一個(gè)產(chǎn)品篩選的響應(yīng)式表單6.3表單驗(yàn)證編寫(xiě)頁(yè)面邏輯，獲取表單字段并監(jiān)聽(tīng)用戶(hù)輸入事件。步驟3編寫(xiě)用戶(hù)名驗(yàn)證函數(shù)。步驟4編寫(xiě)密碼和確認(rèn)密碼的驗(yàn)證函數(shù)。步驟5編寫(xiě)表單提交事件的邏輯代碼。步驟6在瀏覽器中打開(kāi)validationForm.html文件，注冊(cè)表單初始頁(yè)面效果如下圖所示。6.3表單驗(yàn)證用戶(hù)輸入無(wú)效的用戶(hù)名、密碼和確認(rèn)密碼后，注冊(cè)表單未驗(yàn)證通過(guò)的提示信息如下圖所示。6.3表單驗(yàn)證用戶(hù)輸入有效的用戶(hù)名、密碼和確認(rèn)密碼后，注冊(cè)表單驗(yàn)證通過(guò)的提示信息如下圖所示。6.3表單驗(yàn)證本章小結(jié)本章詳細(xì)講解了Bootstrap表單的相關(guān)內(nèi)容。首先講解了表單控件樣式的使用方法，包括文本框、下拉列表、單選按鈕、復(fù)選框和輸入組等；其次講解了不同的表單布局方式，包括行內(nèi)表單布局、水平表單布局和響應(yīng)式表單布局；最后講解了表單驗(yàn)證，包括驗(yàn)證樣式類(lèi)的用法。通過(guò)對(duì)本章的學(xué)習(xí)，讀者能夠掌握表單設(shè)計(jì)和交互的技巧，提升用戶(hù)體驗(yàn)和提高數(shù)據(jù)的準(zhǔn)確性。本章小結(jié)第7章Bootstrap常用組件《Bootstrap響應(yīng)式Web開(kāi)發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解組件的概念，能夠說(shuō)出Bootstrap組件的優(yōu)勢(shì)掌握Bootstrap組件的基本使用方法，能夠通過(guò)查閱官方文檔的方式

學(xué)習(xí)Bootstrap組件

掌握按鈕組件的使用方法，能夠創(chuàng)建基礎(chǔ)樣式按鈕、輪廓樣式按鈕、

尺寸樣式按鈕、狀態(tài)樣式按鈕和組合樣式按鈕

掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航、標(biāo)簽式導(dǎo)航、膠囊式

導(dǎo)航和面包屑導(dǎo)航

掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航欄和帶有折疊按鈕的

導(dǎo)航欄學(xué)習(xí)目標(biāo)/Target

掌握下拉菜單組件的使用方法，能夠創(chuàng)建下拉菜單按鈕和下拉菜單

導(dǎo)航欄掌握卡片組件的使用方法，能夠創(chuàng)建基礎(chǔ)卡片、圖文卡片和背景圖卡片

掌握輪播組件的使用方法，能夠創(chuàng)建基礎(chǔ)輪播圖

掌握提示組件的使用方法，能夠創(chuàng)建工具提示框、彈出提示框和警告框

掌握模態(tài)框組件的使用方法，能夠創(chuàng)建模態(tài)框章節(jié)概述/Summary在前端開(kāi)發(fā)中，開(kāi)發(fā)者經(jīng)常會(huì)遇到編寫(xiě)相似或重復(fù)的代碼的情況，同時(shí)需要確保整體外觀和樣式的一致性。現(xiàn)在移動(dòng)設(shè)備的使用越來(lái)越廣泛，響應(yīng)式設(shè)計(jì)變得越來(lái)越重要。然而，構(gòu)建適應(yīng)不同屏幕尺寸和設(shè)備的頁(yè)面可能會(huì)很復(fù)雜且耗時(shí)。為了解決這些問(wèn)題，我們可以使用Bootstrap組件。開(kāi)發(fā)者可以借助Bootstrap組件快速構(gòu)建具有統(tǒng)一樣式和響應(yīng)式設(shè)計(jì)的項(xiàng)目，從而減少開(kāi)發(fā)時(shí)間和工作量，為用戶(hù)提供更好的體驗(yàn)。本章將對(duì)Bootstrap常用組件的使用方法進(jìn)行講解。目錄/Contents7.17.27.3初識(shí)組件按鈕組件導(dǎo)航組件7.4導(dǎo)航欄組件7.5下拉菜單組件目錄/Contents7.67.77.8卡片組件輪播組件提示組件7.9模態(tài)框組件初識(shí)組件7.1

先定一個(gè)小目標(biāo)！了解組件的概念，能夠說(shuō)出Bootstrap組件的優(yōu)勢(shì)7.1.1組件概述組件是獨(dú)立的代碼塊，具有特定的功能和樣式，并且可以在頁(yè)面中獨(dú)立使用和重復(fù)使用。組件類(lèi)似我們生活中的汽車(chē)發(fā)動(dòng)機(jī)，不同型號(hào)的汽車(chē)可以使用同一款發(fā)動(dòng)機(jī)，這樣就不需要為每一臺(tái)汽車(chē)生產(chǎn)一款發(fā)動(dòng)機(jī)。7.1.1組件概述Bootstrap為開(kāi)發(fā)人員提供了許多可重用的組件，包括按鈕組件、導(dǎo)航組件、導(dǎo)航欄組件、下拉菜單組件、卡片組件、輪播組件、提示組件和模態(tài)框組件等。7.1.1組件概述我們可以通過(guò)簡(jiǎn)單地添加相應(yīng)的HTML標(biāo)簽和Bootstrap的CSS類(lèi)來(lái)使用組件，而無(wú)須自己編寫(xiě)復(fù)雜的樣式和腳本。這些組件可以大大加快開(kāi)發(fā)速度，并且通過(guò)組合和定制組件，可以快速構(gòu)建網(wǎng)站和應(yīng)用程序。Bootstrap中組件的優(yōu)勢(shì)如下。7.1.1組件概述易于使用。開(kāi)發(fā)者只需要在HTML中添加相應(yīng)的標(biāo)簽和CSS類(lèi)，即可快速插入并使用組件。同時(shí)，Bootstrap還提供詳細(xì)的文檔和示例，以幫助開(kāi)發(fā)者理解和使用組件。響應(yīng)式設(shè)計(jì)。Bootstrap的組件都支持響應(yīng)式設(shè)計(jì)，可以自動(dòng)適應(yīng)各種屏幕尺寸和設(shè)備。用戶(hù)在PC設(shè)備和移動(dòng)設(shè)備中訪問(wèn)網(wǎng)頁(yè)時(shí)，能夠獲得良好的用戶(hù)體驗(yàn)?？啥ㄖ苹?。Bootstrap的組件提供了多種樣式和組合方式，開(kāi)發(fā)者可以根據(jù)需求進(jìn)行調(diào)整和自定義。

先定一個(gè)小目標(biāo)！掌握Bootstrap組件的基本使用方法，能夠通過(guò)查閱官方文檔的方式學(xué)習(xí)Bootstrap組件7.1.2Bootstrap組件的基本使用方法Bootstrap的官方網(wǎng)站提供了示例代碼，用于展示組件的實(shí)際應(yīng)用，這些示例代碼可以幫助開(kāi)發(fā)者了解如何使用Bootstrap的CSS類(lèi)和樣式。此外，Bootstrap官方網(wǎng)站還提供了詳細(xì)的開(kāi)發(fā)文檔，以幫助開(kāi)發(fā)者更好地理解和應(yīng)用組件。7.1.2Bootstrap組件的基本使用方法通過(guò)查閱官方文檔的方式學(xué)習(xí)Bootstrap組件的基本流程如下。在Bootstrap官方網(wǎng)站中找到所需組件的示例代碼。將示例代碼復(fù)制到項(xiàng)目的HTML文件中的適當(dāng)位置。根據(jù)實(shí)際需求和設(shè)計(jì)要求，調(diào)整和修改代碼。在瀏覽器中打開(kāi)HTML文件，查看組件的效果，如果效果與實(shí)際需求有差異，可以根據(jù)需要進(jìn)一步調(diào)整和修改代碼，以達(dá)到期望的效果。7.1.2Bootstrap組件的基本使用方法下面通過(guò)案例的形式講解如何通過(guò)查閱官方文檔的方式實(shí)現(xiàn)按鈕效果。7.1.2Bootstrap組件的基本使用方法創(chuàng)建D:\Bootstrap\chapter07目錄，并使用VSCode編輯器打開(kāi)該目錄。放入bootstrap-5.3.0-dist文件夾。創(chuàng)建example.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。在Bootstrap官方網(wǎng)站中找到按鈕組件的示例代碼。步驟1步驟2步驟3步驟4通過(guò)查閱官方文檔的方式實(shí)現(xiàn)按鈕效果單擊“Docs”鏈接，跳轉(zhuǎn)到Bootstrap官方文檔頁(yè)面。步驟57.1.2Bootstrap組件的基本使用方法單擊“Buttons”鏈接，進(jìn)入Buttons組件頁(yè)面，復(fù)制紅框內(nèi)的代碼。步驟6將復(fù)制的代碼，粘貼到example.html文件的<body>標(biāo)簽內(nèi)。步驟7在瀏覽器中打開(kāi)example.html文件，按鈕效果如下圖所示。7.1.2Bootstrap組件的基本使用方法按鈕組件7.2

先定一個(gè)小目標(biāo)！掌握按鈕組件的使用方法，能夠創(chuàng)建基礎(chǔ)樣式按鈕7.1.1基礎(chǔ)樣式按鈕7.1.1基礎(chǔ)樣式按鈕Bootstrap為按鈕組件提供了一系列基礎(chǔ)樣式類(lèi)，可以創(chuàng)建簡(jiǎn)單的、純色的按鈕。常用的基礎(chǔ)樣式類(lèi)如下表所示。類(lèi)描述.btn-primary主要按鈕，用于表示主要的操作.btn-secondary次要按鈕，用于表示次要的操作.btn-success成功按鈕，用于表示成功或積極的操作.btn-danger危險(xiǎn)按鈕，用于表示危險(xiǎn)或錯(cuò)誤的操作.btn-warning警告按鈕，用于表示警告或需要注意的操作.btn-info信息按鈕，用于表示重要提示或關(guān)鍵信息的操作.btn-light亮色按鈕.btn-dark暗色按鈕.btn-link鏈接按鈕，雖然形似鏈接，但是保留按鈕的行為下面通過(guò)案例的形式講解如何使用按鈕組件的基礎(chǔ)樣式類(lèi)實(shí)現(xiàn)基礎(chǔ)樣式按鈕效果。7.1.1基礎(chǔ)樣式按鈕實(shí)現(xiàn)基礎(chǔ)樣式按鈕創(chuàng)建button.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)基礎(chǔ)樣式按鈕的頁(yè)面結(jié)構(gòu)。步驟1步驟27.1.1基礎(chǔ)樣式按鈕在瀏覽器中打開(kāi)button.html文件，基礎(chǔ)樣式按鈕效果如下圖所示。7.1.1基礎(chǔ)樣式按鈕

先定一個(gè)小目標(biāo)！掌握按鈕組件的使用方法，能夠創(chuàng)建輪廓樣式按鈕7.1.2輪廓樣式按鈕使用輪廓樣式類(lèi)，可以創(chuàng)建帶有邊框和圓角的按鈕。在使用時(shí)只需將.btn-*類(lèi)替換為.btn-outline-*類(lèi)即可，其中*的可選值有primary、secondary、success、danger、warning、info、light、dark，例如.btn-outline-primary類(lèi)、.btn-outline-success類(lèi)等。7.1.2輪廓樣式按鈕下面通過(guò)案例的形式講解如何使用按鈕組件的輪廓樣式類(lèi)實(shí)現(xiàn)輪廓樣式按鈕效果。7.1.2輪廓樣式按鈕實(shí)現(xiàn)輪廓樣式按鈕創(chuàng)建buttonOutline.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)輪廓樣式按鈕的頁(yè)面結(jié)構(gòu)。步驟1步驟27.1.2輪廓樣式按鈕在瀏覽器中打開(kāi)buttonOutline.html文件，輪廓樣式按鈕效果如下圖所示。7.1.2輪廓樣式按鈕

先定一個(gè)小目標(biāo)！掌握按鈕組件的使用方法，能夠創(chuàng)建尺寸樣式按鈕7.1.3尺寸樣式按鈕7.1.3尺寸樣式按鈕Bootstrap提供了多種用于設(shè)置按鈕尺寸樣式的類(lèi)，這些類(lèi)用于創(chuàng)建不同大小的按鈕。常用的尺寸樣式類(lèi)如下表所示。類(lèi)描述.btn-lg用于設(shè)置大尺寸按鈕.btn-sm用于設(shè)置小尺寸按鈕下面通過(guò)案例的形式講解如何使用按鈕組件的尺寸樣式類(lèi)實(shí)現(xiàn)尺寸樣式按鈕效果。7.1.3尺寸樣式按鈕實(shí)現(xiàn)不同大小的按鈕創(chuàng)建buttonSize.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)不同按鈕尺寸的頁(yè)面結(jié)構(gòu)。步驟1步驟27.1.3尺寸樣式按鈕在瀏覽器中打開(kāi)buttonSize.html文件，尺寸樣式按鈕效果如下圖所示。7.1.3尺寸樣式按鈕

先定一個(gè)小目標(biāo)！掌握按鈕組件的使用方法，能夠創(chuàng)建狀態(tài)樣式按鈕7.1.4狀態(tài)樣式按鈕Bootstrap提供了一系列能夠快速設(shè)置按鈕狀態(tài)的類(lèi)，這些類(lèi)可以改變按鈕在不同狀態(tài)下的樣式，例如禁用狀態(tài)和激活狀態(tài)等。類(lèi)描述.active用于將按鈕樣式標(biāo)記為激活狀態(tài).disabled用于將按鈕樣式標(biāo)記為禁用狀態(tài)7.1.4狀態(tài)樣式按鈕常用的狀態(tài)樣式類(lèi)如下表所示。下面通過(guò)案例的形式講解如何使用按鈕組件的狀態(tài)樣式類(lèi)實(shí)現(xiàn)狀態(tài)樣式按鈕效果。7.1.4狀態(tài)樣式按鈕實(shí)現(xiàn)不同狀態(tài)下的按鈕創(chuàng)建buttonState.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)狀態(tài)樣式按鈕的頁(yè)面結(jié)構(gòu)。步驟1步驟27.1.4狀態(tài)樣式按鈕在瀏覽器中打開(kāi)buttonState.html文件，狀態(tài)樣式按鈕效果如下圖所示。7.1.4狀態(tài)樣式按鈕

先定一個(gè)小目標(biāo)！掌握按鈕組件的使用方法，能夠創(chuàng)建組合樣式按鈕7.1.5組合樣式按鈕Bootstrap中可以使用組合樣式類(lèi)將一組具有相同功能或類(lèi)別的按鈕進(jìn)行組合，形成按鈕組。通過(guò)將按鈕組合在一起，可以方便地管理和展示不同種類(lèi)的按鈕。按鈕組可以以水平或垂直的方式顯示一組按鈕。類(lèi)描述.btn-group用于設(shè)置按鈕組，包裹一組按鈕.btn-group-vertical用于設(shè)置垂直按鈕組.btn-toolbar用于設(shè)置工具欄按鈕組，包裹多個(gè)按鈕組.btn-group-lg用于設(shè)置大尺寸按鈕組.btn-group-sm用于設(shè)置小尺寸按鈕組7.1.5組合樣式按鈕常用的組合樣式類(lèi)如下表所示。下面通過(guò)案例的形式講解如何使用按鈕組件的組合樣式類(lèi)實(shí)現(xiàn)組合樣式按鈕組效果。7.1.5組合樣式按鈕實(shí)現(xiàn)不同的按鈕組創(chuàng)建buttonGroup.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)按鈕組的頁(yè)面結(jié)構(gòu)。步驟1步驟27.1.5組合樣式按鈕在瀏覽器中打開(kāi)buttonGroup.html文件，按鈕組效果如下圖所示。7.1.5組合樣式按鈕導(dǎo)航組件7.3

先定一個(gè)小目標(biāo)！掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航7.3.1基礎(chǔ)導(dǎo)航基礎(chǔ)導(dǎo)航是最簡(jiǎn)單的導(dǎo)航菜單形式，使用導(dǎo)航組件實(shí)現(xiàn)基礎(chǔ)導(dǎo)航的基本方法如下。7.3.1基礎(chǔ)導(dǎo)航（1）創(chuàng)建導(dǎo)航容器通常使用<ul>標(biāo)簽或<ol>標(biāo)簽定義導(dǎo)航容器，并添加.nav類(lèi)，以便應(yīng)用導(dǎo)航容器的樣式。在導(dǎo)航容器中，使用<li>標(biāo)簽定義導(dǎo)航項(xiàng)，并添加.nav-item類(lèi)，以便應(yīng)用導(dǎo)航項(xiàng)的樣式。（2）添加導(dǎo)航項(xiàng)在導(dǎo)航項(xiàng)中，使用<a>標(biāo)簽定義導(dǎo)航鏈接，并添加.nav-link類(lèi)，以便應(yīng)用導(dǎo)航鏈接的樣式。（3）添加導(dǎo)航鏈接默認(rèn)情況下，導(dǎo)航項(xiàng)在導(dǎo)航中水平左對(duì)齊。若想要設(shè)置導(dǎo)航項(xiàng)的其他對(duì)齊方式，可以在列表樣式標(biāo)簽上應(yīng)用以下類(lèi)。7.3.1基礎(chǔ)導(dǎo)航.justify-content-center類(lèi)：設(shè)置導(dǎo)航項(xiàng)水平居中對(duì)齊。.justify-content-end類(lèi)：設(shè)置導(dǎo)航項(xiàng)水平右對(duì)齊。.flex-column類(lèi)：設(shè)置導(dǎo)航項(xiàng)垂直排列。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)包含“添加”“修改”“刪除”“編輯”的基礎(chǔ)導(dǎo)航。7.3.1基礎(chǔ)導(dǎo)航創(chuàng)建nav.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。步驟1步驟2步驟3實(shí)現(xiàn)基礎(chǔ)導(dǎo)航在.nav類(lèi)后添加.flex-column類(lèi)，將導(dǎo)航項(xiàng)的排列方向改為垂直方向。7.3.1基礎(chǔ)導(dǎo)航編寫(xiě)基礎(chǔ)導(dǎo)航的頁(yè)面結(jié)構(gòu)。在瀏覽器中打開(kāi)nav.html文件，基礎(chǔ)導(dǎo)航效果和垂直導(dǎo)航效果如下圖所示。7.3.1基礎(chǔ)導(dǎo)航基礎(chǔ)導(dǎo)航效果垂直導(dǎo)航效果

先定一個(gè)小目標(biāo)！掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建標(biāo)簽式導(dǎo)航7.3.2標(biāo)簽式導(dǎo)航標(biāo)簽式導(dǎo)航是在基礎(chǔ)導(dǎo)航的基礎(chǔ)上實(shí)現(xiàn)的，通過(guò)為每個(gè)導(dǎo)航項(xiàng)添加標(biāo)簽頁(yè)，實(shí)現(xiàn)不同標(biāo)簽頁(yè)展示不同的內(nèi)容的效果。使用標(biāo)簽式導(dǎo)航可以在不刷新頁(yè)面的情況下，切換展示的內(nèi)容，類(lèi)似瀏覽器的標(biāo)簽頁(yè)。要實(shí)現(xiàn)標(biāo)簽頁(yè)切換，需要在頁(yè)面中引入bootstrap.min.js文件，以實(shí)現(xiàn)交互效果。7.3.2標(biāo)簽式導(dǎo)航使用導(dǎo)航組件實(shí)現(xiàn)標(biāo)簽式導(dǎo)航的基本方法如下。（1）創(chuàng)建導(dǎo)航容器通常使用<ul>標(biāo)簽或<ol>標(biāo)簽定義導(dǎo)航容器，并添加.nav類(lèi)和.nav-tabs類(lèi)，以便應(yīng)用標(biāo)簽式導(dǎo)航容器的樣式。在標(biāo)簽式導(dǎo)航容器中，使用<li>標(biāo)簽定義導(dǎo)航項(xiàng)，并添加.nav-item類(lèi)，以便應(yīng)用導(dǎo)航項(xiàng)的樣式。（2）添加導(dǎo)航項(xiàng)7.3.2標(biāo)簽式導(dǎo)航在導(dǎo)航項(xiàng)中，添加導(dǎo)航鏈接并設(shè)置其具有標(biāo)簽頁(yè)切換的功能，基本步驟如下。（3）添加切換標(biāo)簽頁(yè)內(nèi)容項(xiàng)的導(dǎo)航鏈接7.3.2標(biāo)簽式導(dǎo)航通常使用<a>標(biāo)簽定義導(dǎo)航鏈接，并添加.nav-link類(lèi)，以便應(yīng)用導(dǎo)航鏈接的樣式。設(shè)置data-bs-toggle屬性，并將屬性值設(shè)置為tab，以實(shí)現(xiàn)單擊導(dǎo)航鏈接時(shí)自動(dòng)切換到與該導(dǎo)航鏈接相關(guān)聯(lián)的標(biāo)簽頁(yè)內(nèi)容項(xiàng)。添加.active類(lèi)，以標(biāo)記當(dāng)前激活的導(dǎo)航項(xiàng)。設(shè)置href屬性，其屬性值以#開(kāi)頭，屬性值指向的元素對(duì)應(yīng)標(biāo)簽頁(yè)內(nèi)容項(xiàng)的id屬性值，這樣單擊導(dǎo)航鏈接可以顯示對(duì)應(yīng)的標(biāo)簽頁(yè)內(nèi)容項(xiàng)。（4）創(chuàng)建標(biāo)簽頁(yè)內(nèi)容容器使用<div>標(biāo)簽定義標(biāo)簽頁(yè)內(nèi)容容器，并添加.tab-content類(lèi)，以便應(yīng)用標(biāo)簽頁(yè)內(nèi)容容器的樣式。在標(biāo)簽頁(yè)內(nèi)容容器中，添加標(biāo)簽頁(yè)內(nèi)容項(xiàng)，設(shè)置標(biāo)簽頁(yè)內(nèi)容項(xiàng)與導(dǎo)航鏈接相關(guān)聯(lián)，基本步驟如下。（5）添加標(biāo)簽頁(yè)內(nèi)容項(xiàng)7.3.2標(biāo)簽式導(dǎo)航通常使用<div>標(biāo)簽定義標(biāo)簽頁(yè)內(nèi)容項(xiàng)，并添加.tab-pane類(lèi)，以便應(yīng)用標(biāo)簽頁(yè)內(nèi)容項(xiàng)的樣式。添加.active類(lèi)，以標(biāo)記當(dāng)前激活的導(dǎo)航項(xiàng)。設(shè)置id屬性，屬性值與導(dǎo)航鏈接的href屬性值相對(duì)應(yīng)，以便與導(dǎo)航鏈接進(jìn)行關(guān)聯(lián)。下面通過(guò)案例來(lái)講解如何實(shí)現(xiàn)一個(gè)包含“商品介紹”“規(guī)格與包裝”“售后保障”“商品評(píng)價(jià)”的標(biāo)簽式導(dǎo)航，并實(shí)現(xiàn)動(dòng)態(tài)切換效果。7.3.2標(biāo)簽式導(dǎo)航7.3.2標(biāo)簽式導(dǎo)航創(chuàng)建navTab.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.min.js文件。編寫(xiě)標(biāo)簽式導(dǎo)航的頁(yè)面結(jié)構(gòu)。步驟1步驟2實(shí)現(xiàn)標(biāo)簽式導(dǎo)航在瀏覽器中打開(kāi)navTab.html文件，標(biāo)簽式導(dǎo)航效果如下圖所示。7.3.2標(biāo)簽式導(dǎo)航

先定一個(gè)小目標(biāo)！掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建膠囊式導(dǎo)航7.3.3膠囊式導(dǎo)航膠囊式導(dǎo)航是在基礎(chǔ)導(dǎo)航的基礎(chǔ)上實(shí)現(xiàn)的，可以通過(guò)為每個(gè)導(dǎo)航項(xiàng)添加對(duì)應(yīng)的標(biāo)簽頁(yè)，實(shí)現(xiàn)每個(gè)標(biāo)簽頁(yè)展示不同的內(nèi)容。膠囊式導(dǎo)航的形狀類(lèi)似膠囊，看起來(lái)更加美觀。7.3.3膠囊式導(dǎo)航實(shí)現(xiàn)膠囊式導(dǎo)航的基本方法與實(shí)現(xiàn)標(biāo)簽式導(dǎo)航的基本方法類(lèi)似，但需要注意以下兩點(diǎn)。將導(dǎo)航容器上的.nav-tabs類(lèi)修改為.nav-pills類(lèi)，以便應(yīng)用膠囊式導(dǎo)航容器的樣式。將導(dǎo)航鏈接上的data-bs-toggle屬性的屬性值tab修改為pills。7.3.3膠囊式導(dǎo)航基礎(chǔ)導(dǎo)航、標(biāo)簽式導(dǎo)航和膠囊式導(dǎo)航的寬度通常是固定的，不會(huì)根據(jù)不同設(shè)備自動(dòng)調(diào)整寬度。如果想使導(dǎo)航實(shí)現(xiàn)響應(yīng)式效果，則可以在.nav類(lèi)后添加.nav-fill類(lèi)或.nav-justified類(lèi)，兩者的區(qū)別如下。7.3.3膠囊式導(dǎo)航.nav-fill類(lèi)：導(dǎo)航項(xiàng)的寬度按照比例分配，填滿(mǎn)整個(gè)導(dǎo)航欄，各個(gè)導(dǎo)航項(xiàng)的寬度會(huì)根據(jù)其內(nèi)容的長(zhǎng)度而有所不同。例如，在有兩個(gè)導(dǎo)航項(xiàng)的情況下，第1個(gè)導(dǎo)航項(xiàng)的內(nèi)容很短，第2個(gè)導(dǎo)航項(xiàng)的內(nèi)容很長(zhǎng)，那么第2個(gè)導(dǎo)航項(xiàng)所占的寬度相對(duì)更寬，這樣能更好地適應(yīng)較長(zhǎng)的內(nèi)容。.nav-justified類(lèi)：導(dǎo)航項(xiàng)的寬度平均分配整個(gè)導(dǎo)航欄的寬度，實(shí)現(xiàn)等寬效果。每個(gè)導(dǎo)航項(xiàng)的寬度相等，不會(huì)根據(jù)內(nèi)容的長(zhǎng)度而有所變化。這意味著無(wú)論導(dǎo)航項(xiàng)的內(nèi)容長(zhǎng)度如何，它們都會(huì)占據(jù)相同的寬度。下面通過(guò)案例來(lái)講解如何實(shí)現(xiàn)一個(gè)包含“紅樓夢(mèng)”“水滸傳”“三國(guó)演義”“西游記”的膠囊式導(dǎo)航，并實(shí)現(xiàn)動(dòng)態(tài)切換效果。7.3.3膠囊式導(dǎo)航實(shí)現(xiàn)膠囊式導(dǎo)航7.3.3膠囊式導(dǎo)航創(chuàng)建navPill.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.min.js文件。步驟1步驟2步驟3編寫(xiě)膠囊式導(dǎo)航的頁(yè)面結(jié)構(gòu)。復(fù)制本章配套源代碼中的images文件夾并放入chapter07目錄下，該文件夾保存了本章所有的圖像素材。在瀏覽器中打開(kāi)navPill.html文件，膠囊式導(dǎo)航效果如下圖所示。7.3.3膠囊式導(dǎo)航

先定一個(gè)小目標(biāo)！掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建面包屑導(dǎo)航7.3.4面包屑導(dǎo)航在網(wǎng)頁(yè)設(shè)計(jì)中，面包屑導(dǎo)航用于展示用戶(hù)當(dāng)前所在的位置，并提供返回上級(jí)頁(yè)面的快捷鏈接，例如“首頁(yè)/分類(lèi)/子分類(lèi)/產(chǎn)品名稱(chēng)”，面包屑導(dǎo)航可以提升用戶(hù)體驗(yàn)，讓用戶(hù)更加方便地瀏覽網(wǎng)站內(nèi)容。7.3.4面包屑導(dǎo)航使用導(dǎo)航組件實(shí)現(xiàn)面包屑導(dǎo)航的基本方法如下。（1）創(chuàng)建導(dǎo)航容器通常使用<ul>標(biāo)簽或<ol>標(biāo)簽定義導(dǎo)航容器，并添加.breadcrumb類(lèi)，以便應(yīng)用面包屑導(dǎo)航容器的樣式。在面包屑導(dǎo)航容器中，使用<li>標(biāo)簽定義導(dǎo)航項(xiàng)，并添加.breadcrumb-item類(lèi)，以便應(yīng)用導(dǎo)航項(xiàng)的樣式；添加.active類(lèi)以標(biāo)記當(dāng)前激活的導(dǎo)航項(xiàng)。（2）添加導(dǎo)航項(xiàng)7.3.4面包屑導(dǎo)航（3）設(shè)置導(dǎo)航項(xiàng)分隔符默認(rèn)情況下，面包屑導(dǎo)航使用正斜杠符號(hào)“/”作為導(dǎo)航項(xiàng)的分隔符。如果想要自定義分隔符，需要手動(dòng)在導(dǎo)航容器的外層結(jié)構(gòu)中使用樣式屬性--bs-breadcrumb-divider定義該分隔符的樣式，例如，設(shè)置“--bs-breadcrumb-divider:'*';”表示將分隔符設(shè)置為“*”。7.3.4面包屑導(dǎo)航下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)包含“首頁(yè)>分類(lèi)>子分類(lèi)>產(chǎn)品名稱(chēng)”的面包屑導(dǎo)航。7.3.4面包屑導(dǎo)航實(shí)現(xiàn)面包屑導(dǎo)航7.3.4面包屑導(dǎo)航創(chuàng)建navBreadcrumb.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)面包屑導(dǎo)航的頁(yè)面結(jié)構(gòu)。步驟1步驟2在瀏覽器中打開(kāi)navBreadcrumb.html文件，面包屑導(dǎo)航效果如下圖所示。7.3.4面包屑導(dǎo)航導(dǎo)航欄組件7.4

先定一個(gè)小目標(biāo)！掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航欄7.4.1基礎(chǔ)導(dǎo)航欄基礎(chǔ)導(dǎo)航欄通常包含品牌標(biāo)識(shí)和導(dǎo)航菜單兩部分內(nèi)容。其中，品牌標(biāo)識(shí)用于展示網(wǎng)站或應(yīng)用程序的品牌名稱(chēng)或標(biāo)志；導(dǎo)航菜單用于展示不同的導(dǎo)航鏈接。7.4.1基礎(chǔ)導(dǎo)航欄使用導(dǎo)航欄組件實(shí)現(xiàn)基礎(chǔ)導(dǎo)航欄的基本方法如下。（1）創(chuàng)建導(dǎo)航欄容器通常使用<div>標(biāo)簽或<nav>標(biāo)簽定義導(dǎo)航欄容器，并添加.navbar類(lèi)，以便應(yīng)用導(dǎo)航欄容器的樣式。添加.navbar-expand-{sm|md|lg|xl|xxl}類(lèi)指定導(dǎo)航欄在不同設(shè)備中的展開(kāi)方式。在導(dǎo)航欄容器中，通常使用<a>標(biāo)簽定義導(dǎo)航欄的品牌標(biāo)識(shí)，并添加.navbar-brand類(lèi)，以便應(yīng)用品牌標(biāo)識(shí)的樣式。如果品牌標(biāo)識(shí)是純文本，則會(huì)使文字稍微放大顯示。（2）添加品牌標(biāo)識(shí)在導(dǎo)航欄容器中，通常使用<div>標(biāo)簽創(chuàng)建導(dǎo)航菜單的容器，并添加.navbar-collapse類(lèi)，以控制導(dǎo)航菜單項(xiàng)在不同設(shè)備中的展示方式。當(dāng)視口寬度不滿(mǎn)足展開(kāi)條件時(shí)，導(dǎo)航菜單項(xiàng)會(huì)以垂直堆疊的方式展示。（3）創(chuàng)建導(dǎo)航菜單容器7.4.1基礎(chǔ)導(dǎo)航欄創(chuàng)建導(dǎo)航菜單列表的基本實(shí)現(xiàn)步驟如下。（4）創(chuàng)建導(dǎo)航菜單列表在導(dǎo)航菜單容器中，通常使用<ul>標(biāo)簽或<ol>標(biāo)簽創(chuàng)建導(dǎo)航菜單列表，并添加.navbar-nav類(lèi)，以便應(yīng)用導(dǎo)航菜單列表的樣式。在導(dǎo)航菜單列表中，使用<li>標(biāo)簽來(lái)創(chuàng)建導(dǎo)航菜單項(xiàng)，并添加.nav-item類(lèi)，以便應(yīng)用導(dǎo)航菜單項(xiàng)的樣式。在導(dǎo)航菜單項(xiàng)中，使用<a>標(biāo)簽來(lái)定義導(dǎo)航鏈接，并添加.nav-link類(lèi)，以便應(yīng)用導(dǎo)航鏈接的樣式。7.4.1基礎(chǔ)導(dǎo)航欄下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)保護(hù)環(huán)境的基礎(chǔ)導(dǎo)航欄。7.4.1基礎(chǔ)導(dǎo)航欄實(shí)現(xiàn)基礎(chǔ)導(dǎo)航欄7.4.1基礎(chǔ)導(dǎo)航欄創(chuàng)建navbar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)基礎(chǔ)導(dǎo)航欄的頁(yè)面結(jié)構(gòu)。步驟1步驟2在瀏覽器中打開(kāi)navbar.html文件，基礎(chǔ)導(dǎo)航欄在中型及以上設(shè)備（視口寬度≥768px）中的效果如下圖所示。7.4.1基礎(chǔ)導(dǎo)航欄基礎(chǔ)導(dǎo)航欄在中型以下設(shè)備（視口寬度<768px）中會(huì)垂直堆疊，如下圖所示。7.4.1基礎(chǔ)導(dǎo)航欄

先定一個(gè)小目標(biāo)！掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建帶有折疊按鈕的導(dǎo)航欄7.4.2帶有折疊按鈕的導(dǎo)航欄為什么給導(dǎo)航欄添加折疊按鈕？7.4.2帶有折疊按鈕的導(dǎo)航欄當(dāng)瀏覽器窗口縮小到一定寬度時(shí)，菜單項(xiàng)內(nèi)容將會(huì)以垂直堆疊的方式顯示?？紤]到有些網(wǎng)站的導(dǎo)航欄內(nèi)容較多，在小型設(shè)備中會(huì)占據(jù)大量的空間，因此Bootstrap為導(dǎo)航欄提供了折疊按鈕。當(dāng)視口寬度過(guò)小時(shí)，導(dǎo)航欄會(huì)自動(dòng)折疊，并出現(xiàn)一個(gè)折疊按鈕，用戶(hù)單擊該按鈕可以展開(kāi)導(dǎo)航菜單，再次單擊則可收起導(dǎo)航菜單。7.4.2帶有折疊按鈕的導(dǎo)航欄在導(dǎo)航欄容器中添加一個(gè)折疊按鈕，基本實(shí)現(xiàn)步驟如下。（1）添加折疊按鈕通常使用<a>標(biāo)簽或<button>標(biāo)簽定義折疊按鈕，并添加.navbar-toggler類(lèi)，以便應(yīng)用折疊按鈕的樣式。設(shè)置data-bs-toggle屬性，并將屬性值設(shè)置為collapse，指定單擊該元素將觸發(fā)折疊內(nèi)容的展開(kāi)或折疊行為。設(shè)置data-bs-target屬性，并將其屬性值設(shè)置為導(dǎo)航菜單容器的id屬性，指定單擊折疊按鈕后要展開(kāi)或折疊的目標(biāo)元素。7.4.2帶有折疊按鈕的導(dǎo)航欄在基礎(chǔ)導(dǎo)航欄的基礎(chǔ)上，實(shí)現(xiàn)帶有折疊按鈕的導(dǎo)航欄時(shí)，需要注意以下兩點(diǎn)。當(dāng)單擊折疊按鈕時(shí)，相關(guān)的導(dǎo)航菜單容器會(huì)展開(kāi)或折疊，基本實(shí)現(xiàn)步驟如下。（2）設(shè)置導(dǎo)航菜單容器與折疊按鈕相關(guān)聯(lián)在導(dǎo)航菜單容器的.navbar-collapse類(lèi)后添加一個(gè).collapse類(lèi)，以便應(yīng)用導(dǎo)航菜單容器折疊或展開(kāi)時(shí)的樣式。為導(dǎo)航菜單容器設(shè)置唯一的id屬性，并將其屬性值設(shè)置為與折疊按鈕的data-bs-target屬性值相對(duì)應(yīng)，以將導(dǎo)航菜單容器與折疊按鈕相關(guān)聯(lián)。7.4.2帶有折疊按鈕的導(dǎo)航欄下面通過(guò)案例來(lái)講解如何在中型以下設(shè)備（視口寬度<768px）中設(shè)置帶有折疊按鈕的導(dǎo)航欄，單擊折疊按鈕可以展開(kāi)或折疊導(dǎo)航菜單。7.4.2帶有折疊按鈕的導(dǎo)航欄實(shí)現(xiàn)帶有折疊按鈕的導(dǎo)航欄創(chuàng)建navbarResponsive.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.min.js文件。編寫(xiě)帶有折疊按鈕的導(dǎo)航欄的頁(yè)面結(jié)構(gòu)。步驟1步驟27.4.2帶有折疊按鈕的導(dǎo)航欄在瀏覽器中打開(kāi)navbarResponsive.html文件，帶有折疊按鈕的導(dǎo)航欄在中型以下設(shè)備（視口寬度<768px）中的效果如下圖所示。7.4.2帶有折疊按鈕的導(dǎo)航欄上圖中，導(dǎo)航菜單被折疊了，并且網(wǎng)頁(yè)右上角出現(xiàn)了折疊按鈕“”，單擊折疊按鈕即可展開(kāi)導(dǎo)航菜單，如下圖所示。7.4.2帶有折疊按鈕的導(dǎo)航欄下拉菜單組件7.5

先定一個(gè)小目標(biāo)！掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建下拉菜單按鈕7.5.1下拉菜單按鈕下拉菜單組件常見(jiàn)的應(yīng)用場(chǎng)景有哪些？7.5.1下拉菜單按鈕Bootstrap中的下拉菜單是獨(dú)立的組件，可以靈活地應(yīng)用在需要下拉菜單的場(chǎng)景中，它可以與按鈕、導(dǎo)航欄等組件結(jié)合使用。例如，與按鈕組件結(jié)合使用可以實(shí)現(xiàn)下拉菜單按鈕，用戶(hù)單擊按鈕后會(huì)顯示下拉菜單；與導(dǎo)航欄結(jié)合使用可以實(shí)現(xiàn)下拉菜單導(dǎo)航欄，單擊導(dǎo)航項(xiàng)會(huì)出現(xiàn)下拉菜單。7.5.1下拉菜單按鈕7.5.1下拉菜單按鈕創(chuàng)建下拉菜單按鈕容器，并設(shè)置下拉菜單的彈出方式，基本實(shí)現(xiàn)步驟如下。（1）創(chuàng)建下拉菜單按鈕容器通常使用<div>標(biāo)簽定義下拉菜單按鈕容器。在不添加特定類(lèi)的情況下，下拉菜單默認(rèn)為向下彈出，這與為容器添加.dropdown類(lèi)的效果相同。設(shè)置下拉菜單的彈出方式，可以使用.dropdown-center類(lèi)（使其向下彈出且水平居中）、.dropup類(lèi)（使其向上彈出）、.dropstart類(lèi)（使其向左彈出）、.dropend類(lèi)（使其向右彈出）、.dropup-center類(lèi)（使其向上彈出且水平居中）。下拉菜單按鈕通常由按鈕和下拉菜單兩部分組成，使用下拉菜單組件實(shí)現(xiàn)下拉菜單按鈕的基本方法如下。7.5.1下拉菜單按鈕在下拉菜單容器中添加一個(gè)按鈕，控制下拉菜單的觸發(fā)，基本實(shí)現(xiàn)步驟如下。（2）添加下拉菜單按鈕通常使用<button>標(biāo)簽或<a>標(biāo)簽定義下拉菜單按鈕。添加.dropdown-toggle類(lèi)，以便應(yīng)用下拉菜單按鈕的樣式。設(shè)置data-bs-toggle屬性，并將其屬性值設(shè)置為dropdown，用于控制下拉菜單的觸發(fā)。7.5.1下拉菜單按鈕在下拉菜單容器中添加一個(gè)下拉菜單，并設(shè)置它的對(duì)齊方式，基本實(shí)現(xiàn)步驟如下。（3）添加下拉菜單通常使用<ul>標(biāo)簽或<ol>標(biāo)簽定義下拉菜單，并添加.dropdown-menu類(lèi)，以便應(yīng)用下拉菜單的樣式。在添加.dropdown-menu類(lèi)之后，可以進(jìn)一步添加.dropdown-menu-right類(lèi)，以設(shè)置展開(kāi)的下拉菜單沿著按鈕的右側(cè)對(duì)齊的效果，默認(rèn)為沿著按鈕的左側(cè)對(duì)齊。使用<li>標(biāo)簽創(chuàng)建每個(gè)菜單項(xiàng)。使用<a>標(biāo)簽定義鏈接，并添加.dropdown-item類(lèi)，以便應(yīng)用鏈接的樣式。7.5.1下拉菜單按鈕除此之外，還可以為菜單項(xiàng)添加一些類(lèi)來(lái)細(xì)化下列菜單列表的樣式，具體介紹如下。使用.dropdown-header類(lèi)設(shè)置分組標(biāo)題，用于標(biāo)記不同的內(nèi)容。使用.dropdown-divider類(lèi)設(shè)置分隔線，用于分隔相關(guān)菜單項(xiàng)。使用.disabled類(lèi)設(shè)置禁用狀態(tài)，用于禁用菜單項(xiàng)，使其不可單擊。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)單擊按鈕顯示或隱藏下拉菜單。7.5.1下拉菜單按鈕實(shí)現(xiàn)下拉菜單按鈕創(chuàng)建dropdown.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.bundle.min.js文件。編寫(xiě)下拉菜單按鈕的頁(yè)面結(jié)構(gòu)。步驟1步驟27.5.1下拉菜單按鈕在瀏覽器中打開(kāi)dropdown.html文件，基礎(chǔ)下拉菜單效果如下圖所示。7.5.1下拉菜單按鈕

先定一個(gè)小目標(biāo)！掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建下拉菜單導(dǎo)航欄7.5.2下拉菜單導(dǎo)航欄確定要為哪個(gè)導(dǎo)航菜單項(xiàng)添加下拉菜單，然后在該導(dǎo)航菜單項(xiàng)的.nav-item類(lèi)后添加.dropdown類(lèi)，以便應(yīng)用下拉菜單的樣式。（1）為導(dǎo)航菜單項(xiàng)添加下拉菜單下拉菜單導(dǎo)航欄通常由導(dǎo)航欄和下拉菜單兩部分組成，使用下拉菜單組件實(shí)現(xiàn)下拉菜單導(dǎo)航欄的基本方法如下。7.5.2下拉菜單導(dǎo)航欄在導(dǎo)航菜單項(xiàng)內(nèi)的導(dǎo)航鏈接的.nav-link類(lèi)后添加一個(gè).dropdown-toggle類(lèi)，同時(shí)添加data-bs-toggle屬性，并將設(shè)置屬性值為dropdown。（2）在導(dǎo)航菜單項(xiàng)中添加下拉菜單切換類(lèi)和屬性在導(dǎo)航菜單項(xiàng)內(nèi)創(chuàng)建一個(gè)下拉菜單。（3）創(chuàng)建下拉菜單下面通過(guò)案例的形式講解如何實(shí)現(xiàn)單擊導(dǎo)航欄中的某個(gè)導(dǎo)航鏈接時(shí)，切換下拉菜單的顯示或隱藏。7.5.2下拉菜單導(dǎo)航欄實(shí)現(xiàn)下拉菜單導(dǎo)航欄創(chuàng)建navbarDropdown.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.bundle.min.js文件。編寫(xiě)下拉菜單導(dǎo)航欄的頁(yè)面結(jié)構(gòu)。步驟1步驟27.5.2下拉菜單導(dǎo)航欄在瀏覽器中打開(kāi)navbarDropdown.html文件，下拉菜單導(dǎo)航欄效果如下圖所示。7.5.2下拉菜單導(dǎo)航欄卡片組件7.6

先定一個(gè)小目標(biāo)！掌握卡片組件的使用方法，能夠創(chuàng)建基礎(chǔ)卡片7.6.1基礎(chǔ)卡片通常使用<div>標(biāo)簽定義卡片容器，并添加.card類(lèi)，以便應(yīng)用卡片容器的樣式。（1）創(chuàng)建卡片容器基礎(chǔ)卡片通常由頭部、主體和底部3部分組成，使用卡片組件實(shí)現(xiàn)基礎(chǔ)卡片的基本方法如下。在卡片容器中通常使用<div>標(biāo)簽定義卡片頭部的容器，并添加.card-header類(lèi)，以便應(yīng)用卡片頭部的樣式。（2）添加卡片頭部7.6.1基礎(chǔ)卡片通常使用<p>標(biāo)簽設(shè)置段落，并添加.card-text類(lèi)，以便應(yīng)用卡片中段落的樣式。通常使用<a>標(biāo)簽設(shè)置鏈接，并添加.card-link類(lèi)，以便應(yīng)用卡片中鏈接的樣式。在卡片容器中通常使用<div>標(biāo)簽定義底部的容器，并添加.card-footer類(lèi)，以便應(yīng)用卡片底部的樣式。（4）添加卡片底部7.6.1基礎(chǔ)卡片卡片主體可以包含標(biāo)題、段落和鏈接等，基本實(shí)現(xiàn)步驟如下。（3）添加卡片主體通常使用<div>標(biāo)簽定義主體的容器，并添加.card-body類(lèi)，以便應(yīng)用主體的樣式。通常使用<h1>到<h6>標(biāo)簽設(shè)置主標(biāo)題和副標(biāo)題，并添加.card-title類(lèi)或.card-subtitle類(lèi)，以便分別應(yīng)用卡片主標(biāo)題和副標(biāo)題的樣式。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)學(xué)習(xí)卡片效果。7.6.1基礎(chǔ)卡片實(shí)現(xiàn)學(xué)習(xí)卡片創(chuàng)建card.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)學(xué)習(xí)卡片的頁(yè)面結(jié)構(gòu)。步驟1步驟27.6.1基礎(chǔ)卡片在瀏覽器中打開(kāi)card.html文件，學(xué)習(xí)卡片效果如下圖所示。7.6.1基礎(chǔ)卡片

先定一個(gè)小目標(biāo)！掌握卡片組件的使用方法，能夠創(chuàng)建圖文卡片7.6.2圖文卡片圖文卡片是一種將圖像和卡片主體進(jìn)行組合的卡片，實(shí)現(xiàn)了圖文混排的展示方式。在基礎(chǔ)卡片的基礎(chǔ)上實(shí)現(xiàn)圖文卡片，可以根據(jù)需要將圖像放置在卡片主體的上方或下方，并添加相應(yīng)的類(lèi)實(shí)現(xiàn)圓角效果，具體介紹如下。當(dāng)圖像位于卡片主體的上方時(shí)，可以為<img>標(biāo)簽添加.card-img-top類(lèi)，使圖像的左上角和右上角呈現(xiàn)圓角效果。當(dāng)圖像位于卡片主體的下方時(shí)，可以為<img>標(biāo)簽添加.card-img-bottom類(lèi)，使圖像的左下角和右下角呈現(xiàn)圓角效果。7.6.2圖文卡片此外，還可以為<img>標(biāo)簽添加.card-img類(lèi)，使圖像的4個(gè)角都呈現(xiàn)圓角效果。下面通過(guò)案例的形式講解如何實(shí)現(xiàn)一個(gè)圖書(shū)列表，在每個(gè)列表項(xiàng)中分別顯示圖書(shū)的封面、名稱(chēng)、作者、簡(jiǎn)介和一個(gè)“點(diǎn)此進(jìn)入學(xué)習(xí)！”的鏈接。7.6.2圖文卡片實(shí)現(xiàn)圖文卡片創(chuàng)建cardImg.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)圖文卡片的頁(yè)面結(jié)構(gòu)。7.6.2圖文卡片步驟1步驟2步驟3編寫(xiě)圖文卡片的頁(yè)面樣式。在瀏覽器中打開(kāi)cardImg.html文件，圖文卡片效果如下圖所示。7.6.2圖文卡片

先定一個(gè)小目標(biāo)！掌握卡片組件的使用方法，能夠創(chuàng)建背景圖卡片7.6.3背景圖卡片注意：主體內(nèi)容的高度不應(yīng)大于背景圖的高度，否則內(nèi)容將會(huì)顯示在背景圖的外部，影響卡片的美觀。7.6.3背景圖卡片在組合圖像和卡片主體的情況下，可以將圖像設(shè)置為卡片的背景，使主體內(nèi)容顯示在圖像的上面。若想將圖像設(shè)置為卡片的背景，在.card-body類(lèi)后添加.card-img-overlay類(lèi)即可。下面通過(guò)案例來(lái)講解如何實(shí)現(xiàn)一個(gè)圖書(shū)列表，將圖書(shū)的封面當(dāng)作卡片的背景圖，并在該背景圖的上方顯示圖書(shū)的名稱(chēng)、作者和“點(diǎn)此進(jìn)入學(xué)習(xí)！”的鏈接。7.6.3背景圖卡片實(shí)現(xiàn)背景圖卡片創(chuàng)建cardBg.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。編寫(xiě)背景圖卡片的頁(yè)面結(jié)構(gòu)。步驟1步驟2步驟3編寫(xiě)背景圖卡片的頁(yè)面樣式。7.6.3背景圖卡片在瀏覽器中打開(kāi)cardBg.html文件，背景圖卡片效果如下圖所示。7.6.3背景圖卡片輪播組件7.7

先定一個(gè)小目標(biāo)！了解輪播圖功能分析，能夠?qū)啿D的功能進(jìn)行分析7.7.1輪播圖功能分析輪播圖的效果如下圖所示。在開(kāi)始實(shí)現(xiàn)輪播圖之前，以京東商城首頁(yè)的輪播圖為例，分析輪播圖的功能。7.7.1輪播圖功能分析輪播項(xiàng)用于展示活動(dòng)信息。指示器用于控制當(dāng)前圖像的播放順序。左右切換按鈕用于切換到上一張或下一張圖像?；A(chǔ)輪播圖通常包括輪播項(xiàng)、指示器和左右切換按鈕3部分。7.7.1輪播圖功能分析當(dāng)鼠標(biāo)指針移到圖像上時(shí)，圖像停止自動(dòng)切換。當(dāng)單擊圖像左側(cè)的按鈕時(shí)，可以切換到上一張圖像。當(dāng)單擊圖像右側(cè)的按鈕時(shí)，可以切換到下一張圖像。當(dāng)單擊輪播圖指示器時(shí)，可以顯示當(dāng)前圖像的展示狀態(tài)。當(dāng)鼠標(biāo)指針移出圖像時(shí)，圖像開(kāi)始自動(dòng)切換。輪播圖的主要交互效果如下。

先定一個(gè)小目標(biāo)！掌握輪播組件的使用方法，能夠創(chuàng)建基礎(chǔ)輪播圖7.7.2基礎(chǔ)輪播圖在實(shí)現(xiàn)基礎(chǔ)輪播圖時(shí)，我們可以創(chuàng)建輪播容器，以實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)效果、自動(dòng)輪播以及控制輪播的時(shí)間間隔，具體實(shí)現(xiàn)步驟如下。（1）創(chuàng)建輪播容器使用輪播組件實(shí)現(xiàn)基礎(chǔ)輪播圖的基本方法如下。通常使用<div>標(biāo)簽定義輪播容器，并添加.carousel類(lèi)，以便應(yīng)用輪播圖容器的樣式。設(shè)置唯一的id值，以便后續(xù)代碼引用。添加.slide類(lèi)，以實(shí)現(xiàn)切換圖像的過(guò)渡和動(dòng)畫(huà)效果。設(shè)置data-bs-ride屬性，并將屬性值設(shè)置為carousel，用于在加載頁(yè)面時(shí)啟動(dòng)輪播。設(shè)置data-bs-interval屬性，其屬性值為一個(gè)毫秒數(shù)，用于設(shè)置輪播的時(shí)間間隔。設(shè)置data-bs-wrap屬性，其屬性值為false時(shí)表示輪播圖不自動(dòng)循環(huán)，屬性值為true表示輪播圖自動(dòng)循環(huán)，默認(rèn)值為true。7.7.2基礎(chǔ)輪播圖在輪播容器中添加輪播項(xiàng)，其中可以包含輪播圖像和字幕內(nèi)容等，具體實(shí)現(xiàn)步驟如下。（2）添加輪播項(xiàng)目通常使用<div>標(biāo)簽定義輪播項(xiàng)容器，并添加.carousel-inner類(lèi)，以便應(yīng)用輪播項(xiàng)容器的樣式。在輪播項(xiàng)容器中，通常使用<div>標(biāo)簽定義每個(gè)輪播項(xiàng)，并添加.carousel-item類(lèi)，以便應(yīng)用輪播項(xiàng)的樣式。為輪播項(xiàng)添加.active類(lèi)，以標(biāo)記當(dāng)前輪播項(xiàng)為激活狀態(tài)。在輪播項(xiàng)中，使用<img>標(biāo)簽定義輪播圖像，并添加.d-block類(lèi)和.w-100類(lèi)，將圖像顯示為塊級(jí)元素并設(shè)置圖像寬度為100%。在輪播項(xiàng)中，通常使用<div>標(biāo)簽定義字幕內(nèi)容，并添加.carousel-caption類(lèi)，以便應(yīng)用字幕內(nèi)容的樣式。7.7.2基礎(chǔ)輪播圖在輪播容器中添加指示器，具體實(shí)現(xiàn)步驟如下。（3）添加指示器通常使用<div>標(biāo)簽定義指示器容器，并添加.carousel-indicators類(lèi)，以便應(yīng)用指示器容器的樣式。在指示器容器中，通常使用<button>標(biāo)簽定義每個(gè)指示器項(xiàng)，并添加data-bs-target屬性，其屬性值為#id，id為輪播容器的id屬性值；添加data-bs-slide-