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

Создание эскизов с помощью Bootstrap

  • Добавьте тег a с типом эскиза вокруг изображения.
  • Это добавляет четыре пикселя отступов и серая граница.
  • При наведении анимационное свечение очерчивает изображение.

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

<div class = "row">
  
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
  
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
  
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
  
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </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 = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
     
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
     
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
     
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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 = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
     
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok