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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...