bootstrap5 如何创建多媒体对象——迹忆客-ag捕鱼王app官网

在bootstra5中使用媒体对象

bootstrap 媒体对象在版本 5 中已经停止支持了。但是，我们仍然可以使用 flex 和 margin 创建包含左对齐或右对齐媒体对象（如图像或视频）以及文本内容（如博客评论、推文等）的布局 。

    

        
    
    

        
jhon carter posted on january 10, 2021
        
excellent feature! i love it. one day i'm definitely going to put this bootstrap component into use and i'll let you know once i do.
    

上面示例的输出如下所示：

我们还可以创建媒体对象的其他变体。 将 .rounded 或 .rounded-circle 等图像修饰符类应用于图像来创建圆角或圆形图像。

    

        
    
    

        
jhon carter posted on january 10, 2021
        
excellent feature! i love it. one day i'm definitely going to put this bootstrap component into use and i'll let you know once i do.
    

上面示例的输出如下所示：

创建嵌套的媒体对象

媒体对象也可以嵌套在其他媒体对象中。 让我们看一个例子：

    

        
    
    

        
jiyik posted on january 10, 2021
        
excellent feature! i love it. one day i'm definitely going to put this bootstrap component into use and i'll let you know once i do.
        
        
        

            

                
            
            

                
onmpwposted on january 12, 2021
                
thanks, you found this component useful. don't forget to check out other bootstrap components as well. they're also very useful.
            
        
    

上面示例显示的嵌套媒体对象如下所示：

媒体对象对齐

我们还可以通过简单地调整 html 代码本身来更改内容以及媒体对象的水平对齐方式，如以下示例所示：

    

        
jiyik posted on january 10, 2021
        
excellent feature! i love it. one day i'm definitely going to put this bootstrap component into use and i'll let you know once i do.
    
    

        
    

上面示例显示的结果如下

除此之外，我们还可以使用 flexbox 实用程序类在内容块的中间或底部对齐图像或其他媒体对象，例如，可以使用 .align-self-center 类进行垂直居中对齐，使用 .align-self-end 类用于底部对齐。

默认情况下，媒体对象内的媒体是顶部对齐的。 看下面的例子：

    

        
    
    

        
顶部对齐媒体 - 这是默认情况
        
lorem ipsum dolor sit amet, consectetur adipiscing elit...