Bulma-media-object
提供：Dev Guides
ブルマ-メディアオブジェクト
説明
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.finddevguides.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レベルまでネストできます。
以下の簡単な例では、_nested media object_要素の使用方法について説明します-
<!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.finddevguides.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.finddevguides.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.finddevguides.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>以下の出力が表示されます-
