任務(wù)1：下拉菜單項(xiàng)目六Css組件主講人：課程導(dǎo)入下拉菜單是可切換的、以列表格式顯示鏈接的上下文菜單。通過下拉菜單組件，可以快捷的在頁面中創(chuàng)建下拉菜單，并設(shè)置菜單樣式。課程導(dǎo)入bootstrap.bundle.js文件已經(jīng)包含了popper，所以可以在頁面中直接引用bootstrap.bundle.js文件。基本用法Bootstrap框架中，所有下拉菜單內(nèi)容必須放在一個容器<div>元素中，并給它添加.dropdown類。若設(shè)置為.dropup、.dropstart、.dropend，則可以讓菜單向上、向左、向右彈出?；居梅?1在該div元素中放入一個button元素作為觸發(fā)按鈕，給button元素添加.dropdown-toggle類以及data-toggle="dropdown"的屬性。在按鈕button元素的下面添加ul列表創(chuàng)建一個下拉列表，給ul元素添加.dropdown-menu類，給li元素中的超鏈接a元素添加.dropdown-item類。02在頁面中引用引入bootstrap.bundle.js文件。03基本用法代碼演示效果可以將class="dropdown"中的dropdown改為dropup、dropend、dropstart，查看菜單效果按鈕組按鈕組是將多個按鈕堆疊在同一行上，如果要把多個按鈕對齊，這個組件將非常有用。通過與按鈕插件聯(lián)合使用，可以將按鈕組設(shè)置為單選按鈕或復(fù)選框的樣式和行為。下拉菜單也經(jīng)常和按鈕組嵌套使用。在下拉菜單中，可以不應(yīng)用.dropdown類，而通過按鈕組.btn-group來實(shí)現(xiàn)。設(shè)置按鈕組時，將多個按鈕放在一個div容器里，對該容器設(shè)置.btn-group屬性。在這一組按鈕組中，對需要設(shè)置下拉菜單的按鈕嵌套使用下拉菜單即可。分裂式按鈕下拉菜單分裂式按鈕下拉菜單：

