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>
Попробуйте »
Результаты следующие:
![Миниатюры](/bootstrap/thumbnail_demo.jpg)
Добавить пользовательский контент
Теперь, когда у нас есть базовый эскиз, мы можем добавить разнообразие контента 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>
Попробуйте »
Результаты следующие:
![Пользовательские Миниатюры](/bootstrap/bs-thumbnails.jpg)