ブートストラップサムネイルコンポーネントの使い方がわかりません

Question

私は、ブートストラップのサムネイルコンポーネントを使用して、サムネイル画像で製品カテゴリのリストを表示しようとしています。ユーザーがサムネイルをクリックしてカテゴリに移動するようにします。

ブートストラップウェブサイト上のドキュメントは、この基本的なマークアップ提供：私はholder.jsに関する情報をGoogleで検索しました

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

を、公式holder.jsページを見つけましたが、ZIPバージョンをダウンロードし、内のファイルを置きます私のサイトのjsフォルダにあり、HTMLのscriptタグを使ってholder.jsファイルにリンクしています。

しかし、どのようにマークアップでどのイメージファイルを使用するのかを指定しますか？

各画像の下にカテゴリ名を含める必要があります。おそらくspanタグまたはh4タグが必要です。これは、クリック可能なブロックの一部を形成する必要があります。

更新日： 私が利用したいのは、サムネイルコンポーネントのスタイリングの側面だけです。サムネイルコンポーネントと関連するHTMLマークアップでこれを実現し、holder.jsを完全に削除することは可能でしょうか？

これは私が使用したいHTMLマークアップのようなものです：

<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は、JavaScriptとインライン画像に基づくだけでイメージプレースホルダーのフレームワークです。ブートストラップによってサンプルイメージを作成するために使用されます。このライブラリには制作の必要はありません。ので、代わりにdata-src属性とholder.jsライブラリを使用してのあなたはsrc属性を使用してのようにマークアップする必要があります。あなたはまた、テキストが画像のキャプションに下線無効にする必要がありますすることができます

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

。ただ、CSSを使用します。

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

例：holder.jsをするために使用されているものを明確にするための http://jsfiddle.net/M3fpA/46/