Bootstrap響應(yīng)式Web開發(fā)（第2版）第7章 Bootstrap常用組件_第1頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第7章 Bootstrap常用組件_第2頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第7章 Bootstrap常用組件_第3頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第7章 Bootstrap常用組件_第4頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第7章 Bootstrap常用組件_第5頁
已閱讀5頁，還剩173頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第7章Bootstrap常用組件《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學習目標/Target

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

學習Bootstrap組件

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

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

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

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

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

導(dǎo)航欄學習目標/Target

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先定一個小目標！掌握輪播組件的使用方法，能夠創(chuàng)建基礎(chǔ)輪播圖7.7.2基礎(chǔ)輪播圖在實現(xiàn)基礎(chǔ)輪播圖時，我們可以創(chuàng)建輪播容器，以實現(xiàn)過渡和動畫效果、自動輪播以及控制輪播的時間間隔，具體實現(xiàn)步驟如下。（1）創(chuàng)建輪播容器使用輪播組件實現(xiàn)基礎(chǔ)輪播圖的基本方法如下。通常使用<div>標簽定義輪播容器，并添加.carousel類，以便應(yīng)用輪播圖容器的樣式。設(shè)置唯一的id值，以便后續(xù)代碼引用。添加.slide類，以實現(xiàn)切換圖像的過渡和動畫效果。設(shè)置data-bs-ride屬性，并將屬性值設(shè)置為carousel，用于在加載頁面時啟動輪播。設(shè)置data-bs-interval屬性，其屬性值為一個毫秒數(shù)，用于設(shè)置輪播的時間間隔。設(shè)置data-bs-wrap屬性，其屬性值為false時表示輪播圖不自動循環(huán)，屬性值為true表示輪播圖自動循環(huán)，默認值為true。7.7.2基礎(chǔ)輪播圖在輪播容器中添加輪播項，其中可以包含輪播圖像和字幕內(nèi)容等，具體實現(xiàn)步驟如下。（2）添加輪播項目通常使用<div>標簽定義輪播項容器，并添加.carousel-inner類，以便應(yīng)用輪播項容器的樣式。在輪播項容器中，通常使用<div>標簽定義每個輪播項，并添加.carousel-item類，以便應(yīng)用輪播項的樣式。為輪播項添加.active類，以標記當前輪播項為激活狀態(tài)。在輪播項中，使用<img>標簽定義輪播圖像，并添加.d-block類和.w-100類，將圖像顯示為塊級元素并設(shè)置圖像寬度為100%。在輪播項中，通常使用<div>標簽定義字幕內(nèi)容，并添加.carousel-caption類，以便應(yīng)用字幕內(nèi)容的樣式。7.7.2基礎(chǔ)輪播圖在輪播容器中添加指示器，具體實現(xiàn)步驟如下。（3）添加指示器通常使用<div>標簽定義指示器容器，并添加.carousel-indicators類，以便應(yīng)用指示器容器的樣式。在指示器容器中，通常使用<button>標簽定義每個指示器項，并添加data-bs-target屬性，其屬性值為#id，id為輪播容器的id屬性值；添加data-bs-slide-to屬性，其屬性值為對應(yīng)輪播項的索引值。索引值從0開始，0代表第1個輪播項，1表示第2個輪播項，以此類推。為指示器項添加.active類，以標記當前指示器項為激活狀態(tài)。7.7.2基礎(chǔ)輪播圖在輪播容器中添加左切換按鈕，具體實現(xiàn)步驟如下。（4）添加左切換按鈕通常使用<button>標簽定義左切換按鈕。添加.carousel-control-prev類，以便應(yīng)用左切換按鈕的樣式。設(shè)置data-bs-target屬性，并將屬性值設(shè)置為#id，id表示輪播容器的id屬性值，用于指定要觸發(fā)輪播的輪播圖。設(shè)置data-bs-slide屬性，并將屬性值設(shè)置為prev，表示單擊左切換按鈕時滑動到前一個輪播項。在<button>標簽中，通常使用<span>標簽定義左切換按鈕的圖標，并添加.carousel-control-prev-icon類，以便應(yīng)用左切換按鈕的圖標的樣式。7.7.2基礎(chǔ)輪播圖在輪播容器中添加右切換按鈕，具體實現(xiàn)步驟如下。（5）添加右切換按鈕通常使用<button>標簽定義右切換按鈕。添加.carousel-control-next類，以便應(yīng)用右切換按鈕的樣式。設(shè)置data-bs-target屬性，并將屬性值設(shè)置為#id，id表示輪播容器的id屬性值，用于指定要觸發(fā)輪播的輪播圖。設(shè)置data-bs-slide屬性，并將屬性值設(shè)置為next，表示單擊右切換按鈕時滑動到下一個輪播項。在<button>標簽中，通常使用<span>標簽定義右切換按鈕的圖標，并添加.carousel-control-next-icon類，以便應(yīng)用右切換按鈕的圖標的樣式。7.7.2基礎(chǔ)輪播圖下面通過案例的形式講解如何實現(xiàn)橫幅圖像的輪播效果，并且可以手動或自動切換圖像。7.7.2基礎(chǔ)輪播圖實現(xiàn)橫幅圖像的輪播創(chuàng)建carousel.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.min.js文件。編寫輪播圖的頁面結(jié)構(gòu)。步驟1步驟2步驟3編寫輪播項的內(nèi)容。7.7.2基礎(chǔ)輪播圖步驟4編寫指示器的內(nèi)容。步驟5編寫左右切換按鈕的內(nèi)容。在瀏覽器中打開carousel.html文件，基礎(chǔ)輪播圖效果如下圖所示。7.7.2基礎(chǔ)輪播圖提示組件7.8

