Bootstrap媒体对象的示例分析
小编给大家分享一下Bootstrap媒体对象的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、东兰网络推广、微信平台小程序开发、东兰网络营销、东兰企业策划、东兰品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供东兰建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
默认样式
媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:
☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选
除了上面四个部分之外,在Bootstrap框架中还常常使用“media-left”或者“media-right”来控制媒体对象中的对象浮动方式
[注意]在 html 结构中, .media-right 应当放在 .media-body 的后面
媒体对象样式相对来说比较简单,只是设置他们之间的间距
.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-left { margin-right: 10px; } .media-right { margin-left: 10px; }
嵌套
在评论系统中,经常会有媒体对象嵌套的需求。在Bootstrap框架中的媒体对象也具备这样的功能,只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”