第6章CSS組件Bootstrap基礎教程（第3版）（微課版）趙丙秀目錄CONTENTS811121314卡片

按鈕組

關閉按鈕

媒體對象案例：野生動物公益網站12345下拉菜單導航導航條徽章分頁導航6列表組7進度條9圖標10旋轉圖標1下拉菜單下拉菜單下拉菜單是可切換的、以列表格式顯示鏈接的上下文菜單。通過下拉菜單組件，可以快捷的在頁面中創(chuàng)建下拉菜單，并設置菜單樣式?；居梅╞ootstrap.bundle.js文件已經包含了popper，所以可以在頁面中直接引用bootstrap.bundle.js文件。下拉菜單基本用法Bootstrap框架中，所有下拉菜單內容必須放在一個容器<div>元素中，并給它添加.dropdown類。若設置為.dropup、.dropstart、.dropend，則可以讓菜單向上、向左、向右彈出。下拉菜單基本用法01在該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)合使用，可以將按鈕組設置為單選按鈕或復選框的樣式和行為。下拉菜單也經常和按鈕組嵌套使用。在下拉菜單中，可以不應用.dropdown類，而通過按鈕組.btn-group來實現(xiàn)。設置按鈕組時，將多個按鈕放在一個div容器里，對該容器設置.btn-group屬性。在這一組按鈕組中，對需要設置下拉菜單的按鈕嵌套使用下拉菜單即可。下拉菜單分裂式按鈕下拉菜單分裂式按鈕下拉菜單：

左邊：按鈕的原始內容右邊：觸發(fā)下拉菜單的切換按鈕下拉菜單的外層div使用.btn-group樣式，對右邊按鈕使用.dropdown-toggle-split類，即可實現(xiàn)分裂式按鈕下列菜單的效果。下拉菜單分裂式按鈕下拉菜單代碼演示效果下拉菜單分裂式按鈕下拉菜單分割線菜單標題文本信息表單菜單項下拉菜單下拉菜單菜單內容通過給下拉菜單中l(wèi)i元素添加.dropdown-divider類，可以在菜單項中添加分割線，來實現(xiàn)菜單項分組的效果。下拉菜單菜單內容分割線和分組標題通過給下拉菜單中的li元素添加dropdown-header類，可以在菜單項中添加分組標題，標題默認樣式比菜單項字號略小、顏色略淺。下拉菜單菜單內容分割線和分組標題在設計下拉菜單時，將ul標簽修改為div，文本信息放在.dropdown-menu的div中。如果需要內容為表單形式，在.dropdown-menu中添加form表單進行設置。文本信息表單內容下拉菜單菜單內容文本信息和表單內容默認情況下，展開的下拉菜單自動沿著觸發(fā)按鈕的左側對齊。為下拉列表ul元素添加.dropdown-menu-end類可以讓菜單沿著觸發(fā)按鈕的右側對齊添加.dropdown-menu-star類可以讓菜單沿著觸發(fā)按鈕的左側對齊（默認樣式）。右側對齊效果下拉菜單對齊方式在菜單項中的超鏈接a元素上添加.disabled類，可將該項設為禁用。下拉菜單禁用菜單項通過在根元素、父包裝器或組件本身上設置data-bs-theme="dark"。下拉菜單深色菜單項2導航O2NE通過給ul元素或nav元素添加一個.nav類，可以創(chuàng)建一個導航組件。在超鏈接a元素上需添加.nav-link類，在li元素上需添加.nav-item類。導航導航基礎樣式.nav是一個基類，在基類的基礎上添加一個修飾類.nav-tabs或.nav-pills，可以改變導航的樣式，衍生為選項卡導航和Pills導航。導航選項卡和pills導航通過在ul元素或nav元素上添加.flex-column類，可以讓導航垂直顯示。選項卡導航若使用了.active類，無法在垂直顯示時獲得良好的外觀，因此一般只將基礎導航或Pills導航設為垂直導航。并且會為導航添加柵格系統(tǒng)屬性，讓其作為側邊欄導航使用。導航垂直導航導航禁用導航導航的默認對齊方式為居左對齊，但在ul元素或nav元素上添加.justify-content-center類或.justify-content-end類，可以實現(xiàn)居中對齊或居右對齊。導航導航對齊若在ul元素或nav元素上添加.nav-justified，所有的水平寬度都將被導航占用，每個導航元素會均分寬度，并且隨著窗口大小的變化，響應式地變化。如果將.nav-justified換為.nav-fill，導航也會占據(jù)整個水平寬度，但并不是每個導航項等寬。導航導航對齊向導航元素中嵌套下拉菜單，即可實現(xiàn)導航二級菜單效果。無論是使用列表+超鏈接，還是nav元素+超鏈接的方式去制作導航，無論是使用選項卡導航的外觀還是Pills導航的外觀，均可以實現(xiàn)導航二級菜單的效果。導航導航二級菜單向導航元素中嵌套下拉菜單，即可實現(xiàn)導航二級菜單效果。無論是使用列表+超鏈接，還是nav元素+超鏈接的方式去制作導航，無論是使用選項卡導航的外觀還是Pills導航的外觀，均可以實現(xiàn)導航二級菜單的效果。導航導航二級菜單Bootstrap中的面包屑導航是一個簡單的帶有

