Bootstrap源码解读媒体对象、列表组和面板（10）

Bootstrap源码解读媒体对象、列表组和面板（10）

媒体对象

基础媒体对象

例如：

实现原理只是设置他们之间的间距。

媒体对象的嵌套

只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。

媒体对象列表

使用ul，并且在ul上添加类名“media-list”，而在li上使用类名“media”即可。

媒体对象列表只是把列表的左间距置０以及去掉了项目列表符号，实现源码如下：

.media-list {

padding-left: 0;

list-style: none;

}

列表组

基础列表组

基础列表组主要包括两个部分：

list-group：列表组容器，常用的是ul元素，也可以是ol或者div元素

list-group-item：列表项，常用的是li元素，也可以是div元素

例如：

主要设置了其间距，边框和圆角。实现源码如下：

.list-group {

padding-left: 0;

margin-bottom: 20px;

}

.list-group-item {

position: relative;

display: block;

padding: 10px 15px;

margin-bottom: -1px;

background-color: #fff;

border: 1px solid #ddd;

}

.list-group-item:first-child {

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

.list-group-item:last-child {

margin-bottom: 0;

border-bottom-right-radius: 4px;

border-bottom-left-radius: 4px;

}

带徽章的列表组

其实就是将徽章组件和基础列表组结合在一起。只需要在“list-group-item”中添加徽章组件“badge”即可。例如：

2列表项1

3列表项2

4列表项3

实现原理就是给徽章设置了一个右浮动，如果有两个徽章同时在一个列表项中出现时，设置了他们之间的距离。实现源码如下：

.list-group-item > .badge {

float: right;

}

.list-group-item > .badge + .badge {

margin-right: 5px;

}

带链接的列表组

要让列表组带链接，我们可以给列表项的文本添加链接标签，然后增加style=”display: block”使整行可点击。例如：

111

222

333

不过Bootstrap有另外的实现方式，就是把ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。例如：

列表项1

列表项2

列表项3

主要是给文本去掉了下划线，增加悬浮效果。实现源码如下：

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;

}

自定义列表组

在链接列表组的基础上新增了两个样式：

list-group-item-heading：用来定义列表项头部样式

list-group-item-text：用来定义列表项主要内容

例如：

内容1内容1内容1

内容2内容2内容2

实现源码如下：

a.list-group-item .list-group-item-heading {

color: #333;

}

.list-group-item.disabled .list-group-item-heading,

.list-group-item.disabled:hover .list-group-item-heading,

.list-group-item.disabled:focus .list-group-item-heading {

color: inherit;

}

.list-group-item.disabled .list-group-item-text,

.list-group-item.disabled:hover .list-group-item-text,

.list-group-item.disabled:focus .list-group-item-text {

color: #777;

}

.list-group-item.active .list-group-item-heading,

.list-group-item.active:hover .list-group-item-heading,

.list-group-item.active:focus .list-group-item-heading,

.list-group-item.active .list-group-item-heading > small,

.list-group-item.active:hover .list-group-item-heading > small,

.list-group-item.active:focus .list-group-item-heading > small,

.list-group-item.active .list-group-item-heading > .small,

.list-group-item.active:hover .list-group-item-heading > .small,

.list-group-item.active:focus .list-group-item-heading > .small {

color: inherit;

}

.list-group-item.active .list-group-item-text,

.list-group-item.active:hover .list-group-item-text,

.list-group-item.active:focus .list-group-item-text {

color: #e1edf7;

}

.list-group-item-heading {

margin-top: 0;

margin-bottom: 5px;

}

.list-group-item-text {

margin-bottom: 0;

line-height: 1.3;

}

列表项的状态设置

在对应的列表项中添加类名“active/disabled”即可。

彩色列表组

在“listgZOXvB-group-item”基础上增加对应的类名即可：

list-group-item-success：成功绿

list-group-item-info：信息蓝

list-group-item-warning：警告黄

list-group-item-danger：错误红

实现原理其实仅仅是修改了背景、文本和边框的颜色而已。

面板

基础面板

基础面板就是div容器运用了“panel”样式，产生一个具有边框的文本显示块，然后在里面添加了一个“div.panel-body”来放置面板主体内容。由于“panel”不控制主题颜色，所以我们在“panel”的基础上增加一个控制颜色的主题“panel-default”。例如：

实现源码如下：

.panel {

margin-bottom: 20px;

background-color: #fff;

border: 1px solid transparent;

border-radius: 4px;

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

}

.panel-body {

padding: 15px;

}

面板的头和尾

使用panel-heading和panel-footer即可。例如：

实现源码如下：

.panel-heading {

padding: 10px 15px;

border-bottom: 1px solid transparent;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

}

.panel-heading > .dropdown .dropdown-toggle {

color: inherit;

}

.panel-title {

margin-top: 0;

margin-bottom: 0;

font-size: 16px;

color: inherit;

}

.panel-title > a {

color: inherit;

}

.panel-footer {

padding: 10px 15px;

background-color: #f5f5f5;

border-top: 1px solid #ddd;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px;

}

彩色面板

面板组件除了默认的主题样式panel-default之外，还有以下几种彩色主题样式：

panel-primary：重点蓝

panel-success：成功绿

panel-info：信息蓝

panel-warning：警告黄

panel-danger：危险红

例如：

面板中嵌套表格

例如：

这里是正文

我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以，不过由于panel-body设置了一个padding：15px的值，所以那样的话表格和面板边缘会有一点间距，不太好看。

面板中嵌套列表组

例如：

这里是正文

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。