top
Loading...
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>

嘗試一下 »
北斗有巢氏 有巢氏北斗