Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Всем привет!
В сегодняшнем уроке, я расскажу,  как создать миниатюры, используя компонент Thumbnails.
В миниатюре могут использоваться изображения, видео, текстовые блоки или др.
Итак, вначале попробуем создать обычную галерею картинок, где для каждой картинки можно подвязать ссылку для перехода на другую страницу.

Как создать простые миниатюры.

К тегу DIV добавляем класс «thumbnail». Благодаря сетке, мы выстраиваем миниатюры красиво по горизонтали:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
<img src="..." alt="...">
        </div>
</div>

</div>

Результат:

посмотреть пример

Миниатюра как ссылка

Миниатюра может быть как ссылка на другую страницу.

Для этого замените тег DIV на тег «A», вот так:

<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>

Полный пример:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>

</div>

Результат:

посмотреть пример

Миниатюра с дополнительным контентом

К миниатюре можно добавить дополнительно заголовок, текст и кнопку.

<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>

Полный пример:

<div class="row">
<!-- 1 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 2 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 3 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<!-- 4 Изображение -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">

<div class="caption">
<h3>Заголовок...</h3>
<p>Контент...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

</div>

Результат:

посмотреть пример