Bootstrap4 多媒體對象

Bootstrap 提供了很好的方式來處理多媒體對象（圖片或視頻）和內(nèi)容的布局。應(yīng)用場景有博客評論、微博等:

基礎(chǔ)多媒體對象

要創(chuàng)建一個多媒體對象，可以在容器元素上添加 .media 類，然后將多媒體內(nèi)容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內(nèi)邊距等效果:

實例

<
div

class
=
"
media border p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想！?。?br /> p
>

div
>

div
>

嘗試一下 ?

多媒體對象嵌套

多媒體對象可以多個嵌套（一個多媒體對象中包含另外一個多媒體對象）

要嵌套多媒體對象，可以把新的 .media 容器放到 .media-body 容器中:

實例

<
div

class
=
"
media border p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。?！
p
>

<
div

class
=
"
media p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
Jane Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:45px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。?！
p
>

div
>

div
>

div
>

div
>

嘗試一下 ?

多媒體對象圖片顯示在右邊

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

實例

<
div

class
=
"
media border p-3
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。?！
p
>

div
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
ml-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

div
>

嘗試一下 ?

定位多媒體圖片位置

我們可以使用 align-self-* 相關(guān)類來設(shè)置多媒體對象的圖片顯示位置：

實例

<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-start mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
頭部 -- 菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。。?br /> p
>

div
>

div
>



<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-center mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
居中 -- 菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。?！
p
>

div
>

div
>



<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-end mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
底部 -- 菜鳥教程
h4
>

<
p
>
學(xué)的不僅是技術(shù)，更是夢想?。?！
p
>

div
>

div
>

嘗試一下 ?

網(wǎng)站名稱：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4多媒體對象
網(wǎng)站URL：http://www.dlmjj.cn/article/dhpsceh.html