Media objectの書式:Bootstrapコードまとめ
|

Bootstrapのコードを少しずつまとめていきます。
今回はMedia objectの書式です。
Media objectとは「画像」「見出し」「本文」で構成されるコンテンツです。
Media objectの作成
Media objectを作成する際に使用するclassは以下の表のとおりです。
要素 | class | 概要 |
---|---|---|
div | media | media objectの範囲 |
a | media-left | 画像を左寄せ |
a | media-right | 画像を右寄せ |
div | media-body | 文章の範囲 |
h1~h6 | media-heading | 文章の見出し |
HTML
<div class="media"> <a href="#" class="media-left"> <img src="images/nasu.jpg"> </a> <div class="media-body"> <h3 class="media-heading">ナス</h3> ナス(茄子、茄、ナスビ、学名:Solanum melongena)はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。 </div> </div> <div class="media"> <a href="#" class="media-left"> <img src="images/tomato.jpg"> </a> <div class="media-body"> <h3 class="media-heading">トマト</h3> トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。 </div> </div>
ブラウザでの表示
画像を右側に配置する
見出しと文章を先にし、画像部分を後に記述します。
a要素をclass「media-right」に変更します。
HTML
<div class="media"> <div class="media-body"> <h3 class="media-heading">ナス</h3> ナス(茄子、茄、ナスビ、学名:Solanum melongena)はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。 </div> <a href="#" class="media-left"> <img src="images/nasu.jpg"> </a> </div> <div class="media"> <div class="media-body"> <h3 class="media-heading">トマト</h3> トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。 </div> <a href="#" class="media-right"> <img src="images/tomato.jpg"> </a> </div>
ブラウザでの表示
Media listの作成
ulとli要素を使ってリスト形式のMedia objectを作成することも可能です。
ul要素にclass「media-list」、li要素にclass「media」を適用します。
HTML
<ul class="media-list"> <li class="media"> <a href="#" class="media-left"> <img src="images/nasu.jpg"> </a> <div class="media-body"> <h3 class="media-heading">ナス</h3> ナス(茄子、茄、ナスビ、学名:Solanum melongena)はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。 </div> </li> <li class="media"> <a href="#" class="media-left"> <img src="images/tomato.jpg"> </a> <div class="media-body"> <h3 class="media-heading">トマト</h3> トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。 </div> </li> </ul>
ブラウザでの表示
Media listのネスト(入れ子)
Media listの中にMedia objectを記述して、階層構造を作ります。
HTML
<ul class="media-list"> <li class="media"> <a href="#" class="media-left"> <img src="images/yasai.jpg"> </a> <div class="media-body"> <h3 class="media-heading">世界の野菜</h3> 野菜(やさい、英: vegetable)は、食用の草本植物の総称。水分が多い草本性で食用となる植物を指す。主に葉や根、茎(地下茎を含む)、花・つぼみ・果実を副食として食べるものをいう。 <div class="media"> <a href="#" class="media-left"> <img src="images/nasu.jpg"> </a> <div class="media-body"> <h3 class="media-heading">ナス</h3> ナス(茄子、茄、ナスビ、学名:Solanum melongena)はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。 </div> </div> <div class="media"> <a href="#" class="media-left"> <img src="images/tomato.jpg"> </a> <div class="media-body"> <h3 class="media-heading">トマト</h3> トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。 </div> </div> </div> </li> </ul>