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

  • Добавить тег <a> с классом .thumbnail вокруг изображения.
  • Это добавляет дополнительно четыре пиксела и серую рамку.
  • При наведении курсора, анимированные тлеющий контуры изображения.

Следующий пример демонстрирует миниатюру по умолчанию:

<div class = "row"> <div class = "col-sm-6 col-md-3"> <a href = "#" class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </a> </div> <div class = "col-sm-6 col-md-3"> <a href = "#" class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </a> </div> <div class = "col-sm-6 col-md-3"> <a href = "#" class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </a> </div> <div class = "col-sm-6 col-md-3"> <a href = "#" class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </a> </div>
</div>

 

Добавление настраиваемого содержимого

Теперь, когда у нас есть основной эскиз, можно добавить любой вид контента в HTML, как заголовки, абзацы, или кнопку эскизов. Выполните следующие действия:

  • Измените тег <a>, который имеет класс .thumbnail к <div>.
  • Внутри <div> вы можете добавить все, что вам нужно. Поскольку это оболочка на основе <div>, мы можем использовать по умолчанию для определения размеров.
  • Если вы хотите сгруппировать несколько изображений, поместите их в неупорядоченном списке, и каждый элемент списка будет всплывать влево.

Следующий пример демонстрирует это:

<div class = "row"> <div class = "col-sm-6 col-md-3"> <div class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </div> <div class = "caption"> <h3>Надпись Thumbnail</h3> <p>Некоторый образец текста. Примерный текст.</p> <p> <a href = "#" class = "btn btn-primary" role = "button"> Кнопка </a> <a href = "#" class = "btn btn-default" role = "button"> Кнопка </a> </p> </div> </div> <div class = "col-sm-6 col-md-3"> <div class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </div> <div class = "caption"> <h3>Надпись Thumbnail</h3> <p>Некоторый образец текста. Примерный текст.</p> <p> <a href = "#" class = "btn btn-primary" role = "button"> Кнопка </a> <a href = "#" class = "btn btn-default" role = "button"> Кнопка </a> </p> </div> </div> <div class = "col-sm-6 col-md-3"> <div class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскиза"> </div> <div class = "caption"> <h3>Надпись Thumbnail</h3> <p>Некоторый образец текста. Примерный текст.</p> <p> <a href = "#" class = "btn btn-primary" role = "button"> Кнопка </a> <a href = "#" class = "btn btn-default" role =" button"> Кнопка </a> </p> </div> </div> <div class = "col-sm-6 col-md-3"> <div class = "thumbnail"> <img src = "https://andreyex.ru/images/kittens.jpg" alt = "Универсальный заполнитель эскизаl"> </div> <div class = "caption"> <h3>Надпись Thumbnail</h3> <p>Некоторый образец текста. Примерный текст.</p> <p> <a href = "#" class = "btn btn-primary" role = "button"> Кнопка </a> <a href = "#" class = "btn btn-default" role = "button"> Кнопка </a> </p> </div> </div>
</div>

 

 

Источник: AndreyEx.ru