栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(14)--媒体与媒体列表

Bootstrap教程(14)--媒体与媒体列表

1. 概述

看到媒体,不要误解,此处媒体不是指的单纯的图形、视频、音频等媒体形式,而是指的Bootstrap中提供的一种显示组件。

Bootstrap媒体一般由文字、图像构成,大多数情况下图像作为一个抽象代表,文字作为内容描述。

举个最常见例子,微信中的聊天会话就是一个典型的媒体,左侧是头像,右侧上方是微信名称,右侧下方是最新的消息内容。

接下来我们就来使用Bootstrap实现下媒体。

2. 媒体实现

我们以微信聊天会话为例实现下媒体。

首先,我们设置一个媒体对象。

 			    

第二,设置媒体左侧容器,用于放置头像。

				

第三,在左侧容器中放入具体的媒体对象,需要使用.media-object类修饰。

				

Bootstrap logo

第四,添加媒体的主体部分,并在主体部分设置标题,此处标题部分放置微信好友名称。

				

Bootstrap logo
bootstrap大神

最后,标题下方添加描述信息,此处放置最近的聊天内容。

				

Bootstrap logo
bootstrap大神

你好吗,我想你了。

效果如下,可见一个媒体的模样已经出来了,再精细调整下文字和图像大小即可。

3. 媒体列表

微信对话不是一个,而是很多个组成的一个列表。

Bootstrap中可以通过.media-list类元素包裹起媒体,成为媒体列表。

示例代码:

				

Bootstrap logo
bootstrap大神

你好吗,我想你了。


Bootstrap logo
bootstrap大神2

你好吗,我想你了。

对应效果:

4. 小结

Bootstrap媒体与媒体列表其实非常好用,使用场景也很多,例如博客列表、商品列表等等,所以还是需要好好掌握下子的。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号