免費(fèi)AI編程助手
Bootstrap 4 多媒體對(duì)象
2018-06-02 10:52 更新
在Bootstrap4中，提供了很好的方式來(lái)處理圖片或視頻等多媒體對(duì)象和內(nèi)容的布局。其應(yīng)用場(chǎng)景有博客評(píng)論、微博等等。
基礎(chǔ)多媒體對(duì)象創(chuàng)建
要?jiǎng)?chuàng)建一個(gè)多媒體對(duì)象，可以在容器元素上添加 .media 類，然后將多媒體內(nèi)容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內(nèi)邊距等效果:
實(shí)例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>多媒體對(duì)象</h2>
<p>使用 .media 和 .media-body 類創(chuàng)建多媒體對(duì)象:</p>
<div class="media border p-3">
<img src="http://hgci.cn/attachments/cover/cover_bootstrap4.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>bootstrap4教程</h4>
<p>Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開發(fā)的開源工具集。</p>
</div>
</div>
</div>
</body>
</html>多媒體對(duì)象圖片顯示在右邊
如果你想將頭像圖片顯示在右側(cè)，可以在 .media-body 容器后添加圖片:
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>圖片顯示在右邊</h2>
<p>如果你想將頭像圖片顯示在右側(cè)，可以在 .media-body 容器后添加圖片:</p>
<div class="media border p-3">
<div class="media-body">
<h4>bootstrap4教程</h4>
<p>Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開發(fā)的開源工具集。</p>
</div>
<img src="http://hgci.cn/attachments/cover/cover_bootstrap4.jpg" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
</div>
</body>
</html>定位多媒體圖片位置
我們可以使用 align-self-* 相關(guān)類來(lái)設(shè)置多媒體對(duì)象的圖片顯示位置：
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>多媒體對(duì)象</h2>
<p>我們可以使用 align-self-* 相關(guān)類來(lái)設(shè)置多媒體對(duì)象的圖片顯示位置：</p><br>
<!-- 頭部 -->
<div class="media">
<img src="http://hgci.cn/attachments/cover/cover_bootstrap4.jpg" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>頭部 -- bootstrap4教程</h4>
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
</div>
</div>
<!-- 居中 -->
<div class="media mt-3">
<img src="http://hgci.cn/attachments/cover/cover_bootstrap4.jpg" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>居中 -- bootstrap4教程</h4>
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
</div>
</div>
<!-- 底部 -->
<div class="media mt-3">
<img src="http://hgci.cn/attachments/cover/cover_bootstrap4.jpg" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>底部 -- bootstrap4教程</h4>
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
<p>Bootstrap4 目前是 Bootstrap 的最新版本
</div>
</div>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：