В этой статье обсуждаются миниатюры Bootstrap. Многим сайтам нужен способ для размещения изображений, видео, текста и т.д. В сетке, а Bootstrap имеет простой способ сделать это с помощью эскизов.
Создание эскизов с помощью Bootstrap
- Добавьте тег
a
с типом эскиза вокруг изображения. - Это добавляет четыре пикселя отступов и серая граница.
- При наведении анимационное свечение очерчивает изображение.
Следующий пример демонстрирует миниатюру по умолчанию -
Добавление пользовательского содержимого
Теперь, когда у нас есть основной эскиз, в миниатюры можно добавить любые HTML-материалы, такие как заголовки, абзацы или кнопки. Выполните следующие шаги:
- Измените тег
a
, который имеет класс.thumbnail
дляdiv
. - Внутри этого
div
вы можете добавить все, что вам нужно. Поскольку этоdiv
, мы можем использовать стандартное соглашение об именах по умолчанию для определения размера. - Если вы хотите группировать несколько изображений, поместите их в неупорядоченный список, и каждый элемент списка будет перемещен влево.
Следующий пример демонстрирует это -
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Bootstrap - Плагин для карусели - 22/09/2018 17:33
- Bootstrap - Плагин Collapse - 22/09/2018 17:33
- Бутстрап - Кнопочный плагин - 22/09/2018 17:32
- Bootstrap - Плагин Alert - 22/09/2018 17:32
- Bootstrap - Плагин Popover - 22/09/2018 17:31
- Bootstrap - Плагин для подсказки - 22/09/2018 17:31
- Bootstrap - Плагин Tab - 22/09/2018 17:30
- Bootstrap - Плагин Scrollspy - 22/09/2018 17:30
- Bootstrap - Плагин для раскрывающегося списка - 22/09/2018 17:29
- Bootstrap - Модальный плагин - 22/09/2018 17:29
- Bootstrap - Переходный плагин - 22/09/2018 17:28
- Bootstrap -Обзор плагинов - 22/09/2018 17:28
- Бутстрап – Wells - 22/09/2018 17:27
- Бутстрап - Панели - 22/09/2018 17:26
- Bootstrap - Список групп - 22/09/2018 17:26
- Bootstrap - Объект мультимедиа - 22/09/2018 17:25
- Бутстрап - Индикатор прогресса - 22/09/2018 17:25
- Бутстрап - Оповещения - 22/09/2018 17:24
Предыдущие статьи
- Bootstrap - Заголовок страницы - 22/09/2018 17:23
- Бутстрап - Jumbotron - карточка статьи - 22/09/2018 17:23
- Бутстрап - Значки - 22/09/2018 17:23
- Бутстрап - Ярлыки - 22/09/2018 17:22
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
- Бутстрап - Элементы навигации - 22/09/2018 17:17
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
- Bootstrap - Группы загрузки - кнопки - 22/09/2018 17:16
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11