Компьютерапия

В этой статье обсуждаются миниатюры 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>