详解Bootstrap列表组组件
列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码:
LESS:list-group.less
SASS:_list-group.scss
列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分:
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;
}
来看一个例子:
<h1>基础列表组</h1>
<ul class="list-group">
<li class="list-group-item">腊肉土豆焖饭</li>
<li class="list-group-item">香辣风味炸鸡块</li>
<li class="list-group-item">香菜皮蛋豆腐</li>
<li class="list-group-item">荷兰豆炒马蹄</li>
<li class="list-group-item">山楂排骨</li>
<li class="list-group-item">韭菜炒河虾</li>
</ul>
带徽章的列表组
带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果,具体做法很简单,只需在.list-group-item的基础上追加徽章组件“badge”
实现原理:
给徽章设置了一个右浮动,当然如果两个徽章同时在一个列表项中出现时,还设置了它们之间的距离
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
例子:
<h1>带徽章的列表组</h1>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>
腊肉土豆焖饭
</li>
<li class="list-group-item">
<span class="badge">20</span>
香辣风味炸鸡块
</li>
<li class="list-group-item">
<span class="badge">12</span>
香菜皮蛋豆腐
</li>
<li class="list-group-item">
<span class="badge">5</span>
荷兰豆炒马蹄
</li>
<li class="list-group-item">
<span class="badge">8</span>
山楂排骨
</li>
<li class="list-group-item">
<span class="badge">15</span>
韭菜炒河虾
</li>
</ul>
带链接的列表组
带连接的列表组其实就是每个列表项都具有链接效果,一般让人想到的就是在基础列表组的基础上,给列表项的文本添加链接,如:
<ul class="list-group">
<li class="list-group-item"><a href="#">腊肉土豆焖饭</a></li>
<li class="list-group-item"><a href="#">香辣风味炸鸡块</a></li>
<li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li>
<li class="list-group-item"><a href="#">荷兰豆炒马蹄</a></li>
<li class="list-group-item"><a href="#">山楂排骨</a></li>
<li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>
效果如下:
这样做有个不足之处,就是链接的点击区域只在文本上有效;但很多时候都希望在列表项的任何区域都具备可点击,这是就需要在链接标签上增加额外的样式:display:block;但在bootstrap框架中,还是采用了另一种实现方式,就是将ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样就可以达到需要的效果。
实现原理:
如果使用a.list-group-item,样式就需要做一定的处理,如:去文本下划线,增加悬浮效果等;下面是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;
}
带链接列表组的运用:
<h1>带链接的列表组</h1>
<ul class="list-group">
<a class="list-group-item" href="#">腊肉土豆焖饭</a>
<a class="list-group-item" href="#">香辣风味炸鸡块</a>
<a class="list-group-item" href="#">香菜皮蛋豆腐</a>
<a class="list-group-item" href="#">荷兰豆炒马蹄</a>
<a class="list-group-item" href="#">山楂排骨</a>
<a class="list-group-item" href="#">韭菜炒河虾</a>
</ul>
效果如下:
自定义列表组
bootstrap框架在链接列表组的基础上增加了两个样式:
.list-group-item-heading:用来定义列表项头部样式
.list-group-item-text:用来定义列表项主要内容
这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容
实现原理:
这两个样式主要控制不容状态下的文本颜色,下面是css源码:
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;
}
自定义列表组的运用
<h1>自定义列表组</h1>
<ul class="list-group">
<a class="list-group-item">
<h4 class="list-group-item-heading">列表1标题</h4>
<p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表2标题</h4>
<p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表3标题</h4>
<p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表4标题</h4>
<p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表5标题</h4>
<p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表6标题</h4>
<p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
</a>
</ul>
列表项的状态设置
bootstrap框架中也给组合列表项提供了状态效果,特别是链接列表组,实现方法和前面介绍的组件类似,在列表组中只需在对应的列表项中添加类名:.active(表示当前状态)、.disabled(表示禁用状态)
实现原理:
在样式上主要对列表项的背景色和文本做了样式设置,下面是css源码:
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
color: #777;
background-color: #eee;
} .list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}
例子:
<h1>列表组状态设置</h1>
<ul class="list-group">
<a class="list-group-item active">
<h4 class="list-group-item-heading">列表1标题</h4>
<p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表2标题</h4>
<p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
</a>
<a class="list-group-item disabled">
<h4 class="list-group-item-heading">列表3标题</h4>
<p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表4标题</h4>
<p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表5标题</h4>
<p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表6标题</h4>
<p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
</a>
</ul>
效果如下(第三个列表项是禁用状态,鼠标移放在它上面有个禁用图标,这里是直接截的图,看不到这个效果):
多彩列表组
列表组组件和警告组件一样,bootstrap为不同的状态提供了不同的背景色和文本色,可以使用这几个类名定义不同背景色的列表项:
.list-group-item-success:成功 绿色(背景色)
.list-group-item-info:信息 蓝色(背景色)
.list-group-item-warning:警告 黄色(背景色)
.list-group-item-danger:错误 红色(背景色)
实现原理:
这几个类名仅修改了背景色和文本色,对应的源码如下:
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}
其它状态样式代码请查看源码文件,如果想给列表项添加背景色,只需在类.lis-group-item的基础上追加对应的类名即可。
多彩列表组的运用:
<h1>多彩列表组</h1>
<ul class="list-group">
<a href="#" class="list-group-item active">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-success">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-info">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-warning">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-danger">
列表项1
<span class="badge">10</span>
</a>
</ul>
效果如下:
详解Bootstrap列表组组件的更多相关文章
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- 详解Bootstrap进度条组件
在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...
- 第二百四十二节,Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...
- Bootstrap列表组
前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
- 详解Bootstrap按钮组件
按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮 ...
- 详解Bootstrap面板组件
面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...
- bootstrap学习笔记 Bootstrap 列表组
本文将介绍列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素ul 添加class list-group 向li添加class list-group-ite ...
- 详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
随机推荐
- 奔小康赚大钱 hdu 2255( KM )
http://acm.split.hdu.edu.cn/showproblem.php?pid=2255 带权匹配问题: #include <stdio.h> #include <a ...
- margin设置为百分比的含义
<!DOCTYPE html> <html> <head> <title>magin为百分比</title> </head> & ...
- 纯css用图片代替checkbox和radio,无js实现方法
html <ul id="is_offical_post_links"> <li> <label> <input type="c ...
- Sudoku Solver Backtracking
该博客好好分析 Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicat ...
- WordPaster.exe安装教程
安装教程: Firefox控件安装教程 Chrome控件安装教程 Chrome 45+控件安装教程 相关问题: 提示Runtime Error错误 360拦截 Chrome启用npapi Fire ...
- Windows 7 防火墙对Virtualbox guest的影响
今天测试ASA的public servers配置,在自己的Win7手提用Virtualbox装了个Linux作为测试服务器,网络设置为bridged.从外网可以ping通测试服务器,也可以连80端口, ...
- PHP生成迅雷、快车、旋风等软件的下载链接代码实例
PHP生成迅雷.快车.旋风等软件的下载链接代码实例 <?php function Download() { $urlodd=explode('//',$_POST["url" ...
- Coins(HDU 2844):一个会超时的多重背包
Coins HDU 2844 不能用最基础的多重背包模板:会超时的!!! 之后看了二进制优化了的多重背包. 就是把多重转变成01背包: 具体思路见:http://www.cnblogs.com/tt ...
- RHEL5.8使用yum安装xclock
使用xshell连接RHEL5.8服务器,敲入xclock命令想验证图形化安装条件,但是显示无此命令. [root@template ~]# xclock -bash: xclock: command ...
- Replication--复制延迟的诊断和解决
要解决复制延迟问题,需要首先定位复制延迟发生点,再找出复制延迟的原因,再做相应处理. 复制延迟发生点:1. 发布服务器2. 分发服务器3. 订阅服务器4. 发布服务器与分发服务器和分发服务器与订阅服务 ...