媒体对象
基础媒体对象
例如:
实现原理只是设置他们之间的间距。
媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。
媒体对象列表
使用ul,并且在ul上添加类名“media-list”,而在li上使用类名“media”即可。 媒体对象列表只是把列表的左间距置0以及去掉了项目列表符号,实现源码如下:
列表组
基础列表组
基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或者div元素 list-group-item:列表项,常用的是li元素,也可以是div元素 例如:
主要设置了其间距,边框和圆角。实现源码如下:
带徽章的列表组
其实就是将徽章组件和基础列表组结合在一起。只需要在“list-group-item”中添加徽章组件“badge”即可。例如:
实现原理就是给徽章设置了一个右浮动,如果有两个徽章同时在一个列表项中出现时,设置了他们之间的距离。实现源码如下:
带链接的列表组
要让列表组带链接,我们可以给列表项的文本添加链接标签,然后增加style=”display: block”使整行可点击。例如:
不过Bootstrap有另外的实现方式,就是把ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。例如:
主要是给文本去掉了下划线,增加悬浮效果。实现源码如下:
<div class="jb51code">
<pre class="brush:css;">
a.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}