Основной курс Bootstrap

Bootstrap плагины

Внимание Bootstrap Заголовки страниц Bootstrap

Миниатюры Bootstrap

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

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

Ниже приведен пример стандартного эскиза:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Пример Bootstrap　-　Эскиз</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="row">
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　</a>
　　　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты показаны ниже:

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

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

с классом .thumbnail изменить <a> тег на <div>.
Внутри этого <div> вы можете добавить что угодно. Поскольку это <div>, мы можем использовать стандартные имена классов на основе span для изменения размера.
Если вы хотите сгруппировать несколько изображений, поместите их в unordered list, и каждый список-item будет плавать влево.

Ниже приведен пример, демонстрирующий это:

Онлайн пример

Пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Пример Bootstrap　-　Заказное эскиз</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="row">
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Метка эскиза</h2>
　　　　　　　　　　　　　　　　<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>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Метка эскиза</h2>
　　　　　　　　　　　　　　　　<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>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Метка эскиза</h2>
　　　　　　　　　　　　　　　　<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>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Универсальный占位符 эскиз">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Метка эскиза</h2>
　　　　　　　　　　　　　　　　<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>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Внимание Bootstrap Заголовки страниц Bootstrap