Bootstrap Image Gallery

Bootstrap grid sistemi ve .thumbnail classı kullanarak image gallery oluşturulabilir.

Şekil *.1: 3 sütunlu grid sistemi ve thumnail ile oluşturulan Image Gallery örneği

<div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p> 
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p> 
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

Şekil *.2: Image Gallery örneği sonucu ortaya çıkan sonuç

 

adsiz

 

Ramazan Bıyıkcı

Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende marka ve kurumların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yapmaktayım. Bir çok markanın dijital pazarlama alanındaki online faaliyetlerini sürdürmekteyim. Farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim.

Yorum Yap

Ramazan Bıyıkcı

"Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende markaların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yaparak ve bir çok markanın dijital pazarlama alanındaki faaliyetlerini sürdürmekteyim. Farklı görevler ve farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim."