4-2 縮圖列表

1. 預設樣式

   <div class="row">
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
        <img src="http://fakeimg.pl/800x600/">
       </a>
     </div>
   </div>

    

2. 自定義樣式

   <div class="row">
    
     <div class="col-sm-6 col-md-4">
       <div class="thumbnail">
         <img src="http://fakeimg.pl/800x600/" alt="假圖">
         <div class="caption">
           <h3>Thumbnail label</h3>
           <p>
             Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
           </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>
    
     <div class="col-sm-6 col-md-4">
       <div class="thumbnail">
         <img src="http://fakeimg.pl/800x600/" alt="假圖">
         <div class="caption">
           <h3>Thumbnail label</h3>
           <p>
             Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
           </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>
    
     <div class="col-sm-6 col-md-4">
       <div class="thumbnail">
         <img src="http://fakeimg.pl/800x600/" alt="假圖">
         <div class="caption">
           <h3>Thumbnail label</h3>
           <p>
             Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
           </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>
    
   </div>

    

3. 如果要響應，記得用容器 .container 、 .container-fluid

4. 單獨圖片要響應，請用 「.img-responsive」

5. 栅格参数

   通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

   	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
   栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
   .container 最大宽度	None （自动）	750px	970px	1170px
   类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
   列（column）数	12
   最大列（column）宽	自动	~62px	~81px	~97px
   槽（gutter）宽	30px （每列左右均有 15px）
   可嵌套	是
   偏移（Offsets）	是
   列排序	是