模塊8

Bootstrap5網(wǎng)頁特效設(shè)計8.1.1創(chuàng)建與使用簡單的卡片【驗證示例8-1】創(chuàng)建簡單的卡片【示例代碼】<divclass="containermt-3"><divclass="card"><divclass="card-body">簡單的卡片</div></div></div>圖8-1【驗證示例8-1】的顯示效果8.1.2創(chuàng)建與使用帶有頭部和底部的卡片【驗證示例8-2】創(chuàng)建帶有頭部和底部的卡片【示例代碼】<divclass="containermt-3"><divclass="card"><divclass="card-header">卡片頭部</div><divclass="card-body">卡片內(nèi)容</div><divclass="card-footer">卡片底部</div></div></div>圖8-2【驗證示例8-2】的顯示效果8.1.3創(chuàng)建與使用多種顏色卡片Bootstrap5提供了多種卡片背景顏色類：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark和.bg-light。.bg-primary：主要背景顏色，通常用于突出顯示或主題顏色。.bg-success：成功或積極的背景顏色，用于表示成功或完成的任務(wù)。.bg-info：信息或通知的背景顏色，用于提供額外信息或注釋。.bg-warning：警告或潛在問題的背景顏色，用于提醒用戶注意某些問題。.bg-danger：危險或錯誤的背景顏色，用于表示錯誤或危險的情況。.bg-secondary：次要背景顏色，通常用于次要的元素或內(nèi)容。.bg-dark：深色背景顏色，用于在深色主題中使用。.bg-light：淺色背景顏色，用于在淺色主題中使用。8.1.3創(chuàng)建與使用多種顏色卡片【驗證示例8-3】創(chuàng)建彩色卡片【示例代碼】<divclass="containermt-3"><divclass="card"><divclass="card-body">基礎(chǔ)卡片</div></div><br><divclass="cardbg-primarytext-white"><divclass="card-body">主要卡片</div></div><br><divclass="cardbg-successtext-white"><divclass="card-body">成功卡片</div></div><br><divclass="cardbg-infotext-white"><divclass="card-body">信息卡片</div></div><br><divclass="cardbg-warningtext-white"><divclass="card-body">警告卡片</div></div><br><divclass="cardbg-dangertext-white"><divclass="card-body">危險卡片</div></div><br><divclass="cardbg-secondarytext-white"><divclass="card-body">次要卡片</div></div><br><divclass="cardbg-darktext-white"><divclass="card-body">深色卡片</div></div><br><divclass="cardbg-lighttext-dark"><divclass="card-body">淺色卡片</div></div></div>圖8-3【驗證示例8-3】的顯示效果8.1.4設(shè)置與使用標(biāo)題樣式、文本樣式和鏈接樣式【驗證示例8-4】設(shè)置與使用標(biāo)題樣式、文本樣式和鏈接樣式【示例代碼】<divclass="containermt-3"><divclass="card"><divclass="card-body"><h4class="card-title">卡片標(biāo)題</h4><pclass="card-text">卡片內(nèi)容</p><ahref="#"class="card-link">卡片鏈接</a><ahref="#"class="card-link">另一個鏈接</a></div></div></div>圖8-4【驗證示例8-4】的顯示效果8.1.5創(chuàng)建與使用圖像卡片【驗證示例8-5】在卡片頭部和底部添加圖片【示例代碼】<divclass="containermt-3"><divclass="row"><divclass="col-sm-6"><p>圖片在頭部（card-img-top）：</p><divclass="card"style="width:100%"><imgclass="card-img-top"src="五彩池.jpg"alt="Cardimage"style="width:100%"><divclass="card-body"><h4class="card-title">五彩池</h4><pclass="card-text"style="text-indent:2em;">五彩池異常清澈，透過池水，可見到池底巖面的石紋，由于池底沉淀物的色差及池畔植物色彩的不同，原本湛藍色的湖面變得五彩斑斕。五彩池是九寨溝湖泊中的精粹，也是最精致的海子，被人稱為“九寨之眼”。</p><ahref="#"class="card-link">查看詳細(xì)介紹</a></div></div></div><divclass="col-sm-6"><p>圖片在底部（card-img-bottom）：</p><divclass="card"style="width:100%"><divclass="card-body"><h4class="card-title">珍珠灘瀑布</h4><pclass="card-text"style="text-indent:2em;">珍珠灘瀑布，如銀河天降，在山谷中發(fā)出驚天動地的轟鳴聲，氣勢非凡。寬闊的瀑布沖進谷底，咆哮如雷，卷出千堆浪花，在翠谷中涌起水霧，繼而向東狂奔而去，水聲雷動，山澗沸騰，氣勢磅礴。</p><ahref="#"class="card-link">查看詳細(xì)介紹</a></div><imgclass="card-img-bottom"src="珍珠灘瀑布.jpg"alt="Cardimage"style="width:100%"></div></div></div></div>圖8-5【驗證示例8-5】的顯示效果8.1.6實現(xiàn)卡片圖像疊加的效果【驗證示例8-6】實現(xiàn)卡片圖像疊加的效果【示例代碼】<divclass="containermt-3"><divclass="row"><divclass="col-sm-6"><divclass="cardimg-fluid"style="width:100%"><imgclass="card-img-top"src="五彩池.jpg"alt="CardImage"style="width:100%"><divclass="card-img-overlay"><h4class="card-titletext-white">五彩池</h4><pclass="card-texttext-white">五彩池異常清澈，透過池水，可見到池底巖面的石紋，由于池底沉淀物的色差及池畔植物色彩的不同，原本湛藍色的湖面變得五彩斑斕。五彩池是九寨溝湖泊中的精粹，也是最精致的海子，被人稱為“九寨之眼”。</p><ahref="#"class="btnbtn-primary">查看詳細(xì)介紹</a></div></div></div><divclass="col-sm-6"><divclass="card"style="width:100%;position:relative;"><divclass="card-img-overlayd-flexalign-items-end"><h4class="card-titletext-white">珍珠灘瀑布</h4><pclass="card-texttext-white">珍珠灘瀑布，如銀河天降，在山谷中發(fā)出驚天動地的轟鳴聲，氣勢非凡。寬闊的瀑布沖進谷底，咆哮如雷，卷出千堆浪花，在翠谷中涌起水霧，繼而向東狂奔而去，水聲雷動，山澗沸騰，氣勢磅礴。</p><ahref="#"class="btnbtn-primary">查看詳細(xì)介紹</a></div><imgclass="card-img-bottom"src="珍珠灘瀑布.jpg"alt="CardImage"style="width:100%"></div></div></div></div>圖8-6【驗證示例8-6】的顯示效果8.2

