Bootstrap - Küçük resimler

Bu bölümde, Bootstrap küçük resimleri anlatılmaktadır. Birçok site, görüntüleri, videoları, metinleri vb. Bir ızgaraya yerleştirmenin bir yoluna ihtiyaç duyar ve Bootstrap bunu küçük resimlerle yapmanın kolay bir yolunu sunar. Bootstrap kullanarak küçük resimler oluşturmak için -

• Sınıfıyla bir <a> etiketi ekleyin .thumbnail bir görüntünün etrafında.

• Bu, dört piksel dolgu ve gri bir kenarlık ekler.

• Fareyle üzerine gelindiğinde, animasyonlu bir parıltı görüntünün ana hatlarını çizer.

Aşağıdaki örnek, varsayılan bir küçük resmi göstermektedir -

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

Özel İçerik Ekleme

Artık temel bir küçük resme sahip olduğumuza göre, küçük resimlere başlıklar, paragraflar veya düğmeler gibi her türlü HTML içeriğini eklemek mümkün. Aşağıdaki adımları izleyin -

• Bir sınıfına sahip <a> etiketini değiştirin. .thumbnail bir <div>.

• Bunun içine <div> ihtiyacınız olan her şeyi ekleyebilirsiniz. Bu bir <div> olduğundan, boyutlandırma için varsayılan yayılma temelli adlandırma kuralını kullanabiliriz.

• Birden çok görüntüyü gruplamak istiyorsanız, bunları sırasız bir listeye yerleştirin ve her liste öğesi sola kayar.

Aşağıdaki örnek bunu göstermektedir -

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