Bootstrap提供了很好的方式來(lái)處理多媒體對(duì)象（圖片或視頻）和內(nèi)容的布局。應(yīng)用場(chǎng)景有博客評(píng)論、微博等。要?jiǎng)?chuàng)建一個(gè)多媒體對(duì)象，可以在容器元素上添加.media類，然后將多媒體內(nèi)容放到子容器上，子容器需要添加.media-body類，然后添加外邊距，內(nèi)邊距等效果。下面是一個(gè)基礎(chǔ)的多媒體對(duì)象的應(yīng)用代碼，效果如圖6-65所示。任務(wù)實(shí)施<divclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>紫靈</h5>紫靈仙子是四季蘭，葉子油綠，花大濃香。綠色的葉片配上紫色的花朵，別具新意。 </div></div>多媒體對(duì)象還可以進(jìn)行嵌套，一個(gè)多媒體對(duì)象中包含另外一個(gè)多媒體對(duì)象，可以把新的.media容器放到.media-body容器中，代碼如下，效果如圖所示。<divclass="mediaborder"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>紫靈</h5>紫靈仙子是四季蘭，葉子油綠，花大濃香。綠色的葉片配上紫色的花朵，別具新意。 <divclass="mediaborder"> <imgsrc="../img/lanhuasmall02.jpg"class="mr-3"width="60px"> <divclass="media-body"> <h5>虞美人</h5>虞美人花朵艷麗，呈現(xiàn)深紫紅色，很有觀賞價(jià)值。 </div> </div> </div></div>

想將頭像圖片顯示在右側(cè)，可以media-body容器后添加圖片

媒體對(duì)象中的媒體可以與flexbox流式布局一樣，實(shí)現(xiàn)對(duì)齊到頂部、中間、底部，自由便利，只要在img對(duì)象加上.align-self-start/center/end等屬性，就可以設(shè)置多媒體對(duì)象的圖片顯示位置。下面兩張圖予以演示。

媒體對(duì)象的結(jié)構(gòu)要求很少，還可以在列表元素上使用這些類，在<ul>或者<ol>添加.list-unstyled從而刪除瀏覽器默認(rèn)列表樣式，然后在li中添加.media元素塊，也可以根據(jù)自己的需要進(jìn)行間距調(diào)整。<ulclass="list-unstyled"> <liclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫靈</h5>紫靈仙子是四季蘭，葉子油綠，花大濃香。 </div> </li> <liclass="mediamy-4"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫靈</h5>紫靈仙子是四季蘭，葉子油綠，花大濃香。 </div> </li> <liclass="media"> <imgsrc="../img/lanhuasmall01.jpg"class="mr-3"width="64"> <divclass="media-body"> <h5>紫靈</h5>紫靈仙子是四季蘭，葉子油綠，花大濃香。 </div> </li>·</ul>任務(wù)總結(jié)

媒體對(duì)象圖文混排在頁(yè)面中被廣泛應(yīng)用，通過(guò)本次任務(wù)的學(xué)習(xí)，知道了可以利用media、.media-body等實(shí)現(xiàn)，同時(shí)可以設(shè)置媒體的對(duì)齊方式，還可以在列表元素上使用這些類，從而達(dá)到多場(chǎng)合的布局效果。任務(wù)描述

利用Bootstrap的組件完成加關(guān)閉按鈕的警告框效果。任務(wù)6.9使用alert實(shí)現(xiàn)警告提示框警告框組件通過(guò)提供一些靈活的預(yù)定義消息，為常見(jiàn)的用戶動(dòng)作提供常見(jiàn)的上下反饋信息和提示,具有特殊的上下文樣式。它們可以隨意刪除，并且可以有任何種類的標(biāo)記。設(shè)置警報(bào)非常簡(jiǎn)單，從基本的alert類開(kāi)始,有一些上下文類，可以使用的顏色有成功、信息、警告和危險(xiǎn)等，如圖所示。有幾個(gè)類可用于內(nèi)部?jī)?nèi)容,比如標(biāo)題和鏈接。任務(wù)實(shí)施<divclass="alertalert-primary">這是一個(gè)主要警報(bào)</div><divclass="alertalert-secondary">這是次要警報(bào)</div><divclass="alertalert-success">這是成功警報(bào)</div><divclass="alertalert-danger">這是危險(xiǎn)警報(bào)</div><divclass="alertalert-warning">這是警告警報(bào)</div><divclass="alertalert-info">這是信息警報(bào)</div><divclass="alertalert-light">Thisisalightalert</div><divclass="alertalert-dark">Thisisadarkalert</div>盡管上面的這些類可以對(duì)信息進(jìn)行著色以提供視覺(jué)指示，但是這些指示不會(huì)傳達(dá)給輔助技術(shù)的用戶，例如屏幕閱讀器。因此如果某些內(nèi)容很重要，請(qǐng)直接加入正文中，或者通過(guò)其他方式引用，例如使用.sr-only類隱藏這些必要的內(nèi)容。在這些警報(bào)中如果帶有超鏈接，使用.alert-link類可以為帶顏色的警告文本框中的鏈接添加加粗設(shè)置font-weight:700。下面以進(jìn)行示例演示，效果如圖6-72所示。<divclass="alertalert-primary">

