媒体对象
基础媒体对象
例如:
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/350x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列:十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
</div>
</div>
实现原理只是设置他们之间的间距。
媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。
媒体对象列表
使用ul,并且在ul上添加类名“media-list”,而在li上使用类名“media”即可。
媒体对象列表只是把列表的左间距置0以及去掉了项目列表符号,实现源码如下:
.media-list {
padding-left: 0;
list-style: none;
}
列表组
基础列表组
基础列表组主要包括两个部分:
list-group:列表组容器,常用的是ul元素,也可以是ol或者div元素
list-group-item:列表项,常用的是li元素,也可以是div元素
例如:
<ul class="list-group">
<li class="list-group-item">111</li>
<li class="list-group-item">222</li>
<li class="list-group-item">333</li>
</ul>
主要设置了其间距,边框和圆角。实现源码如下:
.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”即可。例如:
<ul class="list-group">
<li class="list-group-item">
<span class="badge">2</span>列表项1
</li>
<li class="list-group-item">
<span class="badge">3</span>列表项2
</li>
<li class="list-group-item">
<span class="badge">4</span>列表项3
</li>
</ul>
实现原理就是给徽章设置了一个右浮动,如果有两个徽章同时在一个列表项中出现时,设置了他们之间的距离。实现源码如下:
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
带链接的列表组
要让列表组带链接,我们可以给列表项的文本添加链接<a>
标签,然后增加style=”display: block”使整行可点击。例如:
<ul class="list-group">
<li class="list-group-item">
<a href="##" style="display: block">111</a>
</li>
<li class="list-group-item">
<a href="##" style="display: block">222</a>
</li>
<li class="list-group-item">
<a href="##" style="display: block">333</a>
</li>
</ul>
不过Bootstrap有另外的实现方式,就是把ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。例如:
<div class="list-group">
<a href="##" class="list-group-item">列表项1</a>
<a href="##" class="list-group-item">列表项2</a>
<a href="##" class="list-group-item">列表项3</a>
</div>
主要是给文本去掉了下划线,增加悬浮效果。实现源码如下:
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:用来定义列表项主要内容
例如:
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">标题1</h4>
<p class="list-group-item-text">内容1内容1内容1</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">标题2</h4>
<p class="list-group-item-text">内容2内容2内容2</p>
</a>
</div>
实现源码如下:
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”即可。
彩色列表组
在“list-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”。例如:
<div class="panel panel-default">
<div class="panel-body">基础面板</div>
</div>
实现源码如下:
.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即可。例如:
<div class="panel panel-default">
<div class="panel-heading">头部内容</div>
<div class="panel-body正文内容</div>
<div class="panel-footer">尾部内容</div>
</div>
实现源码如下:
.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:危险红
例如:<div class="panel panel-primary">…</div>
面板中嵌套表格
例如:
<div class="panel panel-primary">
<div class="panel-heading">这里是标题</div>
<div class="panel-body">
<p>这里是正文</p>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>表内容1</td>
<td>表内容2</td>
<td>表内容3</td>
</tr>
</tbody>
</table>
<div class="panel-footer">这里是尾巴</div>
</div>
我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以,不过由于panel-body设置了一个padding:15px的值,所以那样的话表格和面板边缘会有一点间距,不太好看。
面板中嵌套列表组
例如:
<div class="panel panel-primary">
<div class="panel-heading">这里是标题</div>
<div class="panel-body">
<p>这里是正文</p>
</div>
<ul class="list-group">
<li class="list-group-item">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
</ul>
<div class="panel-footer">这里是尾巴</div>
</div>