左邊：按鈕的原始內(nèi)容右邊：觸發(fā)下拉菜單的切換按鈕下拉菜單的外層div使用.btn-group樣式，對右邊按鈕使用.dropdown-toggle-split類，即可實(shí)現(xiàn)分裂式按鈕下列菜單的效果。分裂式按鈕下拉菜單代碼演示效果菜單內(nèi)容分割線菜單標(biāo)題文本信息表單菜單項(xiàng)下拉菜單菜單內(nèi)容通過給下拉菜單中l(wèi)i元素添加.dropdown-divider類，可以在菜單項(xiàng)中添加分割線，來實(shí)現(xiàn)菜單項(xiàng)分組的效果。分割線和分組標(biāo)題菜單內(nèi)容通過給下拉菜單中的li元素添加dropdown-header類，可以在菜單項(xiàng)中添加分組標(biāo)題，標(biāo)題默認(rèn)樣式比菜單項(xiàng)字號略小、顏色略淺。分割線和分組標(biāo)題菜單內(nèi)容文本信息和表單內(nèi)容在設(shè)計(jì)下拉菜單時，將ul標(biāo)簽修改為div，文本信息放在.dropdown-menu的div中。如果需要內(nèi)容為表單形式，在.dropdown-menu中添加form表單進(jìn)行設(shè)置。文本信息表單內(nèi)容對齊方式默認(rèn)情況下，展開的下拉菜單自動沿著觸發(fā)按鈕的左側(cè)對齊。為下拉列表ul元素添加.dropdown-menu-end類可以讓菜單沿著觸發(fā)按鈕的右側(cè)對齊添加.dropdown-menu-star類可以讓菜單沿著觸發(fā)按鈕的左側(cè)對齊（默認(rèn)樣式）。右側(cè)對齊效果禁用菜單項(xiàng)在菜單項(xiàng)中的超鏈接a元素上添加.disabled類，可將該項(xiàng)設(shè)為禁用。課程小結(jié)任務(wù)2：導(dǎo)航項(xiàng)目六Css組件主講人：CONTENTS0102導(dǎo)航基礎(chǔ)樣式選項(xiàng)卡導(dǎo)航和pills導(dǎo)航0304垂直導(dǎo)航導(dǎo)航禁用和導(dǎo)航對齊0506導(dǎo)航二級菜單面包屑導(dǎo)航導(dǎo)航基礎(chǔ)樣式/01導(dǎo)航基礎(chǔ)樣式通過給ul元素或nav元素添加一個.nav類，可以創(chuàng)建一個導(dǎo)航組件。在超鏈接a元素上需添加.nav-link類，在li元素上需添加.nav-item類。選項(xiàng)卡導(dǎo)航和pills導(dǎo)航/02選項(xiàng)卡導(dǎo)航和pills導(dǎo)航.nav是一個基類，在基類的基礎(chǔ)上添加一個修飾類.nav-tabs或.nav-pills，可以改變導(dǎo)航的樣式，衍生為選項(xiàng)卡導(dǎo)航和Pills導(dǎo)航。垂直導(dǎo)航/03垂直導(dǎo)航通過在ul元素或nav元素上添加.flex-column類，可以讓導(dǎo)航垂直顯示。選項(xiàng)卡導(dǎo)航若使用了.active類，無法在垂直顯示時獲得良好的外觀，因此一般只將基礎(chǔ)導(dǎo)航或Pills導(dǎo)航設(shè)為垂直導(dǎo)航。并且會為導(dǎo)航添加?xùn)鸥裣到y(tǒng)屬性，讓其作為側(cè)邊欄導(dǎo)航使用。導(dǎo)航禁用和導(dǎo)航對齊/04導(dǎo)航禁用和導(dǎo)航對齊導(dǎo)航禁用和導(dǎo)航對齊導(dǎo)航的默認(rèn)對齊方式為居左對齊，但在ul元素或nav元素上添加.justify-content-center類或.justify-content-end類，可以實(shí)現(xiàn)居中對齊或居右對齊。導(dǎo)航禁用和導(dǎo)航對齊若在ul元素或nav元素上添加.nav-justified，所有的水平寬度都將被導(dǎo)航占用，每個導(dǎo)航元素會均分寬度，并且隨著窗口大小的變化，響應(yīng)式地變化。如果將.nav-justified換為.nav-fill，導(dǎo)航也會占據(jù)整個水平寬度，但并不是每個導(dǎo)航項(xiàng)等寬。導(dǎo)航二級菜單/05導(dǎo)航二級菜單向?qū)Ш皆刂星短紫吕藛?，即可?shí)現(xiàn)導(dǎo)航二級菜單效果。無論是使用列表+超鏈接，還是nav元素+超鏈接的方式去制作導(dǎo)航，無論是使用選項(xiàng)卡導(dǎo)航的外觀還是Pills導(dǎo)航的外觀，均可以實(shí)現(xiàn)導(dǎo)航二級菜單的效果。導(dǎo)航二級菜單向?qū)Ш皆刂星短紫吕藛?，即可?shí)現(xiàn)導(dǎo)航二級菜單效果。無論是使用列表+超鏈接，還是nav元素+超鏈接的方式去制作導(dǎo)航，無論是使用選項(xiàng)卡導(dǎo)航的外觀還是Pills導(dǎo)航的外觀，均可以實(shí)現(xiàn)導(dǎo)航二級菜單的效果。面包屑導(dǎo)航/06面包屑導(dǎo)航Bootstrap中的面包屑導(dǎo)航是一個簡單的帶有

.breadcrumb類的無序列表。默認(rèn)樣式的導(dǎo)航鏈接之間用“>”分隔。課程小結(jié)導(dǎo)航基礎(chǔ)樣式1選項(xiàng)卡導(dǎo)航和pills導(dǎo)航2垂直導(dǎo)航3導(dǎo)航禁用和導(dǎo)航對齊4導(dǎo)航二級菜單5面包屑導(dǎo)航6任務(wù)3：導(dǎo)航條項(xiàng)目六Css組件主講人：課程導(dǎo)入導(dǎo)航條的基本用法

