멀티미디어 객체 부트 스트랩
이 장에서 우리는 부트 스트랩 멀티미디어 개체 (미디어 개체)를 설명합니다. (예 : 블로그 코멘트) 다양한 타입의 구성 요소를 만드는 데 사용되는 이러한 추상 객체 스타일, 우리는 성분의 광 텍스트를 사용하여 이미지 정렬 또는 정렬 좌우 될 수있다. 미디어 객체는 적은 코드로 달성 될 수 있고, 텍스트 미디어 스크램블 개체.
경량 미디어 오브젝트 표시 특성을 달성하기 위해 간단한 태그 애플리케이션 클래스 관통하기 쉽다. 당신은 미디어 객체를 설정하는 HTML 태그에 다음과 같은 두 가지 형태를 추가 할 수 있습니다 :
- .media :이 클래스는 멀티미디어의 미디어 객체 (이미지, 비디오, 오디오)를 왼쪽 또는 오른쪽으로 콘텐츠 블록에 떠 있습니다.
- .media 목록 : 당신은 다양한 요소의 목록이 정렬되지 않은 목록의 일부입니다 필요한 경우, 당신은 클래스를 사용할 수 있습니다.댓글 나열하는 데 사용 및 기사 목록 수 있습니다.
의 기본 매체에 대한 다음 정보를 살펴 보겠습니다 .media 인스턴스를 객체 :
예
<사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "미디어 객체">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 미디어 제목 </ H4>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ DIV>
</ DIV>
<사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "미디어 객체">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 미디어 제목 </ H4>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. <사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "미디어 객체">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 미디어 제목 </ H4>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ DIV>
</ DIV>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
의 개체 .media 목록의 미디어의 목록의 다음 예를 살펴 보자 :
예
<UL 클래스 = "미디어 목록">
<리 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "일반 자리 표시 자 이미지">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 미디어 제목 </ H4>
<P>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ P>
<! - 중첩 된 미디어 객체 ->
<사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "일반 자리 표시 자 이미지">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 중첩 된 미디어가 </ H4 호>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. <! - 중첩 된 미디어 객체 ->
<사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "일반 자리 표시 자 이미지">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 중첩 된 미디어가 </ H4 호>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ DIV>
</ DIV>
</ DIV>
</ DIV>
<! - 중첩 된 미디어 객체 ->
<사업부 클래스 = "미디어">
<A 클래스 = "-당겨 왼쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "일반 자리 표시 자 이미지">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 중첩 된 미디어가 </ H4 호>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ DIV>
</ DIV>
</ DIV>
</ 리>
<리 클래스 = "미디어">
<A 클래스 = "당겨 오른쪽" HREF = "#">
<IMG 클래스 = "미디어 객체" SRC는 = "/wp-content/uploads/2014/06/64.jpg"
ALT = "일반 자리 표시 자 이미지">
</ A>
<사업부 클래스 = "미디어 바디">
<H4 클래스 = "미디어 제목"> 미디어 제목 </ H4>이 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. 이것은 일부 샘플 텍스트입니다. </ DIV>
</ 리>
</ UL>
»시도
결과는 다음과 같다 :
