Bootstrap Uygulama Örnekleri-Thumbnails Küçük Resim Uygulamaları

Bootstrapta (thumbnails) küçük resimleri kullanabileceğimiz güzel bir özellik var. Bu özelliği Bootstrapın Thumbnail Compeneti sayesinde kolayca resim, video ve  metinleri web sayfasında göstermek mümkün olmaktadır.

Görüntüleri aşağıdaki;

                . Küçük resim (Thumbnail) görüntüsü

              . Daire (circle) tipi görüntü

                . Köşeleri yuvarlatılmış (rounded) görüntü

                                                                                                                                                   

şeklinde sorunsuzca kullanabiliyoruz.

Özellikle firmaların ürün tanıtımını bootstrapın thumbnails kompeneti ile çok rahat bir şekilde yapabileceği çok güzel bir uygulama.

Örnek Kodlar:

Thumbnail Görüntüsü:

<div class="row">

<div class="col-xs-6 col-md-3">

<a href="#" class="thumbnail">

<img src="..." alt="...">

</a>

</div>

...

</div>

Daire (circle) görüntüsü:

<div class="row">

<div class="col-xs-6 col-md-3">

<a href="#" class="circle">

<img src="..." alt="...">

</a>

</div>

...

</div>

Köşeleri yuvarlatılmış (rounded) görüntü:

<div class="row">

  <div class="col-xs-6 col-md-3">

    <a href="#" class="rounded">

      <img src="..." alt="...">

    </a>

  </div>

...

</div>

Ayrıca küçük resmin içine başlık, düğme veya paragraf gibi içerikler ekleyerek özelleştirmek mümkündür.

Örnek Kodlar;

<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="..." alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>...</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>

GÖRÜNTÜLE:

KAYNAK KODLARI İNDİR:

Bu konuda ki anlatımı görsel olarak aşağıda ki  videodan da takip edebilirsiniz.