實現(xiàn)Bootstrap5折疊效果1．Bootstrap5折疊效果的實現(xiàn)步驟Bootstrap5中，折疊效果可以通過添加特定的屬性和類來輕松實現(xiàn)內(nèi)容的顯示和隱藏。具體步驟如下。（1）創(chuàng)建一個可折疊的元素，并為其添加.collapse類，表示它是可折疊的。示例代碼如下。<divclass="collapse"id="demo"><!--可折疊的內(nèi)容-->……</div>（2）在按鈕或鏈接中添加data-bs-toggle="collapse"屬性，以觸發(fā)折疊效果，并使用data-bs-target="#id"或href="#id"屬性將按鈕或鏈接與要折疊的元素關(guān)聯(lián)起來。示例代碼如下。<buttontype="button"data-bs-toggle="collapse"data-bs-target="#demo">

單擊我</button>也可以使用<a>元素代替<button>，并使用href屬性來指定目標(biāo)元素。示例代碼如下。<ahref="#demo"data-bs-toggle="collapse">

單擊我</a>8.2

實現(xiàn)Bootstrap5折疊效果1．Bootstrap5折疊效果的實現(xiàn)步驟Bootstrap5中，折疊效果可以通過添加特定的屬性和類來輕松實現(xiàn)內(nèi)容的顯示和隱藏。具體步驟如下。（1）創(chuàng)建一個可折疊的元素，并為其添加.collapse類，表示它是可折疊的。示例代碼如下。<divclass="collapse"id="demo"><!--可折疊的內(nèi)容-->……</div>（2）在按鈕或鏈接中添加data-bs-toggle="collapse"屬性，以觸發(fā)折疊效果，并使用data-bs-target="#id"或href="#id"屬性將按鈕或鏈接與要折疊的元素關(guān)聯(lián)起來。示例代碼如下。<buttontype="button"data-bs-toggle="collapse"data-bs-target="#demo">

單擊我</button>也可以使用<a>元素代替<button>，并使用href屬性來指定目標(biāo)元素。示例代碼如下。<ahref="#demo"data-bs-toggle="collapse">

