Bootstrap

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

 

Yorum Yap