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

Bootstrap плагины

Группы списков Bootstrap Ленты прогресса Bootstrap

Объекты мультимедиа Bootstrap

В этой главе мы рассмотрим многоформатные объекты Bootstrap, такие как: изображения, видео, аудио и т.д. Стили многоформатных объектов можно использовать для создания различных типов компонентов (например: комментарии в блоге), где можно использовать текст и изображения, выравненные влево или вправо. Многоформатные объекты позволяют реализовать混ровку текста и изображений с минимальным количеством кода.

Давайте начнем с примера:

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

Пример

<!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="container">
　　<h2>Мультимедийные объекты</h2>
　　<p>Использование класса "media-left" для выравнивания многоформатного объекта влево. Текстовый контент должен располагаться после изображения.</p>
　　<p>Класс "media-right" используется для выравнивания многоформатного объекта вправо.</p><br>
　　
　　<!-- Выравнивание влево -->
　　<div class="media">
　　　　<div class="media-left">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">Выравнивание влево</h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　</div>
　　</div>
　　<hr>
　　
　　<!-- Выравнивание вправо -->
　　<div class="media">
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">Выравнивание вправо</h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　</div>
　　　　<div class="media-right">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px">
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

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

Пример анализа

Добавление класса .media к элементу <div> позволяет создать многоформатный объект.

Использование класса .media-left позволяет многоформатным объектам (изображениям) выравниваться влево, а класс .media-right обеспечивает выравнивание вправо.

Текстовый контент размещается в div, изображение выравнивается слева, если оно находится перед div, и справа, если оно находится после div.

Кроме того, вы можете использовать класс .media-heading для настройки заголовков.

Давайте посмотрим на следующий пример списка мультимедийных объектов .media-list:

Выравнивание вверху, внизу, по центру

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

Пример

<!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="container">
　　<h2>Мультимедийные объекты</h2>
　　<p>Мультимедийные объекты могут быть настроены на выравнивание вверху, по центру и внизу, соответствующие классы - "media-top", "media-middle", "media-bottom":</p><br>
　　<div class="media">
　　　　<div class="media-left media-top">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">Вверху</h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　</div>
　　</div>
　　<hr>
　　<div class="media">
　　　　<div class="media-left media-middle">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">По центру</h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　</div>
　　</div>
　　<hr>
　　<div class="media">
　　　　<div class="media-left media-bottom">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">На дне</h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

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

Вложенные мультимедийные объекты

Внутри одного мультимедийного объекта можно также содержать несколько мультимедийных объектов:

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

Пример

<!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="container">
　　<h2>Внутренний мультимедийный объект</h2>
　　<p>Внутри мультимедийного объекта можно вставить еще один мультимедийный объект:</p><br>
　　<div class="media">
　　　　<div class="media-left">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">w3codebox-1 <small><i>Опубликовано 19 февраля 2016 года</i></small></h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　
　　　　　　<!-- Внутренний мультимедийный объект -->
　　　　　　<div class="media">
　　　　　　　　<div class="media-left">
　　　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　　　</div>
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4 class="media-heading">w3codebox-2 <small><i>Опубликовано 19 февраля 2016</i></small></h4>
　　　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　　　　　<!-- Внутренний мультимедийный объект -->
　　　　　　　　　　<div class="media">
　　　　　　　　　　　　<div class="media-left">
　　　　　　　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="media-body">
　　　　　　　　　　　　　　<h4 class="media-heading">w3codebox-3 <small><i>Опубликовано 19 февраля 2016</i></small></h4>
　　　　　　　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

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

Пример

<!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="container">
　　<h2>Внутренний мультимедийный объект</h2>
　　<p>Внутри мультимедийного объекта можно вставить еще один мультимедийный объект:</p><br>
　　<div class="media">
　　　　<div class="media-left">
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　</div>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">w3codebox-1 <small><i>Опубликовано 19 февраля 2016 года</i></small></h4>
　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　
　　　　　　<!-- Внутренний мультимедийный объект -->
　　　　　　<div class="media">
　　　　　　　　<div class="media-left">
　　　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　　　</div>
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4 class="media-heading">w3codebox-2 <small><i>Опубликовано 20 февраля 2016 года</i></small></h4>
　　　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　　　　　<!-- Внутренний мультимедийный объект -->
　　　　　　　　　　<div class="media">
　　　　　　　　　　　　<div class="media-left">
　　　　　　　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="media-body">
　　　　　　　　　　　　　　<h4 class="media-heading">w3codebox-3 <small><i>Опубликовано 21 февраля 2016 года</i></small></h4>
　　　　　　　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　　　
　　　　　　　　<!-- Внутренний мультимедийный объект -->
　　　　　　　　<div class="media">
　　　　　　　　　　<div class="media-left">
　　　　　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　　　　　</div>
　　　　　　　　　　<div class="media-body">
　　　　　　　　　　　　<h4 class="media-heading">w3codebox-4 <small><i>Опубликовано 20 февраля 2016 года</i></small></h4>
　　　　　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　　　
　　　　　　</div>
　　　　</div>
　　　　
　　　　<!-- Внутренний мультимедийный объект -->　　　　
　　　　<div class="media">
　　　　　　<div class="media-left">
　　　　　　　　<img src="https://ru.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px">
　　　　　　</div>
　　　　　　<div class="media-body">
　　　　　　　　<h4 class="media-heading">w3codebox-5 <small><i>Опубликовано 19 февраля 2016 года</i></small></h4>
　　　　　　　　<p>Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов. Это несколько примерных текстов.</p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

Группы списков Bootstrap Ленты прогресса Bootstrap