Bootstrap 미디어 객체_javascript 기술 구현

웹 페이지에서 왼쪽에 그림이 있고 오른쪽에 콘텐츠가 있는 것은 매우 일반적인 효과입니다. 이는 다양한 유형의 구성 요소를 만드는 데 사용할 수 있는 추상 스타일이기도 합니다. 부트스트랩 프레임워크, 기타 해당 버전 파일은 다음과 같습니다.

LESS: media.less

SASS: _media.scss

미디어 개체는 일반적으로 그룹으로 나타납니다. 미디어 개체 그룹에는 일반적으로 다음 부분이 포함됩니다.

1. 미디어 개체의 컨테이너: 미디어 개체의 모든 콘텐츠를 보관하는 데 사용됩니다. 클래스 이름은 .media를 컨테이너에 사용해야 합니다.

2. 미디어 객체의 객체: 일반적으로 그림, .media-object 클래스를 사용해야 합니다

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

4. 미디어 객체의 제목: 미디어 객체를 설명하는 데 사용되는 제목, .media-heading

클래스를 사용해야 합니다.

또한 .pull-left 및 .pull-right 클래스는 미디어 객체에 있는 객체의 플로팅 모드를 제어하기 위해 부트스트랩 프레임워크에서 자주 사용됩니다

다음은 CSS 소스 코드입니다.

.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 > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}

미디어 스타일은 비교적 간단합니다. 단지 간격만 설정하면 됩니다.

미디어 개체의 사용을 살펴보겠습니다.

<h1>默认媒体对象</h1>
<div class="media">
<a href="#" class="pull-right">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的夜里，总该另有一 番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑……</div>
</div>
</div>

미디어 객체 중첩

부트스트랩 미디어 개체 중첩은 미디어 개체의 본문(.media-body)에 다른 미디어 개체 구조를 배치하기만 하면 됩니다. 미디어 객체 중첩 사용법을 살펴보겠습니다

<h1>默认媒体对象的嵌套</h1>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>月光如流水一般，静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容1111</h4>
<div>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/5.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容2222</h4>
<div>树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有</div>
</div>
</div>
</div>
</div>
</div>
</div>

효과는 다음과 같습니다.

미디어 개체 목록

부트스트랩 프레임워크는 미디어 개체 목록 표시 효과를 제공합니다. 구조를 작성할 때 ul 태그를 사용하고 ul 태그에 클래스 이름 .media-list를 추가하고 li 태그에 .media 클래스를 사용할 수 있습니다. 🎜>

예:

<h1>媒体对象列表</h1>
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表111</h4>
<div>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，长着许多树，蓊蓊（wěng）郁郁（2）的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/2.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表222</h4>
<div>路上只我一个人，背着手踱（duó）着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱宁静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表333</h4>
<div>白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。曲曲折折的荷塘上面，弥望（3）的是田田（4）的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表444</h4>
<div>忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌（14）去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流（15）的季节。梁元帝（16）《采莲赋》里说得好：。</div>
</div>
</li>
</ul>

효과는 다음과 같습니다.