Impossibile capire come utilizzare il componente di anteprima Bootstrap

Question

Sto tentando di utilizzare il componente di anteprima di Bootstrap per visualizzare un elenco di categorie di prodotti con immagini di anteprima. Voglio che gli utenti facciano clic sulle miniature per andare alla categoria.

La documentazione sul sito Bootstrap fornisce questo markup di base:

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

Googled per informazioni su holder.js, hanno trovato la pagina ufficiale holder.js, scaricato la versione zip, mettere i file in la cartella js del mio sito e collegata al file holder.js con un tag script nel mio HTML.

Ma come/dove nel markup devo specificare quali file di immagine utilizzare?

Devo anche includere un nome di categoria sotto ogni immagine, probabilmente con un tag span o h4. Ciò dovrebbe fare parte del blocco cliccabile.

UPDATE: Giusto per chiarire, in realtà sono solo gli aspetti di stile del componente di anteprima che voglio utilizzare. Quindi, forse posso ottenere questo risultato con il componente thumbnails e il markup HTML associato, e tralasciare holder.js del tutto?

Questo è il tipo di HTML mark-up vorrei utilizzare:

<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 è solo immagine quadro segnaposto sulla base di javascript e immagini in linea. Viene utilizzato da bootstrap per creare immagini di esempio. Non c'è bisogno in questa libreria sulla produzione. Così, invece di usare data-src attributi e holder.js biblioteca si dovrebbe usare l'attributo src e markup come:

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

Si può anche essere necessario disattivare il testo sottolineare nella didascalia dell'immagine. Basta usare i CSS:

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

Esempio: http://jsfiddle.net/M3fpA/46/