首頁  >  文章  >  web前端  >  bootstrap實現的媒體物件是什麼

bootstrap實現的媒體物件是什麼

WBOY
WBOY原創
2022-08-22 16:42:111627瀏覽

bootstrap媒體物件是一類具有特殊版式的元件,用於設計圖文混排的效果;bootstrap提供了兩種類型的媒體對象,分別是媒體和媒體列表,媒體用於展示單一對象,媒體清單用於展示多個對象。

bootstrap實現的媒體物件是什麼

本教學操作環境:Windows10系統、bootstrap5版、DELL G3電腦

bootstrap實作的媒體物件是什麼

媒體物件是一類具有特殊版式的元件,用來設計圖文混排的效果,它們多是由一幅向左或向右浮動的圖像和一些文字構成。

Bootstrap提供了兩種類型的媒體物件:媒體(.media)和媒體清單(.media-list)。媒體用來展示單一對象,媒體列表用來展示多個對象。

媒體

預設情況下,媒體由一個向左或向右浮動的媒體物件(如,圖像、視訊、音訊等)和媒體內容構成。一個媒體中,可以嵌套另一個媒體。

在HTML結構中,一個媒體由3 部分組成:.media 創建媒體容器,.media-object 創建媒體對象,.media-body 創建媒體內容(其中,由.media-heading 創建媒體的標題)。如:

Media heading

...
...

媒體物件一般是成組出現,一組媒體物件一般包括以下幾部分:

1、媒體物件的容器:用來容納媒體物件的所有內容,容器上需使用類別名稱.media

2、媒體物件的物件:一般是圖片,需使用類別.media-object

3、媒體物件的主體:就是媒體物件的主體內容,可以是任何元素,需使用類別.media-body

4、媒體物件的標題:用來描述媒體物件的一個標題,需使用類別.media-heading

此外, bootstrap框架中常使用類別.pull-left和.pull-right來控制媒體物件中的物件浮動方式

相關推薦:bootstrap教學

以上是bootstrap實現的媒體物件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn