웹 페이지에서 이미지는 왼쪽에 있고 내용이 오른쪽에 배열되어있어 매우 일반적인 효과입니다. 또한 미디어 객체입니다. 다양한 유형의 구성 요소를 구축하는 데 사용할 수있는 추상적 인 스타일입니다. 부트 스트랩 프레임 워크의 해당 버전 파일은 다음과 같습니다.
덜 : 미디어
SASS : _Media.scss
미디어 객체는 일반적으로 그룹으로 나타나고 미디어 객체 그룹에는 일반적으로 다음 부분이 포함됩니다.
1. 미디어 객체 컨테이너 : 미디어 객체의 모든 내용을 수용하는 데 사용됩니다. 클래스 이름은 컨테이너에 사용해야합니다. 메디아
2. 미디어 객체의 객체 : 일반적으로 그림과 class.media-object가 필요합니다.
3. 미디어 대상의 주제 : 그것은 미디어 객체의 주제 내용입니다. 요소가 될 수 있으며 class.media-body를 사용해야합니다.
4. 미디어 객체의 제목 : 미디어 객체를 설명하는 데 사용되는 제목, class.media-heading이 필요합니다.
또한, 클래스 .pull-leff 및 .pull-right는 종종 부트 스트랩 프레임 워크에 사용되어 미디어 객체의 부동 물체 방법을 제어합니다.
CSS 소스 코드는 다음과 같습니다.
.media, .media-body {오버 플로우 : Zoom : 1;}. media, media, .media .media .media {margin-top : 15px;}. Media : Media : Media : Media-Object {display : block;}. 미디어 헤드 {margin : 0 5px;}. 10px;}. 미디어> .pull-right {margin-left : 10px;}미디어 스타일은 비교적 간단하며 그 사이의 간격을 설정합니다.
미디어 객체의 사용을 살펴 보겠습니다.
<h1> 기본 미디어 객체 </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> 연꽃 연못의 달빛 </h4> <div> 요즘 상당히 불안합니다. 나는 시원한 공기를 즐기기 위해 오늘 밤 마당에 앉아 있었고, 갑자기 나는 매일 걸은 연꽃 연못을 기억했다. 이 보름달 밤에 나는 항상 다르게 보일 것입니다. 달이 점차 상승하고 벽 밖에서 도로에서 아이들의 웃음 ... </div> </div> </div>
미디어 객체의 중첩
부트 스트랩 미디어 객체 둥지, 미디어 객체 (.media-body)의 본문에 다른 미디어 객체 구조를 놓습니다. 미디어 객체 중첩의 적용을 살펴 보겠습니다.
<h1> 기본 미디어 객체의 중첩 </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> 연꽃 연못의 달빛 </h4> <div> 달빛이 잎에 조용히 부어 물처럼 꽃을 부릅니다. 연꽃 연못에 얇은 푸른 안개가 떠있었습니다. 잎과 꽃은 우유로 씻겨 진 것 같습니다. 그들은 또한 베일로 덮인 꿈과 같습니다. 보름달이지만 하늘에는 희미한 구름이 있으므로 밝게 빛날 수 없습니다. 그러나 나는 이것이 단지 장점이라고 생각합니다. 깊은 수면은 필수 불가결하고 낮잠은 독특한 맛을 가지고 있습니다. </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> 중첩 된 내용은 다음과 같습니다. 이 나무들은 연꽃 연못을 둘러싸고있었습니다. 그들은 마치 달빛을 위해 특별히 남아있는 것처럼 몇 가지 간격이 새겨 져있는 길의 측면에 있었고, 몇 가지 간격이 새겨 져있었습니다. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> 여기에 중첩 된 내용이 있습니다 2222 </h4> <div> 트리 톱에 먼 산이 있으며 조금 부주의합니다. 나무의 균열에서 하나 또는 두 개의 가로등이 새겨 져있었습니다. 목록이없는 것은 목이 마른 잠자는 사람들의 눈이었습니다. 이 시점에서 가장 활기찬 것은 나무에있는 시카다의 소리와 물 속의 개구리 소리입니다. 그러나 흥분은 그들의 것이며 나는 아무것도 없습니다 </div> </div> </div> </div> </div> </div> </div>
효과는 다음과 같습니다.
미디어 객체 목록
부트 스트랩 프레임 워크는 미디어 객체 목록 디스플레이 효과를 제공합니다. 구조를 작성할 때는 태그 UL을 사용하여 태그 UL.Media-list에 클래스 이름을 추가하고 태그 UL.Media에서 클래스를 사용할 수 있습니다.
예를 들어:
<H1> 미디어 객체 목록 </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> 미디어 객체 목록 111 </h4> <div> 연꽃 연못을 따라, 그것은 작은 석탄 칩 도로입니다. 이것은 외딴 길입니다. 낮에는 걷는 사람이 거의 없으며 밤에는 더 외롭습니다. 연꽃 주변에는 많은 나무가 자라며 우울합니다 (2). 길가에는 버드 나무와 이름이 알려지지 않은 나무가있었습니다. 달빛이없는 밤에 길은 우울하고 약간 무서웠습니다. 달빛이 여전히 희미했지만 오늘 밤 아주 좋았습니다. </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> 미디어 객체 목록 222 </h4> <div> 나는 도로에서 유일한 사람이었다. 이 세상은 내 것 같습니다. 나는 또한 평범한 자아를 넘어서 다른 세상에 들어간 것 같은 느낌이 듭니다. 나는 흥분과 평온함을 좋아합니다. 나는 그룹에서 살고 혼자있는 것을 좋아합니다. 오늘 밤처럼,이 광대 한 달 아래에서, 당신은 아무것도 생각하지 않고 아무것도 생각하지 않을 수 있으며, 당신은 자유로운 사람이라고 생각할 것입니다. </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> 미디어 객체 목록 333 </h4> <div> 하루 동안해야 할 일은 지금 무시할 수 있습니다. 이것은 혼자있는 것의 아름다움이며, 나는 끝없는 연꽃 향기와 달빛을 즐길 것입니다. 구불 구불 한 연꽃 연못 위에는 들판의 잎이 어디에나 있습니다. 키가 큰 댄서의 치마처럼 잎은 매우 높습니다. 잎의 층 중 일부는 일부 흰 꽃이 산발적으로 점선으로, 일부는 우아하게 피고 있으며, 일부는 꽃을 부끄러워하고 있습니다. 진주와 마찬가지로 푸른 하늘의 별, 욕조에서 아름다움. 산들 바람은 마치 멀리있는 고층 빌딩에서 노래의 침묵처럼 향기를 가져옵니다. </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> 미디어 객체 목록 444 </h4> <div> 갑자기 나는 Lotus를 따는 이야기를 기억했습니다. Lotus Picking은 Jiangnan의 오래된 관습입니다. 그것은 매우 일찍 존재했던 것으로 보이지만, 6 개의 왕조에는 번영했다. 우리는시에서 대략 알 수 있습니다. 로터스를 선택한 사람들은 젊은 여성들이었고, 작은 보트에 가서 에로틱 한 노래를 부르는 젊은 여성이었습니다 (14). 말할 것도없이, 로터스를 선택하는 많은 사람들이 있습니다. 로터스를 선택하는 사람들도 있습니다. 활기찬 계절이었고 낭만적이었습니다 (15). Liang의 황제 (16)는 "로터스 픽킹 FU"에서 잘 말했다. </div> </div> </li> </ul>
효과는 다음과 같습니다.