在寬屏幕時，導(dǎo)航欄水平鋪開；小屏幕時，導(dǎo)航欄垂直展開。通過添加折疊插件，讓其折疊顯示。而.navbar-expand類則表示任何寬度都是水平展開。品牌圖標(biāo)在nav元素中添加一個帶有.navbar-brand類的元素作為導(dǎo)航條的頭部。這個元素可以是超鏈接a元素、div元素或者其他大多數(shù)元素，但是用超鏈接a元素的效果最好。

在導(dǎo)航條的頭部中可以使用文本，也可以使用圖像，作為品牌圖標(biāo)。如果將圖像添加到導(dǎo)航條的頭部中，可能還需要自定義樣式或使用一些工具類來正確調(diào)整圖像大小。品牌圖標(biāo)導(dǎo)航條上的鏈接導(dǎo)航條中的鏈接或者說導(dǎo)航條中的導(dǎo)航元素，是在前一節(jié)導(dǎo)航的基礎(chǔ)上添加導(dǎo)航條的專屬class而成，用法與“導(dǎo)航”幾乎一致。在導(dǎo)航條中，將“導(dǎo)航”中的“.nav類”修改為“.navbar-nav”類，可設(shè)置導(dǎo)航條中的鏈接內(nèi)容。導(dǎo)航條上的鏈接導(dǎo)航條中的鏈接或者說導(dǎo)航條中的導(dǎo)航元素，是在前一節(jié)導(dǎo)航的基礎(chǔ)上添加導(dǎo)航條的專屬class而成，用法與“導(dǎo)航”幾乎一致。在導(dǎo)航條中，將“導(dǎo)航”中的“.nav類”修改為“.navbar-nav”類，可設(shè)置導(dǎo)航條中的鏈接內(nèi)容。導(dǎo)航條上的表單如果要將各種表單控件或輸入框組放在導(dǎo)航條中，需要在表單form元素上添加.d-flex類。表單控件或輸入框組的樣式設(shè)置，與前面已經(jīng)學(xué)的表單內(nèi)容一致。導(dǎo)航條上的文本將文本內(nèi)容裝在使用了.navbar-text類的span元素中，便能在導(dǎo)航條中添加非鏈接的純文本了。根據(jù)需要，可以與其他導(dǎo)航條的元素混合使用。固定導(dǎo)航條給導(dǎo)航條元素nav添加.fixed-top類或.fixed-bottom類，將導(dǎo)航條固定在頂部或底部。

當(dāng)導(dǎo)航條固定在頂部或底部時，導(dǎo)航條的寬度不再與父元素同寬，而是與瀏覽器窗口同寬。如果添加.sticky-top，可以讓導(dǎo)航條粘貼在頂部。再給導(dǎo)航條添加.fixed-top，導(dǎo)航條會脫離原來的文檔流，并固定在瀏覽器頂部，后面的內(nèi)容會被導(dǎo)航條遮擋，因此需要設(shè)置body元素的頂部內(nèi)邊距。固定導(dǎo)航條改為fixed-bottom導(dǎo)航條配色方案為導(dǎo)航條nav元素添加.bg-顏色詞的類以及.navbar-顏色詞的類，即可設(shè)置導(dǎo)航條的背景顏色與文本顏色。.bg-顏色詞導(dǎo)航欄的背景顏色。顏色有很多選擇，例如.bg-info、.bg-dark，詳細(xì)內(nèi)容參考前面章節(jié)顏色部分。.navbar-顏色詞導(dǎo)航欄的文字顏色，只有.navbar-dark和.navbar-light兩種選擇。V5.2.0開始，沒有.navbar-light類，默認(rèn)為ligth主題。v5.3.0中，可以使用data-bs-theme="dark”設(shè)置導(dǎo)航條文字顏色。.navbar-dark為了搭配深色背景而顯示的淺色字。.navbar-light為了搭配淺色背景而顯示的深色字。導(dǎo)航條配色方案響應(yīng)式導(dǎo)航條導(dǎo)航條結(jié)合JS插件中的折疊插件，可以制作響應(yīng)式導(dǎo)航條。在前面的實(shí)例中，導(dǎo)航條都使用了.navbar-expand-md類，表示在md、lg、xl設(shè)備上水平展開。在小于md設(shè)備寬度（<768px）時，導(dǎo)航條的導(dǎo)航會垂直展開。響應(yīng)式導(dǎo)航條在小于md設(shè)備寬度（<768px）時，將導(dǎo)航條上的元素隱藏在一個折疊菜單中。通過觸發(fā)按鈕來控制菜單項(xiàng)的顯示與隱藏。響應(yīng)式導(dǎo)航條01將導(dǎo)航條中導(dǎo)航和表單放在一個<div>中，對這個<div>元素應(yīng)用.collapse、.navbar-collapse類，并給這個<div>添加一個ID名。02在導(dǎo)航條內(nèi).navbar-brand的后面添加一個<button>元素，用于觸發(fā)折疊菜單的顯示與隱藏。給這個<button>應(yīng)用.navbar-toggler類，添加屬性

