Невозможно понять, как использовать миниатюру 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