Home > Article > Web Front-end > Implementation of Bootstrap media objects_javascript skills
In a web page, it is a very common effect to have pictures on the left and content on the right. It is also a media object. It is an abstract style that can be used to build different types of components. In the bootstrap framework, other The corresponding version files are as follows:
LESS: media.less
SASS: _media.scss
Media objects generally appear in groups. A group of media objects generally includes the following parts:
1. Container of media objects: used to hold all contents of media objects. The class name .media needs to be used on the container
2. The object of the media object: usually a picture, you need to use the class .media-object
3. The body of the media object: It is the main content of the media object, which can be any element. You need to use the class .media-body
4. The title of the media object: a title used to describe the media object. The class .media-heading
is required.In addition, the classes .pull-left and .pull-right are often used in the bootstrap framework to control the floating mode of objects in media objects
The following is their css source code:
.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; }
Media styles are relatively simple, just set the spacing between them;
Let’s take a look at the use of media objects:
<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>
Nesting of media objects
Bootstrap media object nesting, simply place another media object structure in the body of the media object (.media-body). Let’s take a look at the use of media object nesting
<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>
The effect is as follows:
List of media objects
The bootstrap framework provides a media object list display effect. When writing the structure, you can use the tag ul, add the class name .media-list to the tag ul, and use the class .media on the tag li
For example:
<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>
The effect is as follows: