Bootstrap4 기본 튜토리얼

Bootstrap4 멀티미디어 객체

왼쪽 정렬이나 오른쪽 정렬된 멀티미디어 객체(예: 이미지나 비디오)와 텍스트 콘텐츠(예: 블로그 댓글, Tweets 등)를 포함한 레이아웃을 생성하려면 새로 도입된 Bootstrap 미디어 컴포넌트를 사용하여 쉽게 이를 수행할 수 있습니다.

Bootstrap는 멀티미디어 객체(이미지나 비디오)와 콘텐츠 레이아웃을 처리하는 데 매우 좋은 방법을 제공합니다. 응용 시나리오는 블로그 댓글, 위ibo 등입니다:

기본 멀티미디어 객체

멀티미디어 객체를 생성하려면 컨테이너 요소에 .media 클래스를 추가하고, 멀티미디어 내용을 서브 컨테이너에 추가합니다. 서브 컨테이너에도 .media 클래스를 추가합니다:-body 클래스를 추가한 후 마argins, paddings 등의 효과를 추가합니다:

示例

<!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://ko.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://ko.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://ko.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://ko.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://ko.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://ko.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://ko.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 Flex 레이아웃