Bootstrap 媒体对象的使用
bootstrapweb developmentcss framework更新于 2026/2/13 17:16:17
媒体对象可以显著缩短开发信息块的代码。
您可以尝试运行以下代码来实现媒体对象
示例
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "https://www.cainiaomax.com/sql/images/sql-mini-logo.jpg" alt = "SQL"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> 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. </div> </div> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "https://www.cainiaomax.com/sql/images/sql-mini-logo.jpg" alt = "SQL"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> 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. <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "https://www.cainiaomax.com/sql/images/sql-mini-logo.jpg" alt = "SQL"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> 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. </div> </div> </div> </div> </body> </html>
