Nie mogę się dowiedzieć, jak użyć składnika miniatur Bootstrap

Question

Próbuję użyć składnika miniatury Bootstrap, aby wyświetlić listę kategorii produktów z miniaturami obrazów. Chcę, aby użytkownicy kliknęli miniatury, aby przejść do kategorii.

Dokumentacja na stronie Bootstrap zapewnia tę podstawową znaczników:

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

Mam google informacji na temat holder.js, znalazł stronę oficjalną holder.js, pobrać wersję zip, umieścić pliki w folder js mojej witryny i link do pliku hold.js z tagiem skryptu w moim kodzie HTML.

Ale jak/gdzie w znaczniku mam określić, jakich plików graficznych użyć?

Muszę również podać nazwę kategorii pod każdym obrazem, prawdopodobnie ze znacznikiem zakresu lub h4. Musiałoby to stanowić część klikalnego bloku.

AKTUALIZACJA: Po prostu, aby wyjaśnić, to naprawdę tylko aspekty stylizacji składnika miniatur, które chcę wykorzystać. Być może uda mi się to osiągnąć dzięki komponentowi miniaturek i powiązanym znacznikom HTML i całkowicie pominąć plik holder.js?

Jest to rodzaj HTML dopłaty chciałbym używać:

<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 jest tylko obraz zastępczy framework oparty na JavaScript i inline obrazów. Jest używany przez bootstrap do tworzenia przykładowych obrazów. W tej bibliotece nie ma potrzeby tworzenia. Więc zamiast korzystania data-src atrybut i holder.js bibliotekę należy użyć atrybutu src i znaczników takich jak:

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

Można również trzeba wyłączyć podkreślić tekst w podpisie obrazu. Wystarczy użyć CSS:

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

Przykład: http://jsfiddle.net/M3fpA/46/