Статья, в которой описывается компонент Thumbnails платформы Twitter Bootstrap 3.

Компонент Thumbnails предназначен для создания различных галерей на основе сетки Bootstrap 3. В качестве объектов галереи могут использоваться изображения, видео, текстовые блоки или др.

Создание галереи Thumbnails всегда начинается с каркаса, который разрабатывается с помощью блоков div и классов системы сеток платформы Twitter Bootstrap 3. После этого переходят к размещению необходимых блоков информации в ячейках этой сетки и добавление класса thumbnail.

По сути данный компонент просто расширяет возможности данной сетки, позволяя её использовать для представления изображений, видео, текстовых блоков и другой информации.
Внимание: Платформа Twitter Bootstrap 3 не позволяет создавать галереи подобные Pinterest, из-за того что не содержит готовых плагинов. Эти галереи отличаются от обычных тем, что их миниатюры имеют различную высоту и (или) ширину. Чтобы создать галерею подобную Pinterest необходимо воспользоваться сторонними плагинами, такими как Masonry, Isotope, или Salvattore.

Например, создадим галерею Thumbnails, состоящую из 12 изображений (на lg-устройствах - 4x3, на md-устроствах – 3x4, на sm-устройствах – 2x6, на xs-устройствах – 1x12).

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

Bootstrap 3 - Галерея Thumbnails, состоящая из изображений

Демо галереи Thumbnails

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

<!-- Добавьте модальное окно после открывающего тега body-->
<div class="modal fade" id="image-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="modal-title">Просмотр изображения</div>
      </div>
      <div class="modal-body">
        <img class="img-responsive center-block" src="" alt="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<!-- Блок кода, содержащий галерею Thumbnails -->

<!-- Добавьте следущий сценарий перед закрывающим тегом body -->
<script>
// После загрузки DOM-дерева (страницы)
$(function() {     
  //при нажатии на ссылку, содержащую Thumbnail
  $('a.thumbnail').click(function(e) {
    //отменить стандартное действие браузера
    e.preventDefault();
    //присвоить атрибуту scr элемента img модального окна
    //значение атрибута scr изображения, которое обёрнуто
    //вокруг элемента a, на который нажал пользователь
    $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src'));
    //открыть модальное окно
    $("#image-modal").modal('show');
  });
  //при нажатию на изображение внутри модального окна 
  //закрыть его (модальное окно)
  $('#image-modal .modal-body img').on('click', function() {
    $("#image-modal").modal('hide')
  });
});
</script>

Bootstrap 3 - Галерея Thumbnails (картинка в модальном окне)

Демо галереи Thumbnails+

В миниатюры Thumbnails, используя дополнительную разметку, можно добавлять различные виды HTML-контента, такого как заголовки (элементы h1-h6), параграфы (элементы p) и кнопки.

<div class="row">
  
  <!-- 1 Изображение -->
  <div class="col-sm-6 col-md-4">
    <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>
  
  <!--...-->
  
  <!-- 12 Изображение -->
  <div class="col-sm-6 col-md-4">
    <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>

Bootstrap 3 - Галерея Thumbnails, миниатюры которой содержат дополнительный контент

Демо галереи Thumbnails 2