Bootstrap4 基礎教程

Bootstrap4 マルチメディアオブジェクト

左寄せや右寄せのマルチメディアオブジェクト（例えば画像やビデオ）とテキストコンテンツ（例えばブログのコメント、ツイートなど）を含むレイアウトを作成する場合、新しく導入されたBootstrapのメディアコンポーネントを使用して簡単にこれを実現できます：

Bootstrapは、マルチメディアオブジェクト（画像やビデオ）とコンテンツのレイアウトを処理するための非常に良い方法を提供しています。応用例には、ブログのコメント、ツイートなどがあります：

基本的なマルチメディアオブジェクト

マルチメディアオブジェクトを作成するには、コンテナ要素に .media クラスを追加し、マルチメディアコンテンツを子コンテナに配置します。子コンテナには .media クラスを追加する必要があります：-body クラスに、余白、内余白などの効果を追加します：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>メディアオブジェクト</h2>
　　<p>使用　.media　および　.media-body クラスでマルチメディアオブジェクトを作成します：</p>
　　<div　class="media　border　p-3">
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　alt="John　Doe"　class="mr-3　mt-3　rounded-circle"　style="width:60px;">
　　　　<div　class="media-body">
　　　　　　<h4>基础教程网</h4>
　　　　　　<p>学好基础,才能走的更远！！！</p>　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

运行后效果如下：

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>多媒体对象嵌套</h2>
　　<p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:</p><br>
　　<div　class="media　border　p-3">
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　alt="John　Doe"　class="mr-3　mt-3　rounded-circle"　style="width:60px;">
　　　　<div　class="media-body">
　　　　　　<h4>基础教程网</h4>
　　　　　　<p>学好基础,才能走的更远！！！</p>
　　　　　　<div　class="media　p-3">
　　　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　alt="Jane　Doe"　class="mr-3　mt-3　rounded-circle"　style="width:45px;">
　　　　　　　　<div　class="media-body">
　　　　　　　　　　<h4>基础教程网</h4>
　　　　　　　　　　<p>学好基础,才能走的更远！！！</p>
　　　　　　　　</div>
　　　　　　</div>　　
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

多媒体对象图片显示在右边

如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>图片显示在右边</h2>
　　<p>如果你想将头像图片显示在右侧，可以在　.media-body　容器后添加图片:</p>
　　<div　class="media　border　p-3">
　　　　<div　class="media-body">
　　　　　　<h4>基础教程网</h4>
　　　　　　<p>学好基础,才能走的更远！！！</p>　　　　　　
　　　　</div>
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　alt="John　Doe"　class="ml-3　mt-3　rounded-circle"　style="width:60px;">
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

定位多媒体图片位置

我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>メディアオブジェクト</h2>
　　<p>私たちは align-self-*　<p>メディアオブジェクトの画像表示位置を設定するために、関連するクラスを使用できます：</p><br>
　　<!--　>ヘッダー　-->
　　<div　class="media">
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　class="align-self-start　mr-3"　style="width:60px">
　　　　<div　class="media-body">
　　　　　　<h4>ヘッダー　--　基礎教程(oldtoolbag.com)</h4>
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　</div>
　　</div>
　　<!--　中央に配置　-->
　　<div　class="media　mt-3">
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　class="align-self-center　mr-3"　style="width:60px">
　　　　<div　class="media-body">
　　　　　　<h4>中央に配置　--　基礎教程(oldtoolbag.com)</h4>
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　</div>
　　　</div>
　　<!--　底部　-->
　　<div　class="media　mt-3">
　　　　<img　src="https://ja.oldtoolbag.com/run/images/img_avatar.png"　class="align-self-end　mr-3"　style="width:60px">
　　　　<div　class="media-body">
　　　　　　<h4>フッター　--　基礎教程(oldtoolbag.com)</h4>
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　　　<p>基礎を学ぶことができれば、もっと遠くに行ける！！
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

Bootstrap4 フレックスフレックスボックス