Bootstrap minik resim bileşenini nasıl kullanacağımı anlayamıyorum

Question

Küçük resimlerle ürün kategorileri listesini görüntülemek için Bootstrap'ın küçük resim bileşenini kullanmaya çalışıyorum. Kullanıcıların kategoriye gitmek için küçük resimleri tıklatmasını istiyorum.

Bootstrap web sitesinde belgeler bu temel işaretlemeyi sağlar

:

<ul class="thumbnails"> 
    <li class="span4"> 
     <a href="#" class="thumbnail"> 
      <img data-src="holder.js/300x200" alt=""> 
     </a> 
    </li> 
    ... 
</ul> 

Ben holder.js hakkında bilgi almak için google'dan ettik dosyaları koymak, resmi holder.js sayfa bulundu zip sürümü indirilebilir sitemin js klasörü ve HTML'mde bir komut dosyası etiketi ile holder.js dosyasına bağlandı.

Ancak hangi resim dosyalarını kullanacağımı işaretlemede nasıl/nerede belirtirim?

Ayrıca, her bir resmin altında muhtemelen bir span veya h4 etiketiyle bir kategori adı eklemem gerekiyor. Bunun tıklanabilir bloğun bir parçasını oluşturması gerekir.

GÜNCELLEME: Netleştirmek gerekirse, gerçekten kullanmak istediğim küçük resim bileşeninin stil yönleridir. Belki de bunu küçük resimlerle ve ilişkili HTML biçimlendirmesiyle başarabilirim ve holder.js'yi tamamen mi bırakabilirim?

<ul class="thumbnails"> 
    <li class="span4"> 
     <a href="/category-name/" class="thumbnail"> 
      <img src="/assets/images/filename.jpg" alt=""> 
      <span>Category name</span> 
     </a> 
    </li> 
    ... 
</ul> 

Answer 1

Holder.js sadece görüntü yer tutucu çerçevesi javascript ve satır içi görüntüleri dayalı:

Bu Kullanmak istediğiniz HTML mark-up türüdür. Örnek görüntüler oluşturmak için bootstrap tarafından kullanılır. Bu kütüphanede üretime gerek yok. Bunun yerine data-src niteliği ve holder.js kütüphanelerini kullanmak size src özelliğini kullanabilir ve benzeri biçimlendirme olmalıdır: Ayrıca metin resim yazısı altını devre dışı bırakmanız gerekebilir olabilir

<ul class="thumbnails"> 
    <li class="span4"> 
     <a class="thumbnail" href="#"> 
      <img src="/image/path.jpg" alt="My Image" />     
      <span class="caption">This is my image</span> 
     </a> 
    </li> 
</ul> 

.

a.thumbnail:hover { 
    text-decoration: none; 
} 

Örnek: kullanılır holder.js neyi netleştirilmesi için http://jsfiddle.net/M3fpA/46/