Thumbnail Bootstrap

Thumbnail Bootstrap

Thumbnail Bootstrap - компонент Bootstrap, для просмотра небольшого изображения

Thumbnail — компонент Bootstrap, для просмотра небольшого изображения

Thumbnail Bootstrap— компонент Bootstrap, для просмотра небольшого изображения. Вместе с сеткой Bootstrap позволяет отображать сетку изображений, видео, текста или другую информацию. Для оформления картинок предпросмотра (тумбнейлов, thumbnails) подобно формату соц. сети Pinterest, используются сторонние плагины Massonry, Isotop или Salvattore.

Thumbnail Bootstrap

Пример кода создания сетки изображений предпросмотра:

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Результат:

Внешний вид Thumbnails Bootstrap

Внешний вид Thumbnails Bootstrap

Если добавить помимо изображения с ссылкой, заголовок, параграф и кнопки, то у нас получится фрагмент, очень похожий на те, что видим в интернет-магазинах (особенно если добавленные кнопки будут иметь названия «Добавить в корзину» и/или «Сравнить»)

 

Пример кода содержащего описание изображения или видео:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</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>

Код поможет получить следующий результат:

Thumbnail с описанием

Thumbnail с описанием


Об авторе

@altarasov administrator

Вы должны быть авторизованы, чтобы оставить комментарий.