Lakaran kecil Bootstrap


Bab ini akan menerangkan lakaran kecil Bootstrap. Kebanyakan tapak memerlukan imej, video, teks, dll. untuk dibentangkan dalam grid. Bootstrap menyediakan cara mudah untuk melakukan ini melalui lakaran kecil. Langkah-langkah untuk membuat lakaran kenit menggunakan Bootstrap adalah seperti berikut:

  • Tambah teg <a> dengan kelas .thumbnail di sekeliling imej.

  • Ini akan menambah empat piksel pelapik dan jidar kelabu.

  • Apabila tetikus dituding di atas imej, garis besar imej akan dianimasikan.

Contoh berikut menunjukkan lakaran kecil lalai:

Instance

<!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>

Jalankan contoh »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian


缩略图

Tambah kandungan tersuai

Sekarang kami mempunyai lakaran kecil asas, kami boleh menambahkan pelbagai kandungan HTML pada lakaran kecil, seperti tajuk, perenggan atau butang. Langkah-langkah khusus adalah seperti berikut:

  • Tukar teg <a> dengan kelas .thumbnail kepada <div>.

  • Dalam <div> anda boleh menambah apa sahaja yang anda mahu. Memandangkan ini ialah <div>, kami boleh menggunakan konvensyen penamaan berasaskan rentang lalai untuk mengubah saiz.

  • Jika anda ingin mengumpulkan berbilang imej, letakkannya dalam senarai tidak tersusun dengan setiap item senarai terapung ke kiri.

Contoh berikut menunjukkan ini:

Instance

<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>

Instance Running»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Keputusannya adalah seperti berikut:

自定义缩略图