Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap миниатюрами

Эта глава описывает бутстрапе эскизы. Большинство сайтов требуют макета изображения, видео, текст и т.д. в сетке. Bootstrap миниатюра это обеспечивает легкий путь. Чтобы использовать Bootstrap создавать эскизы следующим образом:

  • Добавить <a> вокруг тега изображения склассом .thumbnail.
  • Это добавит отступ (отступ) четыре пикселя и серую рамку.
  • При наведении указателя мыши на изображение, анимация будет показывать контур изображения.

Следующий пример иллюстрирует эскиз по умолчанию:

примеров

<Div класс = "строка"> <Div класс = "Col-СМ-6 Col- й мкр-3"> HREF = "#" класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> </ A> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> HREF = "#" класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> </ A> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> HREF = "#" класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> </ A> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> HREF = "#" класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> </ A> </ Div> </ Div>

Попробуйте »

Результаты следующие:

Миниатюры

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

Теперь, когда у нас есть базовый эскиз, мы можем добавить разнообразие контента HTML эскизов, таких как заголовки, параграфы, или кнопки. Конкретные шаги заключаются в следующем:

  • Метка <a> склассом .thumbnail изменился <DIV>.
  • В <DIV> внутри, вы можете добавить все, что вы хотите добавить. Так как это <DIV>, мы можем использовать именования по умолчанию правила, основанные на пролетом для регулировки размера.
  • Если вы хотите сгруппировать несколько изображений, пожалуйста, поместите их в неупорядоченный список, и каждый элемент списка оставил плавающим.

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

примеров

<Div класс = "строка"> <Div класс = "Col-СМ-6 Col- й мкр-3"> <Div класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> <Div класс = "заголовок"> Вкладка <H3> Миниатюры </ h3> <P> Некоторые образец текста. Некоторые образец текста. </ P> <P> HREF = "#" класс = "БТН БТН-первичный" Роль "Кнопка" => Кнопка </ а> HREF = "#" класс = "БТН БТН-умолчанию" Роль "Кнопка" => Кнопка </ а> </ P> </ Div> </ Div> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> <Div класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> <Div класс = "заголовок"> Вкладка <H3> Миниатюры </ h3> <P> Некоторые образец текста. Некоторые образец текста. </ P> <P> HREF = "#" класс = "БТН БТН-первичный" Роль "Кнопка" => Кнопка </ а> HREF = "#" класс = "БТН БТН-умолчанию" Роль "Кнопка" => Кнопка </ а> </ P> </ Div> </ Div> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> <Div класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> <Div класс = "заголовок"> Вкладка <H3> Миниатюры </ h3> <P> Некоторые образец текста. Некоторые образец текста. </ P> <P> HREF = "#" класс = "БТН БТН-первичный" Роль "Кнопка" => Кнопка </ а> HREF = "#" класс = "БТН БТН-умолчанию" Роль "Кнопка" => Кнопка </ а> </ P> </ Div> </ Div> </ Div> <Div класс = "Col-СМ-6 Col- й мкр-3"> <Div класс = "Ленфильм"> <Img SRC = "/wp-content/uploads/2014/06/kittens.jpg" Alt = "общий заполнитель миниатюр"> <Div класс = "заголовок"> Вкладка <H3> Миниатюры </ h3> <P> Некоторые образец текста. Некоторые образец текста. </ P> <P> HREF = "#" класс = "БТН БТН-первичный" Роль "Кнопка" => Кнопка </ а> HREF = "#" класс = "БТН БТН-умолчанию" Роль "Кнопка" => Кнопка </ а> </ P> </ Div> </ Div> </ Div> </ Div>

Попробуйте »

Результаты следующие:

Пользовательские Миниатюры