Thumbnails(サムネイル)
外枠付きのサムネイル表示を行います。
また、説明文やボタンをセットで表示するカスタム表示もあるので、商品メニューのようなコンテンツも作成できます。
サンプル01-サムネイル表示
サンプル02-カスタム表示
コーディング
枠内に画像・タイトル・説明文・ボタン等を表示します
03-15行目
カスタム表示するコンテンツを.thumbnailで囲みます
05-14行目
画像以外のコンテンツ(タイトル・説明文・ボタン等)を.captionで囲みます
サンプル03-メモや注意点


メモや注意点
・.thumbnailで表示される画像は自動的に縮小されますが、これはサムネイルを表示する領域の横幅を基準に縮小されます
また外枠は表示される領域の内側に決まった余白で描画されています
なのでサムネイルを表示する領域が元画像の横幅より大きい場合、上記1つ目のサムネイルのように枠と画像が不自然に表示されてしまいます
外枠の仕様なので間違いではありませんが見栄えがよくありません
横幅を指定できる.rowや.col-xxを使用して、綺麗に見れるように配置してください
・外枠をフォーカス表示したくない場合には、<a>ではなく<span>や<div>を使用してください
上記2つ目のサムネイルには<span>を使用しているのでフォーカスが表示されません