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

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://ja.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://ja.oldtoolbag.com/run/images/img_avatar.png"　class="media-object"　style="width:60px">
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

结果如下所示：

例解

HTMLの<div>要素に.mediaクラスを追加して、マルチメディアオブジェクトを作成します。

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

文本内容放在 的 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://ja.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://ja.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://ja.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://ja.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>投稿日　February　19,　2016</i></small></h4>
　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　
　　　　　　!--　内嵌多媒体对象　-->
　　　　　　<div　class="media">
　　　　　　　　<div　class="media-left">
　　　　　　　　　　<img　src="https://ja.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>投稿日　February　19,　2016</i></small></h4>
　　　　　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　　　　　!--　内嵌多媒体对象　-->
　　　　　　　　　　<div　class="media">
　　　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　　　<img　src="https://ja.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>投稿日　February　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://ja.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>投稿日　February　19,　2016</i></small></h4>
　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　
　　　　　　!--　内嵌多媒体对象　-->
　　　　　　<div　class="media">
　　　　　　　　<div　class="media-left">
　　　　　　　　　　<img　src="https://ja.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>投稿日　February　20,　2016</i></small></h4>
　　　　　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　　　　　!--　内嵌多媒体对象　-->
　　　　　　　　　　<div　class="media">
　　　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　　　<img　src="https://ja.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>投稿日　February　21,　2016</i></small></h4>
　　　　　　　　　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　　　
　　　　　　　　!--　内嵌多媒体对象　-->
　　　　　　　　<div　class="media">
　　　　　　　　　　<div　class="media-left">
　　　　　　　　　　　　<img　src="https://ja.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>投稿日　February　20,　2016</i></small></h4>
　　　　　　　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　　　
　　　　　　</div>
　　　　</div>
　　　　
　　　　!--　内嵌多媒体对象　-->　　　　
　　　　<div　class="media">
　　　　　　<div　class="media-left">
　　　　　　　　<img　src="https://ja.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>投稿日　February　19,　2016</i></small></h4>
　　　　　　　　<p>これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。これはいくつかの例文です。</p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›
Bootstrap リストグループBootstrap プログレスバー