data-bs-toggle="collapse"，data-target="..."，data-target屬性值對應(yīng)的是前面折疊<div>的class或ID值。<button>文本內(nèi)容應(yīng)用類.navbar-toggler-icon，這樣會讓折疊按鈕呈現(xiàn)一個面包按鈕的樣式。03注意：響應(yīng)式導(dǎo)航條使用的是折疊插件，需在頁面中導(dǎo)入bootstrap.bundle.js文件。響應(yīng)式導(dǎo)航條課程小結(jié)任務(wù)4：徽章、分頁項(xiàng)目六Css組件主講人：CONTENTS0102徽章分頁導(dǎo)航徽章/01徽章徽章徽章分頁導(dǎo)航/02分頁導(dǎo)航分頁導(dǎo)航分頁是使用列表ul元素構(gòu)建的，如在ul元素上添加.pagination類，或在li元素上添加.item類、在超鏈接a元素上添加.link類，然后將列表ul放入nav元素中，生成一個分頁組件。由于頁面中可能有多個nav元素，例如各種導(dǎo)航，因此建議在nav元素上添加描述性的內(nèi)容aria-label="page"。分頁導(dǎo)航如果要使用圖標(biāo)或符號代替某些分頁鏈接中的文本，需要使用適當(dāng)?shù)钠聊婚喿x器支持aria屬性和.visually-hidden工具。分頁導(dǎo)航分頁導(dǎo)航也可以通過添加.active類設(shè)置成激活狀態(tài)，通過添加.disabled類設(shè)置成禁用狀態(tài)。通過添加.pageination-lg或者.pageination-sm，可以設(shè)置大一點(diǎn)或小一點(diǎn)的分頁導(dǎo)航。

使用flexbox工具類.justify-content-*，將其中*取值{start|center|end|between|around}，也可用來設(shè)置分頁導(dǎo)航的排列位置。課程小結(jié)徽章分頁任務(wù)5：

