12

Bootstrap のサムネイル コンポーネントを使用して、製品カテゴリのリストとサムネイル画像を表示しようとしています。ユーザーにサムネイルをクリックしてカテゴリに移動してもらいたい。

Bootstrap Web サイトのドキュメントには、次の基本的なマークアップが記載されています。

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

holder.js に関する情報を Google で検索し、公式の holder.js ページを見つけ、zip バージョンをダウンロードし、ファイルをサイトの js フォルダに置き、HTML に script タグを付けて holder.js ファイルにリンクしました。

しかし、どの画像ファイルを使用するかをマークアップのどこでどのように指定すればよいのでしょうか?

また、おそらくスパンまたは 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>
4

1 に答える 1

21

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

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

于 2013-04-16T12:11:14.617 に答える