Какой хостинг выбрать. Обзор Fornex.com, партнёрская программа и услуги: Выделенные серверы, SSD VPS/VDS, SSD Хостинг, AntiDDoS, Бэкап, VPN …

Какой хостинг выбрать. Обзор Fornex.com, партнёрская программа и услуги: Выделенные серверы, SSD VPS/VDS, SSD Хостинг, AntiDDoS, Бэкап, VPN …

-

Если посмотреть на список услуг хостинга Fornex, то видно, что не в последнюю очередь он ориентируется на веб-мастеров. Во-первых, кроме традиционных предложений есть: AntiDDoS защита,  организация Backup, VPN и создание GEO-кластера. Во-вторых, имеется бесплатная базовая поддержка, партнерская программа, помощь с переносом проектов и хорошая цена/качество на SSD/VPS хостинг. К тому же среди клиентов Pikabu,Читать далее… >

Не все стриги, что растет (К. Прутков).

Bootstrap – Thumbnails

2 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
6 июня 2017
Bootstrap - Thumbnails
В этой главе рассказывается о миниатюрах в 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>

 

 

Просмотров: 125

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

5 + 20 =

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close