先定一個小目標！掌握提示組件的使用方法，能夠創(chuàng)建工具提示框7.8.1工具提示框工具提示框通常用于鼠標指針懸停在目標元素上時，為用戶提供更詳細的信息或解釋，以提高用戶體驗和網(wǎng)頁的易用性。工具提示框可以用于各種類型的頁面元素，例如按鈕、鏈接、圖像等。7.8.1工具提示框選擇需要添加工具提示框的目標元素，可以是任意HTML元素。（1）確定目標元素使用提示組件實現(xiàn)工具提示框的基本方法如下。7.8.1工具提示框為目標元素設(shè)置data-bs-toggle屬性，并將屬性值設(shè)置為tooltip，表示使用工具提示框功能。（2）添加工具提示框功能為目標元素設(shè)置title屬性，用于指定工具提示框的標題。（3）指定工具提示框的標題為目標元素設(shè)置data-bs-placement屬性，用于指定工具提示框的展示位置，其屬性值包括top（默認值）、bottom、left、right和auto，分別表示在目標元素的頂部、底部、左側(cè)、右側(cè)和自動選擇位置展示工具提示框。（4）設(shè)置展示位置為目標元素設(shè)置data-bs-trigger屬性，用于指定工具提示框的觸發(fā)方式，其屬性值包括hover（默認值）、click、focus和manual，分別表示當鼠標指針懸停、單擊、獲取焦點或手動控制時觸發(fā)工具提示框。可以在data-bs-trigger屬性中設(shè)置多種觸發(fā)方式，多個屬性值之間使用空格分隔。注意，manual不能與其他觸發(fā)方式同時使用。（5）指定觸發(fā)方式7.8.1工具提示框為目標元素設(shè)置data-bs-delay屬性，用于指定工具提示框顯示和隱藏的延遲時間，單位為毫秒。（6）指定延遲時間為目標元素設(shè)置data-bs-html屬性，用于指定是否對工具提示框的標題進行HTML解析和渲染，默認值為false，表示工具提示框的標題將被視為純文本，不會進行HTML解析和渲染；設(shè)置為true時，表示可以進行HTML解析和渲染。（7）HTML解析和渲染工具提示框依賴于Popper.js文件，需要在使用時在bootstrap.min.js文件之前引入Popper.js文件。另外，也可以直接使用bootstrap.bundle.min.js文件，其中包含Popper.js文件的功能。（8）引入依賴文件7.8.1工具提示框工具提示框需要進行初始化才可以生效，在Bootstrap中，可以使用JavaScript或jQuery兩種方式對工具提示框進行初始化。（9）初始化工具提示框7.8.1工具提示框（1）通過JavaScript方式初始化工具提示框。下面講解如何使用JavaScript方式和jQuery方式完成工具提示框的初始化。<script>vartooltipTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));vartooltipList=tooltipTriggerList.map(function(tooltipTriggerEl){returnnewbootstrap.Tooltip(tooltipTriggerEl);});</script>7.8.1工具提示框（2）通過jQuery方式初始化工具提示框。scriptsrc="js/jquery-3.3.1.js"></script><script>$(document).ready(function(){$('[data-bs-toggle="tooltip"]').tooltip();});</script>下面通過案例的形式來講解如何實現(xiàn)用戶鼠標指針懸停在“查看詳情”鏈接上時，給出提示信息“跳轉(zhuǎn)到詳情頁”。7.8.1工具提示框?qū)崿F(xiàn)工具提示框創(chuàng)建toolTip.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件和bootstrap.bundle.min.js文件。編寫工具提示框的頁面結(jié)構(gòu)。步驟1步驟2步驟3編寫初始化工具提示框的頁面邏輯。7.8.1工具提示框在瀏覽器中打開tooltip.html文件，當鼠標指針懸停在“查看詳情”鏈接上時，工具提示框效果如下圖所示。7.8.1工具提示框

