Невозможно понять, как использовать миниатюру Bootstrap

Я пытаюсь использовать компонент эскиза Bootstrap для отображения списка категорий продуктов с эскизами. Я хочу, чтобы пользователи щелкали эскизами, чтобы перейти в категорию.

Документация на сайте Bootstrap предоставляет эту базовую разметку:

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

У меня есть Googled для получения информации о holder.js, найдите официальную страницу holder.js, загрузите zip-версию, поместите файлы в папку js моего сайта и связали с файлом holder.js с тегом script в мой HTML.

Но как/где в разметке указать, какие файлы изображений использовать?

Мне также нужно указать название категории под каждым изображением, возможно, с тегом span или h4. Это должно было бы стать частью интерактивного блока.

UPDATE: Просто чтобы прояснить, это действительно только стилистические аспекты компонента эскизов, которые я хочу использовать. Поэтому, возможно, я смогу добиться этого с помощью компонента эскизов и связанной с ним разметки 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>

Ответы

Ответ 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;
}

Пример: http://jsfiddle.net/M3fpA/46/