登录  /  注册
首页 > web前端 > js教程 > 正文

深入浅析Bootstrap列表组组件

PHP中文网
发布： 2017-04-01 15:50:41
原创
1268人浏览过

bootstrap，来自 twitter，是目前最受欢迎的前端框架。bootstrap 是基于 html、css、javascript 的，它简洁灵活，使得 web 开发更加快捷。

列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在bootstrap框架中也是一个独立的组件，所以也对应有自己独立源码：

LESS：list-group.less
SASS:_list-group.scss
登录后复制

列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分：

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

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

对于基础列表组并没有做过多的样式设置，主要设置了其间距、边框和圆角等；

.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;
}
登录后复制

来看一个例子：

基础列表组腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾
登录后复制

带徽章的列表组

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，具体做法很简单，只需在.list-group-item的基础上追加徽章组件“badge”

实现原理：

给徽章设置了一个右浮动，当然如果两个徽章同时在一个列表项中出现时，还设置了它们之间的距离


.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
登录后复制

例子：


带徽章的列表组13腊肉土豆焖饭20香辣风味炸鸡块12香菜皮蛋豆腐5荷兰豆炒马蹄8山楂排骨15韭菜炒河虾
登录后复制

带链接的列表组

带连接的列表组其实就是每个列表项都具有链接效果，一般让人想到的就是在基础列表组的基础上，给列表项的文本添加链接，如：


腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾
登录后复制

效果如下：

这样做有个不足之处，就是链接的点击区域只在文本上有效；但很多时候都希望在列表项的任何区域都具备可点击，这是就需要在链接标签上增加额外的样式：display：block；但在bootstrap框架中，还是采用了另一种实现方式，就是将ul.list-group用p.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;
}
登录后复制

带链接列表组的运用：


带链接的列表组腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾
登录后复制

效果如下：

自定义列表组

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;
}
登录后复制

自定义列表组的运用


自定义列表组列表1标题列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表2标题
列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容
列表3标题列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容
列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表4标题列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表5标题列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容
列表5内容列表5内容列表5内容列表5内容列表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内容列表6内容
登录后复制

列表项的状态设置

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;
}
登录后复制

例子：


列表组状态设置列表1标题列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容
列表2标题列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容
列表2内容列表3标题列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容
列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表4标题列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表5标题列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容
列表5内容列表5内容列表5内容列表5内容列表5内容列表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内容列表6内容
登录后复制

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

多彩列表组

列表组组件和警告组件一样，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的基础上追加对应的类名即可。

多彩列表组的运用：


多彩列表组列表项110列表项110列表项110列表项110列表项110
登录后复制

效果如下：

 以上就是深入浅析Bootstrap列表组组件的内容，更多相关内容请关注PHP中文网（www.php.cn）！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：基于javascript编写简单日历_javascript技巧 下一篇：Bootstrap媒体对象的实现_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
P粉722478067来自于2024-04-19 15:37:47
0 0 24
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
P粉722478067来自于2024-04-18 23:52:34
0 0 46
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 135
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 809
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 441
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 319
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 442
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 266
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 358
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1863
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部