Bootstrap 미디어 객체에 대한 자세한 설명

    이 장에서는 부트스트랩의 멀티미디어 객체(Media Object)에 대해 설명하겠습니다. 이러한 추상 개체 스타일은 다양한 유형의 구성 요소(예: 블로그 댓글)를 만드는 데 사용됩니다. 구성 요소에 그래픽과 텍스트를 혼합하여 사용할 수 있으며 이미지를 왼쪽 또는 오른쪽으로 정렬할 수 있습니다. 미디어 개체를 사용하면 더 적은 코드로 미디어 개체와 텍스트를 혼합할 수 있습니다.

간단한 마크업에 클래스를 적용하여 경량 마크업과 미디어 객체의 손쉬운 확장성을 구현합니다. HTML 태그에 다음 두 가지 양식을 추가하여 미디어 개체를 설정할 수 있습니다.

.media: 이 클래스를 사용하면 미디어 개체의 멀티미디어(이미지, 비디오, 오디오)가 콘텐츠 블록의 왼쪽이나 오른쪽에 떠 있게 됩니다.

.media-list: 각 항목이 순서가 지정되지 않은 목록의 일부인 목록이 필요한 경우 이 클래스를 사용할 수 있습니다. 댓글 목록 및 기사 목록에 사용할 수 있습니다.

기본 스타일

미디어 개체는 일반적으로 그룹으로 나타나며 미디어 개체 그룹에는 다음과 같은 부분이 포함되는 경우가 많습니다.

　xml 미디어 개체 컨테이너: 미디어 개체를 수용하는 데 사용되는 "미디어" 클래스 이름으로 표시되는 경우가 많습니다.

　🙌 미디어 객체의 객체: 미디어 객체의 객체인 "media-object"로 표현되는 경우가 많으며, 종종 그림으로 표현됩니다.

　tex 미디어 객체의 본체: "media-body"로 표현되는 경우가 많습니다. , 이는 미디어 개체입니다. 이미지의 주요 콘텐츠는 어떤 요소라도 될 수 있으며, 종종 이미지 측면의 콘텐츠가 될 수 있습니다

　🙌 미디어 개체의 제목: 종종 사용되는 제목인 "media-heading"으로 표현됩니다. 개체를 설명하기 위해 이 부분은 선택 사항입니다

　위의 네 부분 외에도 미디어 개체에서 개체의 플로팅 모드를 제어하기 위해 부트스트랩 프레임워크에서 "media-left" 또는 "media-right"가 자주 사용됩니다

[참고] html 구조에서 .media-right 应当放在 .media-body

　 미디어 이후 개체 스타일은 비교적 간단하므로 간격만 설정하면 됩니다. 미디어 객체의 중첩이 필요합니다. Bootstrap 프레임워크의 미디어 개체에도 이러한 기능이 있습니다. 미디어 개체 "media-body"

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}.media,
.media .media {
  margin-top: 15px;
}.media:first-child {
  margin-top: 0;
}.media-object {
  display: block;
}.media-heading {
  margin: 0 0 5px;
}.media-left {
  margin-right: 10px;
}.media-right {
  margin-left: 10px;
}

Alignment

그림 또는 기타의 본문 내에 다른 미디어 개체 구조를 배치하기만 하면 됩니다. 미디어 유형은 위쪽, 중간 또는 아래쪽으로 정렬될 수 있습니다. 기본값은 위쪽 정렬입니다. .media-middle 또는 .media-bottom을 통해 설정

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div></div>

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div><div class="media"><a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/100x100" alt="..."></a><div class="media-body"><h4 class="media-heading">我是小火柴</h4><div>好巧啊，我也叫小火柴</div><div class="media"><a class="pull-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>是的</div></div></div></div></div></div></div><div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

미디어 개체 목록

미디어 개체의 중첩은 미디어 개체의 간단한 응용 프로그램 효과 중 하나일 뿐입니다. 우리는 또한 목록을 보게 될 것입니다. 각 목록 항목은 미디어 객체와 유사해 보입니다. Bootstrap 프레임워크는 구조를 작성할 때 ul을 사용할 수 있고 ul에 클래스 이름 "media-list"를 추가하고 li

.media-middle {vertical-align: middle;
}.media-bottom {vertical-align: bottom;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-middle" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-bottom" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

위 내용은 Bootstrap 미디어 객체에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!