Bootstrapでサムネイルを作成する

HTML・CSS

Bootstrapで比較的簡単にサムネイルを作ることができます。
参考ページ:Thumbnails

thumbnail

imgタグを囲んだaタグ(リンクなしのときdiv)のclassに”thumbnail”を設定するとサムネイル風の表示になります。サイズの設定は、divタグのclassにデバイスの合わせて(col-xs-数字、col-md-数字、col-sm-数字)設定します。

※サムネイル画像をいくつか並べて表示するようなときは、<div class=”row”></div>の中に下のコードを記述します。

グリッド(col-md-、col-xs-):Grid option

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="画像.png" alt="">
    </a>
 </div>

サムネイル画像と文章を一緒に表示したいときは、<div class=”thumbnail”>の子要素で<div class=”caption”>を追加します。

<div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="画像.png" alt="">
      <div class="caption">
        <h3>○○ラーメン</h3>
        <p>ラーメン・・・・・・・・・・美味かった</p>
      </div>
    </div>
 </div>

thumbnail1

スポンサーリンク

コメント

タイトルとURLをコピーしました