부트스트랩으로 구현된 미디어 객체는 무엇입니까?

Bootstrap 미디어 개체는 그래픽과 텍스트가 혼합된 효과를 디자인하는 데 사용되는 특수 레이아웃 구성 요소 유형입니다. Bootstrap은 두 가지 유형의 미디어 개체, 즉 미디어와 미디어 목록을 제공합니다. 미디어는 단일 개체와 미디어 목록을 표시하는 데 사용됩니다. . 여러 개체를 표시하는 데 사용됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩으로 구현되는 미디어 개체는 무엇입니까?

미디어 개체는 특별한 레이아웃을 가진 구성 요소 유형입니다. 혼합된 그래픽과 텍스트 효과를 디자인하는 데 사용되며 대부분 왼쪽이나 오른쪽에 떠 있는 이미지와 일부 텍스트로 구성됩니다.

Bootstrap은 미디어(.media)와 미디어 목록(.media-list)이라는 두 가지 유형의 미디어 개체를 제공합니다. 미디어는 단일 개체를 표시하는 데 사용되며 미디어 목록은 여러 개체를 표시하는 데 사용됩니다.

Media

기본적으로 미디어는 미디어 개체(예: 이미지, 비디오, 오디오 등)와 왼쪽이나 오른쪽으로 떠다니는 미디어 콘텐츠로 구성됩니다. 한 미디어 내에 다른 미디어가 중첩될 수 있습니다.

HTML 구조에서 미디어는 세 부분으로 구성됩니다. .media는 미디어 컨테이너를 생성하고, .media-object는 미디어 객체를 생성하며, .media-body는 미디어 콘텐츠를 생성합니다(여기서 .media-heading은 제목을 생성합니다). 메디아). 예:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

미디어 개체는 일반적으로 그룹으로 나타납니다. 미디어 개체 그룹은 일반적으로 다음 부분을 포함합니다:

1. 미디어 개체의 컨테이너: 미디어 개체의 모든 콘텐츠를 수용하는 데 사용됩니다. 컨테이너에 사용됨

2. 미디어 개체의 개체: 일반적으로 그림, .media-object

클래스를 사용해야 합니다. 미디어 개체의 본문: 미디어 개체의 주요 콘텐츠입니다. 어떤 요소든 가능합니다. .media-body

4 클래스를 사용해야 합니다. 미디어 개체의 제목: 미디어 개체를 설명하는 데 사용되는 제목, .media-heading 클래스를 사용해야 합니다

추가로 , .pull-left 및 .pull-right 클래스는 부트스트랩 프레임워크에서 미디어 개체에 있는 개체의 부동 모드를 제어하는 ​​데 자주 사용됩니다

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩으로 구현된 미디어 객체는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!