這是一個(gè)主要警報(bào)，并帶有一個(gè)超鏈接

<ahref="#"class="alert-link">警報(bào)中帶有alert-link的超鏈接</a></div>

在一個(gè)警示框中可以增加額外的HTML元素，比如標(biāo)題、段落以及分隔線，標(biāo)題可以使用alert-heading類修飾，比如下面的示例，效果如圖6-73所示。<divclass="alertalert-success"> <h4class="alert-heading">標(biāo)準(zhǔn)體檢</h4> <p>我們的標(biāo)準(zhǔn)體檢提供超聲波、x光和牙齒清潔。</p> <hr> <pclass="mb-0">更多信息</p></div>警報(bào)不需要的時(shí)候，可以選擇關(guān)閉警報(bào)，使用.alert結(jié)合JavaScript，可以實(shí)現(xiàn)關(guān)閉效果。因?yàn)橐Y(jié)合JavaScript，所以先將<scriptsrc="jquery.min.js"type="text/javascript"></script>和<scriptsrc="bootstrap.js"type="text/javascript"></script>引入網(wǎng)頁(yè)。在容器中添加一個(gè).close關(guān)閉按鈕，使用<button>元素，以確保在所有設(shè)備上都能獲得正確的行為響應(yīng)，按鈕上要增加data-dismiss="alert"觸發(fā)JavaScript動(dòng)作，<buttontype=“button”class="close"data-dismiss="alert">×</button>。在右上角定義一個(gè)關(guān)閉按鈕效果，則需要在容器中引用.alert-dismissible類。.alert-dismissible.close{position:absolute;top:0;right:0;padding:0.75rem1.25rem;color:inherit;}如果想要要在關(guān)閉警報(bào)時(shí)有一些動(dòng)畫(huà)，請(qǐng)確保添加.fade和.show樣式，如圖6-74所示。<divclass="alertalert-successalert-dismissiblefadeshow"> <h4class="alert-heading">標(biāo)準(zhǔn)體檢</h4> <p>我們的標(biāo)準(zhǔn)體檢提供超聲波、x光和牙齒清潔。</p> <hr> <pclass="mb-0">更多信息</p> <buttontype="button"class="close"data-dismiss="alert">×</button></div>任務(wù)總結(jié)

通過(guò)本次任務(wù)，我們知道設(shè)置警報(bào)用alert類再配合情景如成功、信息、警告和危險(xiǎn)等一起使用，為用戶提供上下文反饋信息。任務(wù)描述

利用Bootstrap的.badge完成各種徽章效果。任務(wù)6.10應(yīng)用徽章（badge）.badge可以嵌在標(biāo)題中，并通過(guò)標(biāo)題樣式來(lái)適配其元素大小，如圖6-75所示。因?yàn)槠浔旧硎峭ㄟ^(guò)相對(duì)字體大小和em做單位的，所以有良好的彈性。任務(wù)實(shí)施<h1>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h1><h2>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h2><h3>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h3><h4>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h4><h5>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h5><h6>夏季清爽運(yùn)動(dòng)鞋<spanclass="badgebadge-secondary">New</span></h6>徽章可用作鏈接或按鈕的一部分，以提供統(tǒng)計(jì)數(shù)字樣式。<buttontype=“button”class="btnbtn-primary">

通知<spanclass="badgebadge-light">6</span></button><ahref="#"class="btnbtn-primary">

通知<spanclass="badgebadge-light">6</span></a>加入以下的Class樣式來(lái)定義.badge顏色、大小等的變化，如圖6-76所示。<spanclass="badgebadge-primary">Primary</span><spanclass="badgebadge-secondary">Secondary</span><spanclass="badgebadge-success">Success</span><spanclass="badgebadge-danger">Danger</span><spanclass="badgebadge-warning">Warning</span><spanclass="badgebadge-info">Info</span><spanclass="badgebadge-light">Light</span><spanclass="badgebadge-dark">Dark</span>

使用.badge-pill樣式，可以使標(biāo)簽更加圓潤(rùn)（具體有較大的border-radius邊框半徑和水平padding），形成橢圓形膠囊標(biāo)簽，如圖6-77所示。<spanclass="badgebadge-pillbadge-primary">Primary</span><spanclass="badgebadge-pillbadge-secondary">Secondary</span><spanclass="badgebadge-pillbadge-success">Success</span><spanclass="badgebadge-pillbadge-danger">Danger</span><spanclass="badgebadge-pillbadge-warning">Warning</span><spanclass="badgebadge-pillbadge-info">Info</span><spanclass="badgebadge-pillbadge-light">Light</span><spanclass="badge