博客> bootstrap教程(二) —— 列表组listgroup
bootstrap教程(二) —— 列表组listgroup
2019-11-17 14:34 评论:0 阅读:834 哟猫Intry
js html5

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: bootstrap教程(二) —— 列表组listgroup

列表组

列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码:

☑ LESS版本:对应的源码文件 list-group.less

☑ Sass版本:对应的源码文件是 _list-group.scss

☑ 编译出的Bootstrap版本:对应的源码bootstrap.css文件第4820行~第4994行

列表组--基础列表组

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

☑ list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素

☑ list-group-item:列表项,常用的是li元素,当然也可以是div元素

来看一个简单的示例:

  • 揭开CSS3的面纱
  • CSS3选择器
  • CSS3边框
  • CSS3背景
  • CSS3文本

运行效果如下:

list

原理分析:

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

/bootstrap.css文件第4820行~第4840行/ .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”:

  • 13揭开CSS3的面
  • 456CSS3选择器
  • 892CSS3边框
  • 90CSS3背景
  • 1290CSS3文本

实现原理:

实现效果非常简单,就是给徽章设置了一个右浮动,当然如果有两个徽章同时在一个列表项中出现时,还设置了他们之间的距离:

/bootstrap.css文件第4841行~第4846行/ .list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; } 列表组--带链接的列表组

带链接的列表组,其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上,给列表项的文本添加链接:

这样做有一个不足之处,就是链接的点击区域只在文本上有效:

但很多时候,都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“display:block”;

虽然这样能解决问题,达到需求。但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果:

原理实现:

如果使用a.list-group-item时,在样式需要做一定的处理,比如说去文本下划线,增加悬浮效果等:

/bootstrap.css文件第4847行~第4858行/ 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; }

收藏
0
sina weixin mail 回到顶部