.breadcrumb類的無序列表。默認樣式的導航鏈接之間用“>”分隔。導航面包屑導航4導航條導航條課程導入

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

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

當導航條固定在頂部或底部時，導航條的寬度不再與父元素同寬，而是與瀏覽器窗口同寬。如果添加.sticky-top，可以讓導航條粘貼在頂部。再給導航條添加.fixed-top，導航條會脫離原來的文檔流，并固定在瀏覽器頂部，后面的內容會被導航條遮擋，因此需要設置body元素的頂部內邊距。導航條固定導航條改為fixed-bottom導航條固定導航條為導航條nav元素添加.bg-顏色詞的類以及.navbar-顏色詞的類，即可設置導航條的背景顏色與文本顏色。.bg-顏色詞導航欄的背景顏色。顏色有很多選擇，例如.bg-info、.bg-dark，詳細內容參考前面章節(jié)顏色部分。.navbar-顏色詞導航欄的文字顏色，只有.navbar-dark和.navbar-light兩種選擇。V5.2.0開始，沒有.navbar-light類，默認為ligth主題。v5.3.0中，可以使用data-bs-theme="dark”設置導航條文字顏色。.navbar-dark為了搭配深色背景而顯示的淺色字。.navbar-light為了搭配淺色背景而顯示的深色字。導航條配色方案導航條固定導航條導航條結合JS插件中的折疊插件，可以制作響應式導航條。在前面的實例中，導航條都使用了.navbar-expand-md類，表示在md、lg、xl設備上水平展開。在小于md設備寬度（<768px）時，導航條的導航會垂直展開。響應式導航條在小于md設備寬度（<768px）時，將導航條上的元素隱藏在一個折疊菜單中。通過觸發(fā)按鈕來控制菜單項的顯示與隱藏。導航條響應式導航條01將導航條中導航和表單放在一個<div>中，對這個<div>元素應用.collapse、.navbar-collapse類，并給這個<div>添加一個ID名。02在導航條內.navbar-brand的后面添加一個<button>元素，用于觸發(fā)折疊菜單的顯示與隱藏。給這個<button>應用.navbar-toggler類，添加屬性data-bs-toggle="collapse"，data-bs-target="..."，data-bs-target屬性值對應的是前面折疊<div>的class或ID值。<button>文本內容應用類.navbar-toggler-icon，這樣會讓折疊按鈕呈現(xiàn)一個面包按鈕的樣式。03注意：響應式導航條使用的是折疊插件，需在頁面中導入bootstrap.bundle.js文件。導航條響應式導航條折疊插件導航條響應式導航條折疊插件01將導航條中導航和表單放在一個<div>中，對這個<div>元素應用.offcanvas、.offcanvas-{start|end|top|bottom}類，并給這個<div>添加一個ID名。02在導航條內.navbar-brand的后面添加一個<button>元素，用于觸發(fā)折疊菜單的顯示與隱藏。給這個<button>應用.navbar-toggler類，添加屬性data-bs-toggle="offcanvas"，data-bs-target="..."，data-bs-target屬性值對應的是前面?zhèn)冗厵?lt;div>的class或ID值。<button>文本內容應用類.navbar-toggler-icon，這樣會讓折疊按鈕呈現(xiàn)一個面包按鈕的樣式。03注意：響應式導航條使用的是折疊插件，需在頁面中導入bootstrap.bundle.js文件。導航條響應式導航條Offcanvas插件導航條響應式導航條折疊插件4徽章徽章基本用法徽章與按鈕搭配使用5分頁導航分頁是使用列表ul元素構建的，如在ul元素上添加.pagination類，或在li元素上添加.item類、在超鏈接a元素上添加.link類，然后將列表ul放入nav元素中，生成一個分頁組件。由于頁面中可能有多個nav元素，例如各種導航，因此建議在nav元素上添加描述性的內容aria-label="page"。分頁導航如果要使用圖標或符號代替某些分頁鏈接中的文本，需要使用適當?shù)钠聊婚喿x器支持aria屬性和.visually-hidden工具。分頁導航分頁導航也可以通過添加.active類設置成激活狀態(tài)，通過添加.disabled類設置成禁用狀態(tài)。通過添加.pageination-lg或者.pageination-sm，可以設置大一點或小一點的分頁導航。

