Учебники

Bootstrap — миниатюры

Октябрь 25, 2018

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

  • Добавьте тег <a> с классом .thumbnail вокруг изображения.

  • Это добавляет четыре пикселя отступов и серую рамку.

  • При наведении анимированное свечение обводит изображение.

Добавьте тег <a> с классом .thumbnail вокруг изображения.

Это добавляет четыре пикселя отступов и серую рамку.

При наведении анимированное свечение обводит изображение.

В следующем примере демонстрируется миниатюра по умолчанию — 

<div class = "row">
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
</div>

Миниатюра Демо

Добавление пользовательского контента

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

  • Измените тег <a> с классом .thumbnail на <div>.

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

  • Если вы хотите сгруппировать несколько изображений, поместите их в неупорядоченный список, и каждый элемент списка будет перемещен влево.

Измените тег <a> с классом .thumbnail на <div>.

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

Если вы хотите сгруппировать несколько изображений, поместите их в неупорядоченный список, и каждый элемент списка будет перемещен влево.

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

49
Share: