Bootstrap 4 多媒體對象
Bootstrap 4 多媒體對象
Bootstrap 提供了很好的方式來處理多媒體對象(圖片或視頻)和內容的布局。應用場景有博客評論、微博等:
基礎多媒體對象
要創建一個多媒體對象,可以在容器元素上添加 .media 類,然後將多媒體內容放到子容器上,子容器需要添加 .media-body 類,然後添加外邊距,內邊距等傚果:
實例
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
</div>
嘗試一下 »
多媒體對象嵌套
多媒體對象可以多個嵌套(一個多媒體對象中包含另外一個多媒體對象)
要嵌套多媒體對象,可以把新的 .media 容器放到 .media-body 容器中:
實例
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
<div class="media p-3">
<img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
</div>
</div>
</div>
嘗試一下 »
多媒體對象圖片顯示在右邊
如果你想將頭像圖片顯示在右側,可以在 .media-body 容器後添加圖片:
實例
<div class="media border p-3">
<div class="media-body">
<h4>教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
<img src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
嘗試一下 »
定位多媒體圖片位置
我們可以使用 align-self-* 相關類來設置多媒體對象的圖片顯示位置:
實例
<!-- 頭部 -->
<div class="media">
<img src="https://static./images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>頭部 -- 教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
</div>
<!-- 居中 -->
<div class="media">
<img src="https://static./images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>居中 -- 教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
</div>
<!-- 底部 -->
<div class="media">
<img src="https://static./images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>底部 -- 教程</h4>
<p>學的不僅是技術,更是夢想!!!</p>
</div>
</div>
嘗試一下 »