市總工會智慧網(wǎng)站建設(shè)總結(jié)奶茶的營銷推廣軟文
Bootstrap的.media類是用于創(chuàng)建媒體對象的，媒體對象通常用于展示圖像（圖片）和文本內(nèi)容的組合，這種布局在展示新聞文章、博客帖子等方面非常常見。.media類使得創(chuàng)建這樣的媒體對象非常簡單，通常包含一個(gè)圖像和相關(guān)的文本描述。
以下是使用Bootstrap的.media類的基本示例：
<div class="media"><img src="image.jpg" class="mr-3" alt="媒體圖片"><div class="media-body"><h5 class="mt-0">媒體標(biāo)題</h5><p>這是媒體對象的文本描述，可以包含各種內(nèi)容，如段落文本、鏈接等。</p></div>
</div>
上述示例中，.media類用于包裹整個(gè)媒體對象，其中包含了一個(gè)<img>元素和一個(gè).media-body類的<div>元素。
<img>元素用于顯示媒體對象的圖像。.mr-3類用于添加右側(cè)外邊距，以控制圖像與文本之間的距離。.media-body類用于包裹媒體對象的文本內(nèi)容。在這個(gè)<div>內(nèi)部，你可以放置標(biāo)題、文本段落、鏈接和其他文本內(nèi)容。
你可以根據(jù)需要自定義媒體對象的樣式，例如添加邊框、背景顏色、文本顏色等。Bootstrap提供了一系列的類來幫助你自定義媒體對象的外觀。
此外，你可以將多個(gè)媒體對象垂直排列，創(chuàng)建一個(gè)媒體列表，每個(gè)列表項(xiàng)包含不同的圖像和文本內(nèi)容。這對于展示新聞文章、博客帖子列表等非常有用。
目錄
- 01-基本的媒體對象組件示例
- 02-設(shè)置圖片的位置(居上、居中、居下)
- 03-列表型媒體對象(多個(gè)圖文展示)
01-基本的媒體對象組件示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒體版式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒體版式</h3>
<div class="media"><img src="31.png" class="mr-4 w-25" alt=""><div class="media-body"><h5 class="mt-0">媒體標(biāo)題</h5><p>這是媒體對象的文本描述，可以包含各種內(nèi)容，如段落文本、鏈接等。</p></div>
</div>
</body>
</html>
運(yùn)行效果如下：
02-設(shè)置圖片的位置(居上、居中、居下)
為圖片元素添加類align-self-start、align-self-center、align-self-end可以實(shí)現(xiàn)圖片元素的居上、居中、居下對齊方式。
示例代碼如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒體對齊方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒體對齊方式</h3>
<hr/>
<div class="media"><img src="3.jpg" class="align-self-start mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">蘋果</h5><div>1.山鷹的眼睛不怕迷霧，真理的光輝不怕籠罩。</div><div>2.我寧可做饑餓的雄鷹，也不愿做肥碩的井蛙。</div><div>3.雄鷹當(dāng)展翅高飛，翱翔于九天之上。</div></div>
</div><hr/>
<div class="media"><img src="3.jpg" class="align-self-center mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">蘋果</h5><div>1. 蘋果是薔薇科蘋果亞科蘋果屬植物，其樹為落葉喬木。</div> <div>2. 蘋果營養(yǎng)價(jià)值很高，富含礦物質(zhì)和維生素，含鈣量豐富，有助于代謝掉體內(nèi)多余鹽分。</div><div>3. 蘋果酸可代謝熱量，防止肥胖。</div></div>
</div><hr/>
<div class="media"><img src="3.jpg" class="align-self-end mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">蘋果</h5><div>1. 蘋果是薔薇科蘋果亞科蘋果屬植物，其樹為落葉喬木。</div> <div>2. 蘋果營養(yǎng)價(jià)值很高，富含礦物質(zhì)和維生素，含鈣量豐富，有助于代謝掉體內(nèi)多余鹽分。</div><div>3. 蘋果酸可代謝熱量，防止肥胖。</div></div>
</div><hr/>
</body>
</html>
運(yùn)行效果如下：
03-列表型媒體對象(多個(gè)圖文展示)
可以用標(biāo)簽<ul>和<li>實(shí)現(xiàn)“列表型媒體對象(多個(gè)圖文展示)”。
示例代碼如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒體列表</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒體列表</h3>
<ul class="list-unstyled"><li class="media"><img src="41.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">王漫妮</h5>王漫妮是眾人眼中的標(biāo)準(zhǔn)都市女性，她獨(dú)立、清醒，同時(shí)也是典型的“精致窮”。身為柜姐的她需要對顧客進(jìn)行極致化服務(wù)，卻遭到嘲諷。</div></li><li class="media my-4"><img src="42.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">顧佳</h5>全職太太，雙商在線能力強(qiáng)，將自己的小家庭和丈夫的公司都打理得井井有條。然而正是這樣的過于追求完美，讓身邊的人感到壓力。</div></li><li class="media"><img src="43.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">鐘曉芹</h5>鐘曉芹是標(biāo)準(zhǔn)化的大多數(shù)，嫁給事業(yè)單位鐵飯碗的老公，自己保有一份普通工作，安心做一個(gè)平凡妻子。</div></li>
</ul>
</body>
</html>
效果如下：
