Kann nicht herausfinden, wie Bootstrap thumbnail Komponente

Question

Ich versuche, Bootstrap Thumbnail-Komponente verwenden, um eine Liste der Produktkategorien mit Miniaturansichten anzuzeigen. Ich möchte, dass Nutzer auf die Miniaturbilder klicken, um zur Kategorie zu gelangen.

Die Dokumentation auf der Bootstrap Website dieses grundlegende Markup bietet:

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

ich für Informationen über holder.js gegoogelt habe, fand die offizielle holder.js Seite, die Zip-Version heruntergeladen haben, setzen Sie die Dateien in Der js-Ordner meiner Website und die Datei halter.js mit einem Skript-Tag in meinem HTML-Code.

Aber wie/wo im Markup gebe ich an welche Bilddateien zu verwenden?

Ich muss auch einen Kategorienamen unter jedem Bild, wahrscheinlich mit einem span oder h4-Tag. Dies müsste Teil des anklickbaren Blocks sein.

UPDATE: Nur um zu verdeutlichen, es ist wirklich nur die Styling-Aspekte der Thumbnail-Komponente, die ich verwenden möchte. Vielleicht kann ich das mit der Thumbnails-Komponente und dem zugehörigen HTML-Markup erreichen und holder.js ganz weglassen?

Dies ist die Art von HTML-Mark-up würde ich gerne verwenden:

<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 ist nur Rahmen Bild-Platzhalter auf Basis von JavaScript und Inline-Bildern. Es wird von Bootstrap verwendet, um Beispielbilder zu erstellen. In dieser Bibliothek ist keine Produktion erforderlich. Anstatt also mit data-src Attribute und holder.js Bibliothek sollten Sie src Attribut verwenden und Markup wie:

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

Sie auch Text in Bildbeschriftung unterstreichen müssen, können deaktivieren. Verwenden Sie einfach CSS:

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

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