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

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

次のクラスの<a>タグを追加します .thumbnail 画像の周り。
これにより、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コンテンツをサムネイルに追加できます。以下の手順に従ってください-

次のクラスを持つ<a>タグを変更します .thumbnail <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>