單擊我</a>（3）默認(rèn)情況下，折疊元素的內(nèi)容是隱藏的。如果想要默認(rèn)顯示內(nèi)容，可以在折疊元素的<div>上添加.show類。示例代碼如下。<divclass="collapseshow"id="demo"><!--默認(rèn)顯示的可折疊內(nèi)容-->……</div>在按鈕或鏈接上添加data-bs-toggle="collapse"和data-bs-target="#demo"（或使用href屬性），單擊按鈕或鏈接時，折疊元素的內(nèi)容將顯示或隱藏。如果想要默認(rèn)顯示內(nèi)容，可以在折疊元素的<div>上添加.show類。8.2

實現(xiàn)Bootstrap5折疊效果2．data-bs-toggle屬性和data-bs-target屬性data-bs-toggle屬性和data-bs-target屬性是用于定義組件行為和目標(biāo)元素的屬性。（1）data-bs-toggle屬性。該屬性用于定義組件的行為，指示組件在何時觸發(fā)?？梢栽O(shè)置的值取決于具體的組件類型，如"collapse"（折疊菜單）、"modal"（模態(tài)框）、"tab"（標(biāo)簽頁）等。①

data-bs-toggle="collapse"：用于觸發(fā)折疊菜單的展開與折疊。②

data-bs-toggle="modal"：用于觸發(fā)模態(tài)框的顯示與隱藏。③

data-bs-toggle="tab"：用于觸發(fā)標(biāo)簽頁的切換。（2）data-bs-target屬性。該屬性用于指定組件的目標(biāo)元素或目標(biāo)選擇器。目標(biāo)元素可以是一個CSS選擇器，用于標(biāo)識要操作的具體元素。也可以是一個指定的元素ID，以#開頭，如data-bs-target="#myModal"。data-bs-target屬性與data-bs-toggle屬性一起使用，可將組件行為與目標(biāo)元素關(guān)聯(lián)起來。8.2

實現(xiàn)Bootstrap5折疊效果【驗證示例8-7】實現(xiàn)Bootstrap5折疊效果【示例代碼】<divclass="containermt-3"><buttontype="button"class="btnbtn-primary"data-bs-toggle="collapse"data-bs-target="#demo">

折疊</button><divclass="collapseshowmt-2mb-2"id="demo"><divclass="cardcard-body">

這是隱藏的內(nèi)容</div></div><ahref="#demo1"class="btnbtn-primary"data-bs-toggle="collapse">

折疊</a><divclass="collapsemt-2"id="demo1"><divclass="cardcard-body">

這是隱藏的內(nèi)容</div></div></div>圖8-7【驗證示例8-7】的顯示效果8.3實現(xiàn)Bootstrap5輪播效果類名稱使用說明.carousel創(chuàng)建一個輪播組件.carousel-indicators為輪播組件添加一個指示器，就是輪播圖底下的一個個小點（也可能是其他形狀），以表示輪播組件中有多少張幻燈片，以及用戶當(dāng)前正在查看哪張幻燈片.carousel-inner添加要切換的圖片.carousel-item指定每張圖片的內(nèi)容.carousel-control-prev添加左側(cè)（上一個）的按鈕，單擊會返回上一張.carousel-control-next添加右側(cè)（下一個）的按鈕，單擊會切換到下一張類名稱使用說明.carousel-control-prev-icon與.carousel-control-prev一起使用，設(shè)置左側(cè)（上一個）的按鈕.carousel-control-next-icon與.carousel-control-next一起使用，設(shè)置右側(cè)（上一個）的按鈕.slide用于設(shè)置切換圖片的CSS過渡和動畫效果，如果不需要這樣的效果，可以刪除這個類8.3

實現(xiàn)Bootstrap5輪播效果【驗證示例8-8】實現(xiàn)Bootstrap5輪播效果【示例代碼】<divid="carouselExample"class="carouselslide"data-bs-ride="carousel"data-interval="3000"><!--輪播指示符--><olclass="carousel-indicators"><lidata-bs-target="#carouselExample"data-bs-slide-to="0"class="active"></li><lidata-bs-target="#carouselExample"data-bs-slide-to="1"></li><lidata-bs-target="#carouselExample"data-bs-slide-to="2"></li></ol><!--輪播項--><divclass="carousel-inner"><divclass="carousel-itemactive"><imgsrc="jiuzhai/01.jpg"class="d-blockw-100"alt="Image01"></div><divclass="carousel-item"><imgsrc="jiuzhai/02.jpg"class="d-blockw-100"alt="Image02"></div>