使用flexbox工具類.justify-content-*，將其中*取值{start|center|end|between|around}，也可用來設置分頁導航的排列位置。分頁導航6列表組列表組基礎列表組最簡單的列表組僅僅是一個帶有多個列表條目的無序列表。通過給元素ul和li分別應用類.list-group和.list-group-item即可生成一個列表組。列表組帶徽章的列表組向列表組的任意列表項li元素添加徽章組件，即可在該列表項右側顯示徽章。列表組鏈接列表組div元素和超鏈接a元素可替代列表ul元素和列表項li元素。在div元素上添加.list-group類，在a元素上添加.list-group-item類和.list-group-item-action類，則可創(chuàng)建一個具有鼠標懸停效果的鏈接列表組。<buttontype="button"class="list-group-itemlist-group-item-action">秋季新品</button>列表組狀態(tài)設置給列表項目.list-group-item添加.active類，可以讓單個列表項目背景顏色突出，進入激活狀態(tài)；給列表項目.list-group-item添加.disabled類，可以讓單個列表項目文字顯示為灰色，進入被禁用狀態(tài)。列表組列表組主題在列表項目.list-group-item-*添加情境類，可以使其顯示不同的情景樣式。列表組水平列表組默認情況下，列表組是垂直方向的，通過.list-group-horizontal或.list-group-horizontal-{sm|md|lg|xl|xxl}類，讓列表組水平方向顯示。如果需要每個項的寬度相等，可以對列表項應用.flex-fill。列表組其他元素的支持列表組中每個列表項目可以添加任意的HTML內容。7進度條進度條基礎進度條基礎進度條由嵌套的兩個div構建，外層div上添加.progress類，用作進度條的“槽”；內層div上添加.progress-bar類，用來表示當前進度。進度的長短由行內樣式的width屬性來設置。進度條如果希望改變進度條的默認藍色效果，可以在每個內層div容器中添加.bg-*的方式來設置。基礎進度條進度條條紋進度條將.progress-bar-striped類添加到進度條內層gress-bar上，即可通過CSS漸變對進度條的背景顏色加上條紋。若再添加.progress-bar-animated類，則條紋會呈現(xiàn)動態(tài)流動的效果。進度條進度條堆疊把多個進度條放入一個.progress-stacked的div中，即可使它們呈現(xiàn)出堆疊的效果。進度條的width設置在.progress上。8卡片卡片卡片支持各種內容，如圖像、文本、超鏈接、列表組等。基本的卡片結構包括卡片主體和圖片?；究ㄆ?）卡片主體卡片主體是一個添加了.card-body類的div，里面可以裝入標題、段落、超鏈接、按鈕、列表組、引用等。Bootstrap中定義了對應的類標題類.card-title副標題類.card-subtitle文本類.card-text類鏈接.card-link卡片卡片內容設計（2）圖片和卡片主體的組合01若是圖片放在卡片主體上方，給img元素添加.card-img-top類，則圖片左上角與右上角會添加圓角效果；卡片卡片內容設計（2）圖片和卡片主體的組合02若是圖片放在卡片主體下方，添加.card-img-bottom類，則圖片左下角與右下角會添加圓角效果?？ㄆㄆ瑑热菰O計（2）圖片和卡片主體的組合03如果卡片沒有文字，直接使用.card-img，此時，圖片的4個角都添加了圓角效果?？ㄆ瑑热菰O計卡片（2）圖片和卡片主體的組合卡片卡片內容設計（3）卡片的大小卡片默認為100%寬度。我們可以通過柵格系統(tǒng)、CSS樣式、寬度工具來設定?？ㄆ瑑热菰O計卡片（4）文本的排列卡片中文本的排列樣式，可利用文本排列工具類.text-{start|end|center}來實現(xiàn)。卡片內容設計卡片在設計卡片時，還可以選擇性地添加頁眉（.card-header）或腳注（.card-footer）?？ㄆ捻撁柬撃_卡片如需修改卡片外觀樣式，可以結合前面已經學習過的文本格式.text-*、背景格式.bg-*、邊框工具.border-*等類來實現(xiàn)。卡片的頁眉頁腳卡片借助柵格系統(tǒng)，可以將圖片和文字部分水平顯示。在.row元素上使用.g-0，可去掉行的左/右外邊距和列的內邊距。水平卡片卡片在每個card上添加.h-100的樣式以外，也可以使用卡片組將卡片呈現(xiàn)為具有相等寬度和高度列的單個附加元素?？ㄆM類包括.card-group。其中，.card-group卡片組的卡片之間無間隙，并等高等寬。問題解決辦法通過柵格系統(tǒng)布局可將多個卡片并列放置，但是當這些卡片的內容長度不一致時，并排的卡片會不等高?？ㄆM卡片卡片組卡片如果使用柵格系統(tǒng)布局卡片，可以使用.row-cols-*來控制每行顯示的列數(shù)，其中*的取值為1～6的數(shù)字。比如，.row-cols-2表示一行只顯示2列。卡片布局卡片9旋轉圖標旋轉圖標在div上添加.spinner-border類，可得到一個不斷旋轉的帶缺口的黑色圓環(huán)圖標。在div中添加.spinner-grow類，可得到一個由小變大閃現(xiàn)的黑色圓形圖標。為其添加.text-color顏色類，可實現(xiàn)自定義旋轉圖標的顏色。改為：spinner-grow10圖標圖標1使用npm安裝。該方法會安裝包括SVG、圖標sprite和圖標字體的內容。2下載Bootstrap圖標文件。在GitHub官網下載源碼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");安裝圖標圖標基于XML（extensiblemarkuplanguage，可擴展標記語言），由W3C聯(lián)盟進行開發(fā)。是一種開放標準的矢量圖形語言，可幫助用戶設計激動人心的、高分辨率的Web圖形頁面。SVG圖標圖標

用戶可以直接用代碼來描繪圖像，也可用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并隨時插入HTML中，通過瀏覽器來查看設計效果。SVG圖標圖標方法1：嵌入式可直接將圖標直接嵌入頁面的HTML中，而不是作為外部圖像文件引入。打開對應的SVG文件，將代碼復制到頁面中。<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>圖標的使用圖標方法2：SVGSprite使用SVGSprite在use元素中插入任何想用的圖標，并以圖標的文件名作為片段標識符（例如shop就用#shop）。然后，將下載的文件夾中的bootstrap-icons.svg文件復制到項目目錄下。再輸入下列代碼。<svgclass="bi"fill="currentColor"><usexlink:href="bootstrap-icons.svg#shop"/></svg>圖標的使用圖標方法3：作為外部圖像插入下載Bootstrap圖標文件后，將其放入項目指定路徑，像引用普通img元素一樣，引入它們。代碼如下，以img標記插入。<imgsrc="./img/cart-plus.svg">圖標的使用圖標SVG圖標使用方法4：通過字體圖標每一個圖標都對應一個class類。Bootstrap圖標默認的大小為1em，也可以使用font-size、text-color這些類來更改圖標的大小和顏色。<linkrel="stylesheet"href="/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">（1）