Bootstrap-媒体对象 - 芒果文档

📌 相关文章

📜 Bootstrap-媒体对象

📅 最后修改于: 2020-10-27 06:15:54 🧑 作者: Mango

本章讨论媒体对象。这些是抽象的对象样式，用于构建各种类型的组件(例如博客评论，推文等)，这些组件在文本内容旁边具有左对齐或右对齐的图像。媒体对象的目的是使用于开发这些信息块的代码大大缩短。

媒体对象的目标(轻标记，易于扩展)是通过将类应用于一些简单标记来实现的。媒体对象有两种形式-

.media-此类允许将媒体对象(图像，视频和音频)浮动到内容块的左侧或右侧。
.media-list-如果要准备一个列表，其中项目将成为无序列表的一部分，请使用类。对于评论主题或文章列表很有用。

让我们在下面看到默认媒体对象的示例-


   
      
   
   
   
      Media heading
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   



   
      
   
   
   
      Media heading
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      
         
            
         
         
         
            Media heading
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.

让我们看一个媒体列表的例子-

现场演示


   
      
         
      
      
      
         Media heading
            
         
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         
         
         
         
            
               
            
            
            
               Nested media heading
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               
               
                  
                     
                  
                  
                  
                     Nested media heading
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  
               
            
         
         
         
         
            
               
            
            
            
               Nested media heading
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            
         
      
   
   
   
      
         
      
      
      
         Media heading
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.