スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

サムネール(囲み記事)の書式:Bootstrapコードまとめ



サムネール(囲み記事)の書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はサムネール(囲み記事)の書式です。

背景色が無く枠線で囲み記事を作ります。画像を含む囲み記事の作成などに用います。

サムネール(囲み記事)の作成

全体をdiv要素にしてclass「thumbnail」を適用、記事にclass「caption」を適用します

<div class="thumbnail">
  <img src="images/tomato002.jpg">
    <div class="caption">
     <h3>トマト</h3>
     <p>トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。</p>
  </div>
</div>

ブラウザでの表示

サムネール(囲み記事)の作成