注册有礼
您现在的位置是：群英 > 开发技术 > web开发
Bootstrap列表组能做什么,列表组组件如何使用
Admin发表于 2022-05-09 17:43:34960 次浏览
这篇文章主要给大家介绍“Bootstrap学习之列表组组件的用法”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“Bootstrap学习之列表组组件的用法”文章能对大家有所帮助。

本篇文章带大家了解一下Bootstrap中列表组组件的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在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;
}

自定义列表组的运用 


	自定义列表组

列表项的状态设置

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;
}

例子： 


	列表组状态设置

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

多彩列表组

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

多彩列表组的运用： 


	多彩列表组

效果如下：


关于“Bootstrap学习之列表组组件的用法”的内容就介绍到这，感谢各位的阅读，相信大家对Bootstrap学习之列表组组件的用法已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： Bootstrap列表组
上一篇： Bootstrap开发工具包括什么，分别有何作用
下一篇： PHP如何实现16进制转换36进制，使用什么方法
相关信息推荐
Bootstrap清除浮动的方法是什么，代码怎样写
2022-07-21 17:53:59　
摘要：bootstrap清除浮动的方法：首先打开相应的代码文件；然后通过为父元素添加“.clearfix”类的方法清除浮动，语句如“<div class="clearfix">...</div>”。
怎么用python求一百内的奇数和
2022-05-09 17:22:34　
摘要：python求1到100的奇数和的方法：可以用while循环实现，在循环内部变量n不断自减，直到变为【-1】时，不再满足while条件，循环退出，代码为【for i in range(0,100):if i%2==1:sum += i;】。
Java中LinkedList有何意义，如何使用呢
2022-09-17 17:27:59　
摘要：本文主要介绍了Java实现双端链表LinkedList，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
云活动
推荐内容
  • PHP中替换第一位字符的方法和代码是什么
    2022-12-14 11:21:38
  • Python使用中有哪些高效、实用的高级技巧
    2022-08-19 17:53:01
  • 新手学习Python有哪些关键字要掌握
    2022-08-19 17:51:59
    • 热门关键词
    Bootstrap列表组 having关键字 运算符 MySQL登录原理 axios原理 js,canvas,加载 php判断是否在数组中 中文字符串提取 监控云服务器 事件执行机制 WordPress搭建个人博客/网站 Oracle的rownum oracle临时变量 php表格隔行颜色 自动定位浮标 IP Query的使用方法 php预处理语句 php文件上传验证 Mybatis注解 oracle修改字段名 提示工程师 Bard 数据库设计 中什么是引用 通义千问 Oracle mysql账户 php替换字符 mysql不区分大小写
    热门信息
  • Python中如何求阶乘？教你四个方法
    2022-02-25 17:19:26
  • Python怎么样创建txt文件，写入方法是什么？
    2022-01-24 19:23:44
  • pycharm怎么完全卸载？两个步骤帮你搞定
    2022-01-04 18:53:44
  • Java中map判断是否存在key怎样做？教你两个方法
    2022-01-26 18:39:38
  • Python中怎样利用while求1到100的和？
    2021-11-20 17:46:01
  • Java中string转date有哪些方式，怎样实现？
    2022-01-18 18:00:09
  • Python中怎么定义数组？教你三种方法
    2022-01-13 18:58:11
  • Python中的eval函数的作用是什么，怎样用？
    2022-01-24 19:23:57
  • 用python如何读取csv文件，你知道几种方法？
    2021-11-22 17:53:55
  • python中怎样统计元素出现的次数，方法有哪些？
    2021-11-20 17:45:40
    • 群英网络助力开启安全的云计算之旅
    立即注册，领取新人大礼包
    专业资深工程师驻守
    7X24小时极速响应
    一站式无忧技术支持
    免费备案服务
    • 联系我们
    • 24小时售后：4006784567
    • 24小时TEL ：0668-2555666
    • 售前咨询TEL：400-678-4567

    • 官方微信
      官方微信
    Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
    增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
    免费拨打 400-678-4567
    免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
    微信公众号
    返回顶部
    返回顶部 返回顶部