Bulma 媒体对象
说明
Bulma 提供媒体对象来构建各种类型的组件，如博客评论、推文等，这些组件定义了左对齐或右对齐的图像以及文本内容。
让我们通过使用
article 标签中的
media 类来创建一个简单的媒体对象元素示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Media Object Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Media Object
</span>
<br>
<br>
<article class = "media">
<figure class = "media-left">
<p class = "image is-64x64">
<img src = "https://www.lidihuo.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong>
<small>@wsmith</small>
<small>45m</small>
<br>
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.
</p>
</div>
<nav class = "level is-mobile">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small">
<i class = "fas fa-reply"></i>
</span>
</a>
<a class = "level-item">
<span class = "icon is-small">
<i class = "fas fa-retweet"></i>
</span>
</a>
<a class = "level-item">
<span class = "icon is-small">
<i class = "fas fa-heart"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</section>
</body>
</html>
执行上面的代码，你会得到下面的输出-
嵌套媒体对象
您可以将媒体对象嵌套在另一个媒体对象中，最多 3 层。
下面的简单示例描述了
嵌套媒体对象元素的用法-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Media Object Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Nested Media Object
</span>
<br>
<br>
<article class = "media">
<figure class = "media-left">
<p class = "image is-64x64">
<img src = "https://www.lidihuo.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong> <small>@wsmith</small> <small>45m</small>
<br>
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.
</p>
</div>
<nav class = "level is-mobile">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-reply"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-retweet"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-heart"></i></span>
</a>
</div>
</nav>
<article class = "media">
<figure class = "media-left">
<p class = "image is-48x48">
<img src = "https://www.lidihuo.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Tom Hanks</strong>
<br>
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.
<br>
<small><a>Like</a> . <a>Reply</a> . 3 hrs</small>
</p>
</div>
<article class = "media">
<figure class = "media-left">
<p class = "image is-48x48">
<img src = "https://www.lidihuo.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Johnny Depp</strong>
<br>
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.
<br>
<small><a>Like</a> . <a>Reply</a> . 5 hrs</small>
</p>
</div>
</div>
</article>
</div>
</article>
</div>
</article>
</section>
</body>
</html>
它显示以下输出-
