English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Media Objects

In this chapter, we will explain the media objects in Bootstrap, such as images, videos, and audio. The styles of media objects can be used to create various types of components (such as: blog comments), where we can use mixed text and images, with images aligned to the left or right. Media objects can be implemented with less code to achieve mixed text and images.

Next, let's take a look at an example:

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Default media object/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>Use "media-left" class to set the left alignment of the media object. The text content needs to be placed after the image.</p>
　　<p>"media-right" class is used to set the right alignment of the media object.</p><br>
　　
　　<!--　Align to the left　-->
　　<div　class="media">
　　　　<div　class="media-left">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:60px">
　　　　</div>
　　　　<div　class="media-body">
　　　　　　<h4　class="media-heading">Align to the left</h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　</div>
　　</div>
　　<hr>
　　
　　<!--　Align to the right　-->
　　<div　class="media">
　　　　<div　class="media-body">
　　　　　　<h4　class="media-heading">Align to the right</h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　</div>
　　　　<div　class="media-right">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:60px">
　　　　</div>
　　</div>
</div>
</body>
</html>
Test It Out ‹/›

结果如下所示：

Example Parsing

Add the .media class to the <div> element to create a media object.

使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。

将文本内容放在 的 div 中，图片左对齐则放在 之前，图片右对齐则放在 之后。

此外，你还可以使用 .media-heading 类来设置标题。

让我们来看看下面这个有关媒体对象列表 .media-list 的示例：

top, bottom, center alignment

在线示例

<!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://www.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:80px">
　　　　</div>
　　　　<div　class="media-body">
　　　　　　<h4　class="media-heading">Top</h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　</div>
　　</div>
　　<hr>
　　<div　class="media">
　　　　<div　class="media-left　media-middle">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:80px">
　　　　</div>
　　　　<div　class="media-body">
　　　　　　<h4　class="media-heading">Center</h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　</div>
　　</div>
　　<hr>
　　<div　class="media">
　　　　<div　class="media-left　media-bottom">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:80px">
　　　　</div>
　　　　<div　class="media-body">
　　　　　　<h4　class="media-heading">Bottom</h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test It Out ‹/›

结果如下所示：

嵌入式多媒体对象

一个多媒体对象内部还可以包含多个多媒体对象：

在线示例

<!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://www.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>Posted on February　19,　2016</i></small></h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　
　　　　　　<!--　嵌入式多媒体对象　-->
　　　　　　<div　class="media">
　　　　　　　　<div　class="media-left">
　　　　　　　　　　<img　src="https://www.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>Posted on February　19,　2016</i></small></h4>
　　　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　　　　　<!--　嵌入式多媒体对象　-->
　　　　　　　　　　<div　class="media">
　　　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　　　<img　src="https://www.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>Posted on February　19,　2016</i></small></h4>
　　　　　　　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>
Test It Out ‹/›

在线示例

<!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://www.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>Posted on February　19,　2016</i></small></h4>
　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　
　　　　　　<!--　嵌入式多媒体对象　-->
　　　　　　<div　class="media">
　　　　　　　　<div　class="media-left">
　　　　　　　　　　<img　src="https://www.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>Posted on February　20,　2016</i></small></h4>
　　　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　　　　　<!--　嵌入式多媒体对象　-->
　　　　　　　　　　<div　class="media">
　　　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　　　<img　src="https://www.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>Posted on February　21,　2016</i></small></h4>
　　　　　　　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　　　
　　　　　　　　<!--　嵌入式多媒体对象　-->
　　　　　　　　<div　class="media">
　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　<img　src="https://www.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>Posted on February　20,　2016</i></small></h4>
　　　　　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　　　
　　　　　　</div>
　　　　</div>
　　　　
　　　　<!--　嵌入式多媒体对象　-->　　　　
　　　　<div　class="media">
　　　　　　<div　class="media-left">
　　　　　　　　<img　src="https://www.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>Posted on February　19,　2016</i></small></h4>
　　　　　　　　<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>/p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test It Out ‹/›
Bootstrap List GroupsBootstrap Progress Bars