Bootstrap5 如何創建多媒體對象

来源:https://www.cnblogs.com/huaxiayuyi/archive/2022/10/02/16749239.html
-Advertisement-
Play Games

一、在Bootstra5中使用媒體對象 Bootstrap 媒體對象在版本 5 中已經停止支持了。但是,我們仍然可以使用 flex 和 margin 創建包含左對齊或右對齊媒體對象(如圖像或視頻)以及文本內容(如博客評論、推文等)的佈局 。 <!doctype html> <html lang="z ...


一、在Bootstra5中使用媒體對象


Bootstrap 媒體對象在版本 5 中已經停止支持了。但是,我們仍然可以使用 flex 和 margin 創建包含左對齊或右對齊媒體對象(如圖像或視頻)以及文本內容(如博客評論、推文等)的佈局 。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
        <br>
        <div class="d-flex">
            <div class="flex-shrink-0">
                <img src="img/xyz.png" class="rounded-circle" alt="">
            </div>
            <div class="flex-grow-1 ms-3">
                <h5>Bootstrap 5 <small class="text-muted"><i>[email protected]</i></small></h5>
                <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
 </div>
</body>
</html>

顯示的結果如下

我們還可以創建媒體對象的其他變體。

將 .rounded 或 .rounded-circle 等圖像修飾符類應用於圖像來創建圓角或圓形圖像。

<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="img/xyz.png" class="rounded-circle" alt="">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Bootstrap 5 <small class="text-muted"><i>[email protected]</i></small></h5>
        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
    </div>
</div>

顯示的結果如下

二、List group和媒體對象聯合使用


<ul class="list-group">
    <li class="list-group-item ">
        <a href="#">我是標題</a>
        <div class="d-flex mt-2">
            <div class="flex-shrink-0">
                <img src="img/xyz.png" class="rounded-circle" alt="">
            </div>
            <div class="flex-grow-1 ms-2">
                <span>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</span>
                <div class="mt-2">
                    <span><a href="#">用戶名</a></span>
                    <span>發佈於</span>
                    <span>2022/10/1</span>
                    <span><i class="bi bi-chat-right-text"></i></span>評論(0)&nbsp;&nbsp;</span>
                    <span><i class="bi bi-hand-thumbs-up"></i></span>點贊(0)</span>
                </div>
            </div>
        </div>
    </li>
</ul>

顯示的結果如下

三、創建嵌套的媒體對象


媒體對象也可以嵌套在其他媒體對象中。

<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Bootstrap 5 <small class="text-muted"><i>[email protected]</i></small></h5>
        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

        <!-- Nested media object -->
        <div class="d-flex mt-4">
            <div class="flex-shrink-0">
                <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">
            </div>
            <div class="flex-grow-1 ms-3">
                <h5>Bootstrap 5 <small class="text-muted"><i>[email protected]</i></small></h5>
                <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
            </div>
        </div>
    </div>
</div>

嵌套媒體對象顯示的結果如下

 

四、媒體對象對齊


我們還可以通過簡單地調整 HTML 代碼本身來更改內容以及媒體對象的水平對齊方式。

<div class="d-flex">
     <div class="flex-grow-1 me-3">
         <h5>Bootstrap 5 <small class="text-muted"><i>[email protected]</i></small></h5>
         <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
     </div>
     <div class="flex-shrink-0">
         <img src="img/xyz.png" alt="Sample Image">
     </div>
</div>

顯示的結果如下

除此之外,我們還可以使用 flexbox 實用程式類在內容塊的中間或底部對齊圖像或其他媒體對象,例如,可以使用 .align-self-center 類進行垂直居中對齊,使用 .align-self-end 類用於底部對齊。

預設情況下,媒體對象內的媒體是頂部對齊的。

<!--頂部對齊媒體-->
<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>頂部對齊媒體 <small class="text-muted"><i>- 這是預設對齊方式</i></small></h5>
        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
    </div>
</div>
<hr>

<!--居中對齊媒體-->
<div class="d-flex">
    <div class="flex-shrink-0 align-self-center">
        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>居中對齊媒體</h5>
        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
    </div>
</div>
<hr>

<!--底部對齊媒體-->
<div class="d-flex">
    <div class="flex-shrink-0 align-self-end">
        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>底部對齊媒體</h5>
        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
    </div>
</div>

 顯示的結果如下

來自跡*客

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在本人前一篇博文`《驅動開發:通過ReadFile與內核層通信》`詳細介紹瞭如何使用應用層`ReadFile`系列函數實現內核通信,本篇將繼續延申這個知識點,介紹利用`PIPE`命名管道實現應用層與內核層之間的多次通信方法。 ...
  • 標題是個大命題,場景其實有很多很多,而且千變萬化,一個帖子很難暢聊,以後會慢慢談。說一個最常見的場景。每個員工發張NFC卡,管理者給每人分配的卡裡寫入賬號和密碼,從而實現刷卡自動登錄客戶端系統。我看到這種需求的時候,做了一些研究,發現線上的免費解決方案根本就沒有,既然有需求沒雲端解決方案,我就自己做 ...
  • 簡述 類型:創建型 目的:實現對客戶端中對象族的平替。 對象族 一組對象。比如,華為的手機,筆記本,平板可以統稱為華為族。 我們藉以下案例來說說如何使用抽象工廠模式平替對象族。 優化案例 最初版 public interface Uploader { void upload(String fileN ...
  • 一 引入 項目有個新需求,當點擊或觸碰TextBox時,基於TextBox的相對位置,彈出一個自定義的Keyboard,如下圖所示: 二 KeyboardControl 先實現一個自定義的KeyboardControl,它繼承自Window。 Xaml代碼如下: <Window x:Class="W ...
  • 我們在創建條形碼時,如果以圖片的方式將創建好的條碼保存到指定文件夾路徑,可以在程式中直接載入圖片使用;已生成的條碼圖片,需要通過讀取圖片中的條碼信息,如條碼類型、條碼繪製區域在圖片中的四個頂點坐標位置等,可參考本文中的方法。 註:讀取時,也支持讀取二維碼類型。 引入dll 調用API:Spire.B ...
  • 大家好,我是痞子衡,是正經搞技術的痞子。今天痞子衡給大家介紹的是i.MXRT10xx系列MCU外接24MHz晶振的作用。 痞子衡之前寫過一篇關於時鐘引腳的文章 《i.MXRT1xxx系列MCU時鐘相關功能引腳的作用》,裡面簡單提及了外部晶振相關引腳的作用,但是並沒有詳細展開。最近在客戶支持中,有客戶 ...
  • MySQL基礎知識02 4.CRUD 資料庫CRUD語句:增(create)、刪(delete)、改(update)、查(Retrieve) Insert 語句 (添加數據) Update 語句(更新數據) Delete 語句(刪除數據) Select 語句 (查找數據) 指對資料庫中表記錄的操作( ...
  • MySQL基本知識 1.資料庫 1.1.創建資料庫 語法: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[,create_specification]...] create_specification: [DEFAULT] ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...