列表組、進(jìn)度條項(xiàng)目六Css組件主講人：CONTENTS0102列表組進(jìn)度條課程導(dǎo)入列表組進(jìn)度條列表組/01列表組基礎(chǔ)列表組最簡單的列表組僅僅是一個帶有多個列表?xiàng)l目的無序列表。通過給元素ul和li分別應(yīng)用類.list-group和.list-group-item即可生成一個列表組。列表組帶徽章的列表組向列表組的任意列表項(xiàng)li元素添加徽章組件，即可在該列表項(xiàng)右側(cè)顯示徽章。列表組鏈接列表組div元素和超鏈接a元素可替代列表ul元素和列表項(xiàng)li元素。在div元素上添加.list-group類，在a元素上添加.list-group-item類和.list-group-item-action類，則可創(chuàng)建一個具有鼠標(biāo)懸停效果的鏈接列表組。<buttontype="button"class="list-group-itemlist-group-item-action">秋季新品</button>列表組狀態(tài)設(shè)置給列表項(xiàng)目.list-group-item添加.active類，可以讓單個列表項(xiàng)目背景顏色突出，進(jìn)入激活狀態(tài)；給列表項(xiàng)目.list-group-item添加.disabled類，可以讓單個列表項(xiàng)目文字顯示為灰色，進(jìn)入被禁用狀態(tài)。列表組列表組主題在列表項(xiàng)目.list-group-item-*添加情境類，可以使其顯示不同的情景樣式。列表組水平列表組默認(rèn)情況下，列表組是垂直方向的，通過.list-group-horizontal或.list-group-horizontal-{sm|md|lg|xl|xxl}類，讓列表組水平方向顯示。如果需要每個項(xiàng)的寬度相等，可以對列表項(xiàng)應(yīng)用.flex-fill。列表組其他元素的支持列表組中每個列表項(xiàng)目可以添加任意的HTML內(nèi)容。進(jìn)度條/02進(jìn)度條基礎(chǔ)進(jìn)度條基礎(chǔ)進(jìn)度條由嵌套的兩個div構(gòu)建，外層div上添加.progress類，用作進(jìn)度條的“槽”；內(nèi)層div上添加.progress-bar類，用來表示當(dāng)前進(jìn)度。進(jìn)度的長短由行內(nèi)樣式的width屬性來設(shè)置。進(jìn)度條如果希望改變進(jìn)度條的默認(rèn)藍(lán)色效果，可以在每個內(nèi)層div容器中添加.bg-*的方式來設(shè)置?；A(chǔ)進(jìn)度條進(jìn)度條條紋進(jìn)度條和進(jìn)度條堆疊將.progress-bar-striped類添加到進(jìn)度條內(nèi)層gress-bar上，即可通過CSS漸變對進(jìn)度條的背景顏色加上條紋。若再添加.progress-bar-animated類，則條紋會呈現(xiàn)動態(tài)流動的效果。進(jìn)度條條紋進(jìn)度條和進(jìn)度條堆疊把多個進(jìn)度條放入同一個.progress中可以使它們呈現(xiàn)出堆疊的效果。課程小結(jié)進(jìn)度條列表組任務(wù)6：卡片項(xiàng)目六Css組件主講人：CONTENTS0102卡片基本格式卡片的頁眉和腳注0304水平卡片卡片組和卡片布局課程導(dǎo)入在卡片中，可隨意組合填裝圖片、標(biāo)題、段落、超鏈接、按鈕、列表組等多種元素；在樣式上，可以為卡片添加頁眉和腳注，來設(shè)置背景顏色、邊框、寬度等，對于圖文混排設(shè)計(jì)非常方便。卡片基本格式/01卡片基本格式卡片支持各種內(nèi)容，如圖像、文本、超鏈接、列表組等?；镜目ㄆY(jié)構(gòu)包括卡片主體和圖片?？ㄆ靖袷剑?）卡片主體卡片主體是一個添加了.card-body類的div，里面可以裝入標(biāo)題、段落、超鏈接、按鈕、列表組、引用等。Bootstrap中定義了對應(yīng)的類標(biāo)題類.card-title副標(biāo)題類.card-subtitle文本類.card-text類鏈接.card-link卡片基本格式（2）圖片和卡片主體的組合01若是圖片放在卡片主體上方，給img元素添加.card-img-top類，則圖片左上角與右上角會添加圓角效果；卡片基本格式（2）圖片和卡片主體的組合02若是圖片放在卡片主體下方，添加.card-img-bottom類，則圖片左下角與右下角會添加圓角效果?？ㄆ靖袷剑?）圖片和卡片主體的組合03如果卡片沒有文字，直接使用.card-img，此時，圖片的4個角都添加了圓角效果?？ㄆ靖袷剑?）圖片和卡片主體的組合卡片基本格式（3）卡片的大小卡片默認(rèn)為100%寬度。我們可以通過柵格系統(tǒng)、CSS樣式、寬度工具來設(shè)定?？ㄆ靖袷剑?）文本的排列卡片中文本的排列樣式，可利用文本排列工具類.text-{start|end|center}來實(shí)現(xiàn)?？ㄆ捻撁己湍_注/02卡片的頁眉和腳注在設(shè)計(jì)卡片時，還可以選擇性地添加頁眉（.card-header）或腳注（.card-footer）?？ㄆ捻撁己湍_注如需修改卡片外觀樣式，可以結(jié)合前面已經(jīng)學(xué)習(xí)過的文本格式.text-*、背景格式.bg-*、邊框工具.border-*等類來實(shí)現(xiàn)。水平卡片/03水平卡片借助柵格系統(tǒng)，可以將圖片和文字部分水平顯示。在.row元素上使用.g-0，可去掉行的左/右外邊距和列的內(nèi)邊距?？ㄆM和卡片布局/04卡片組和卡片布局在每個card上添加.h-100的樣式以外，也可以使用卡片組將卡片呈現(xiàn)為具有相等寬度和高度列的單個附加元素?？ㄆM類包括.card-group。其中，.card-group卡片組的卡片之間無間隙，并等高等寬。問題解決辦法通過柵格系統(tǒng)布局可將多個卡片并列放置，但是當(dāng)這些卡片的內(nèi)容長度不一致時，并排的卡片會不等高?？ㄆM和卡片布局卡片組和卡片布局如果使用柵格系統(tǒng)布局卡片，可以使用.row-cols-*來控制每行顯示的列數(shù)，其中*的取值為1～6的數(shù)字。比如，.row-cols-2表示一行只顯示2列。任務(wù)7：圖標(biāo)項(xiàng)目六Css組件主講人：CONTENTS0102安裝圖標(biāo)SVG圖標(biāo)使用課程導(dǎo)入安裝圖標(biāo)/01安裝圖標(biāo)1使用npm安裝。該方法會安裝包括SVG、圖標(biāo)sprite和圖標(biāo)字體的內(nèi)容。2下載Bootstrap圖標(biāo)文件。在GitHub官網(wǎng)下載源碼ZIP文件，解壓后即可查看。3通過link或@import的方式引入Bootstrap提供的CSS文件。npmibootstrap-icons<linkrel="stylesheet"href="/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">@importurl("/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");SVG圖標(biāo)使用/02SVG圖標(biāo)使用基于XML（extensiblemarkuplanguage，可擴(kuò)展標(biāo)記語言），由W3C聯(lián)盟進(jìn)行開發(fā)。是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可幫助用戶設(shè)計(jì)激動人心的、高分辨率的Web圖形頁面。SVG圖標(biāo)使用

用戶可以直接用代碼來描繪圖像，也可用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并隨時插入HTML中，通過瀏覽器來查看設(shè)計(jì)效果。SVG圖標(biāo)使用方法1：嵌入式可直接將圖標(biāo)直接嵌入頁面的HTML中，而不是作為外部圖像文件引入。打開對應(yīng)的SVG文件，將代碼復(fù)制到頁面中。<svgxmlns="/2000/svg"fill="currentColor"class="bibi-chevron-right"viewBox="001616"><pathfill-rule="evenodd"d="M4.6461.646a.5.5001.7080l66a.5.50010.708l-66a.5.5001-.708-.708L10.29384.6462.354a.5.50010-.708z"/></svg>SVG圖標(biāo)使用方法2：SVGSprite使用SVGSprite在use元素中插入任何想用的圖標(biāo)，并以圖標(biāo)的文件名作為片段標(biāo)識符（例如shop就用#shop）。然后，將下載的文件夾中的bootstrap-icons.svg文件復(fù)制到項(xiàng)目目錄下。再輸入下列代碼。<svgclass="bi"fill="currentColor"><usexlink:href="bootstrap-icons.svg#shop"/></svg>SVG圖標(biāo)使用方法3：作為外部圖像插入下載Bootstrap圖標(biāo)文件后，將其放入項(xiàng)目指定路徑，像引用普通img元素一樣，引入它們。代碼如下，以img標(biāo)記插入。<imgsrc="./img/cart-plus.svg">SVG圖標(biāo)使用方法4：通過