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


この章では、Bootstrap のサムネイルについて説明します。ほとんどのサイトでは、画像、ビデオ、テキストなどをグリッド内にレイアウトする必要があります。 Bootstrap では、サムネイルを使用してこれを簡単に実行できます。 Bootstrap を使用してサムネイルを作成する手順は次のとおりです。

  • 画像の周囲にクラス .thumbnail を含む <a> タグを追加します。

  • これにより、4 ピクセルのパディングと灰色の境界線が追加されます。

  • マウスを画像の上に置くと、画像の輪郭がアニメーションします。

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

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩略图</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
</div>

</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします


缩略图

から追加コンテンツの定義

基本的なサムネイルができたので、タイトル、段落、ボタンなどのさまざまな HTML コンテンツをサムネイルに追加できます。具体的な手順は次のとおりです:

  • クラス .thumbnail の <a> タグを <div> に変更します。

  • その <div> 内に必要なものを追加できます。これは <div> であるため、サイズ変更にはデフォルトのスパンベースの命名規則を使用できます。

  • 複数の画像をグループ化する場合は、各リスト項目が左側に表示される順序なしリストに画像を配置します。

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

インスタンス

<div class="row">
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
         <div class="caption">
            <h3>缩略图标签</h3>
            <p>一些示例文本。一些示例文本。</p>
            <p>
               <a href="#" class="btn btn-primary" role="button">
                  按钮
               </a> 
               <a href="#" class="btn btn-default" role="button">
                  按钮
               </a>
            </p>
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
         <div class="caption">
            <h3>缩略图标签</h3>
            <p>一些示例文本。一些示例文本。</p>
            <p>
               <a href="#" class="btn btn-primary" role="button">
                  按钮
               </a> 
               <a href="#" class="btn btn-default" role="button">
                  按钮
               </a>
            </p>
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
         <div class="caption">
            <h3>缩略图标签</h3>
            <p>一些示例文本。一些示例文本。</p>
            <p>
               <a href="#" class="btn btn-primary" role="button">
                  按钮
               </a> 
               <a href="#" class="btn btn-default" role="button">
                  按钮
               </a>
            </p>
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="../style/images/kittens.jpg" 
         alt="通用的占位符缩略图">
         <div class="caption">
            <h3>缩略图标签</h3>
            <p>一些示例文本。一些示例文本。</p>
            <p>
               <a href="#" class="btn btn-primary" role="button">
                  按钮
               </a> 
               <a href="#" class="btn btn-default" role="button">
                  按钮
               </a>
            </p>
         </div>
      </div>
   </div>
</div>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

結果は次のとおりです:

自定义缩略图