Bootstrap-thumbnails

ブートストラップ-サムネイル

この章では、Bootstrapサムネイルについて説明します。 多くのサイトでは、画像、ビデオ、テキストなどをグリッドにレイアウトする方法が必要です。Bootstrapには、サムネイルで簡単にこれを行う方法があります。 Bootstrapを使用してサムネイルを作成するには-

• 画像の周りに .thumbnail のクラスを持つ<a>タグを追加します。
• これにより、4ピクセルのパディングとグレーの境界線が追加されます。
• ホバーすると、アニメーション化されたグローが画像の輪郭を描きます。

次の例は、デフォルトのサムネイルを示しています-

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>

   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>

   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>

   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

カスタムコンテンツの追加

基本的なサムネイルができたので、見出し、段落、ボタンなど、あらゆる種類のHTMLコンテンツをサムネイルに追加できます。 以下の手順に従ってください-

• .thumbnail のクラスを持つ<a>タグを<div>に変更します。
• その<div>内に、必要なものを追加できます。 これは<div>であるため、サイズ変更にはデフォルトのスパンベースの命名規則を使用できます。
• 複数の画像をグループ化する場合は、それらを順序付けられていないリストに配置すると、各リスト項目が左に浮かびます。

次の例はこれを示しています-

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>

      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>

         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a>

            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>

   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>

      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>

         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a>

            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>

   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>

      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>

         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a>

            <a href = "#" class = "btn btn-default" role =" button">
               Button
            </a>
         </p>
      </div>
   </div>

   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>

      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>

         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a>

            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
</div>