先定一個小目標！掌握提示組件的使用方法，能夠創(chuàng)建彈出提示框7.8.2彈出提示框彈出提示框通常用于向用戶傳達重要信息，或者詢問用戶是否要執(zhí)行某種動作，需要用戶進行確認或取消等交互操作。彈出提示框可以用于各種類型的頁面元素，例如按鈕、鏈接、圖像等。7.8.2彈出提示框選擇需要添加彈出提示框的目標元素，可以是任意HTML元素。（1）確定目標元素使用提示組件實現(xiàn)彈出提示框的基本步驟如下。為目標元素設(shè)置data-bs-toggle屬性，并將屬性值設(shè)置為popover，表示使用彈出提示框功能。（2）添加彈出提示框功能為目標元素設(shè)置title屬性，用于指定彈出提示框的標題。（3）指定彈出提示框的標題為目標元素設(shè)置data-bs-content屬性，用于指定彈出提示框的內(nèi)容。（4）指定彈出提示框的內(nèi)容7.8.2彈出提示框為目標元素設(shè)置data-bs-placement屬性，用于指定彈出提示框的展示位置，該屬性的取值同工具提示框中的data-bs-placement屬性，區(qū)別在于彈出提示框該屬性的默認值為right。7.8.2彈出提示框（5）指定展示位置為目標元素設(shè)置data-bs-trigger屬性，用于指定彈出提示框的觸發(fā)方式，該屬性的取值同工具提示框中的data-bs-trigger屬性，區(qū)別在于彈出提示框該屬性的默認值為click。（6）指定觸發(fā)方式為目標元素設(shè)置data-bs-delay屬性，用于指定彈出提示框顯示和隱藏的延遲時間，單位為毫秒。（7）指定延遲時間彈出提示框的依賴文件的引入方式同工具提示框。（9）引入依賴文件彈出提示框需要進行初始化才可以生效，在Bootstrap中，可以使用JavaScript或jQuery兩種方式對彈出提示框進行初始化。（10）初始化彈出提示框7.8.2彈出提示框為目標元素設(shè)置data-bs-html屬性，用于指定是否對彈出提示框的標題和內(nèi)容進行HTML解析和渲染，默認值為false，表示彈出提示框的標題和內(nèi)容將被視為純文本，不會進行HTML解析和渲染；設(shè)置為true時，表示可以進行HTML解析和渲染。（8）HTML解析和渲染（1）通過JavaScript方式初始化彈出提示框。下面講解如何使用JavaScript方式和jQuery方式完成彈出提示框的初始化。<script>varpopoverTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));varpopoverList=popoverTriggerList.map(function(popoverTriggerEl){returnnewbootstrap.Popover(popoverTriggerEl);});</script>7.8.2彈出提示框（2）通過jQuery方式初始化彈出提示框。<scriptsrc="js/jquery-3.3.1.js"></script><script>$(document).ready(function(){$('[data-bs-toggle="popover"]').popover();});</script>7.8.2彈出提示框下面通過案例來講解如何實現(xiàn)用戶單擊按鈕時彈出確認提示框，根據(jù)用戶的選擇執(zhí)行相應(yīng)的操作。7.8.2彈出提示框?qū)崿F(xiàn)彈出提示框創(chuàng)建popover.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件、bootstrap.bundle.min.js和jquery-3.3.1.js文件。編寫彈出提示框的頁面結(jié)構(gòu)。步驟1步驟2步驟3編寫彈出提示框的頁面樣式。7.8.2彈出提示框步驟4編寫彈出提示框的頁面邏輯。在瀏覽器中打開popover.html文件，當單擊“刪除”按鈕時，彈出提示框效果如下圖所示。7.8.2彈出提示框在用戶單擊“確定”按鈕時，同時隱藏了彈出提示框和“刪除”按鈕；而在用戶單擊“取消”按鈕時，只隱藏了彈出提示框。

先定一個小目標！掌握提示組件的使用方法，能夠創(chuàng)建警告框7.8.3警告框警告框通常用于向用戶發(fā)出警告或提示信息，其中的文本內(nèi)容可以為任何長度，并且在警告框中可以放置任意的HTML內(nèi)容，例如文本、鏈接、圖標等。7.8.3警告框7.8.3警告框通常使用<div>標簽定義警告框容器，并添加.alert類，以便應(yīng)用警告框容器的樣式。（1）創(chuàng)建警告框容器使用提示組件實現(xiàn)警告框的基本方法如下。通過為警告框的容器<div>標簽添加不同的CSS類，可以設(shè)置不同的樣式和類型。Bootstrap提供了多種警告類型的類，為警告框指定特定的顏色和樣式。例如，.alert-primary類、.alert-danger類、.alert-secondary類、.alert-success類、.alert-info類、.alert-warning類、.alert-light類和.alert-dark類。（2）設(shè)置警告框的樣式和類型7.8.3警告框警告框中可以定義一個“×”按鈕，使用戶可以手動關(guān)閉

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論