Bootstrap 组件:列表组组件(list-group)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。

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

状态
list-group 列表组容器,常用的是ul元素,也可以是ol或div元素
list-group-item 列表项,常用的是li元素,也可以是div元素

默认样式

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

<ul class="list-group">
    <li class="list-group-item">item 1</li>
    <li class="list-group-item">item 2</li>
    <li class="list-group-item">item 3</li>
    <li class="list-group-item">item 4</li>
    <li class="list-group-item">item 5</li>
</ul>

1.png


带徽章的列表组

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果,只需在.list-group-item的基础上追加徽章组件“badge”,它会自动被放在右边。用法如下:

<ul class="list-group">
    <li class="list-group-item">item 1<span class="badge">2</span></li>
    <li class="list-group-item">item 2<span class="badge">4</span></li>
    <li class="list-group-item">item 3<span class="badge">6</span></li>
    <li class="list-group-item">item 4<span class="badge">8</span></li>
    <li class="list-group-item">item 5<span class="badge">10</span></li>
</ul>

2.png


带链接的列表组

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

<ul class="list-group">
    <li class="list-group-item"><a href="##">item 1</a></li>
    <li class="list-group-item"><a href="##">item 2</a></li>
    <li class="list-group-item"><a href="##">item 3</a></li>
    <li class="list-group-item"><a href="##">item 4</a></li>
    <li class="list-group-item"><a href="##">item 5</a></li>
</ul>

3.png

链接的点击区域只在文本上有效;但很多时候都希望在列表项的任何区域都具备可点击,这是就需要在链接标签上增加额外的样式:display:block;但在bootstrap框架中,还是采用了另一种实现方式,就是将ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样就可以达到需要的效果。

<div class="list-group">
    <a class="list-group-item active">item 1</a>
    <a class="list-group-item">item 2</a>
    <a class="list-group-item">item 3</a>
    <a class="list-group-item">item 4</a>
    <a class="list-group-item">item 5</a>
</div>

4.png


按钮

列表组中的元素也可以直接就是按钮(也同时意味着父元素必须是<div>而不能用<ul>了),并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的.btn类!
其用法如下:

<div class="list-group">
    <button type="button" class="list-group-item">item 1</button>
    <button type="button" class="list-group-item">item 2</button>
    <button type="button" class="list-group-item">item 3</button>
    <button type="button" class="list-group-item">item 4</button>
    <button type="button" class="list-group-item">item 5</button>
</div>

它的效果和默认样式的效果一致,只不过多了一个移入有切换按钮背景色的效果。


被禁用的条目

.list-group-item添加.disabled类可以让单个条目显示为灰色,表现出被禁用的效果。

<div class="list-group">
    <a class="list-group-item disabled">item 1</a>
    <a class="list-group-item">item 2</a>
    <a class="list-group-item">item 3</a>
    <a class="list-group-item">item 4</a>
    <a class="list-group-item">item 5</a>
</div>

5.png


情境类

列表组组件和警告组件一样,bootstrap为不同的状态提供了不同的背景色和文本色,可以使用这几个类名定义不同背景色的列表项:

状态
.list-group-item-success 成功 绿色(背景色)
.list-group-item-info 信息 蓝色(背景色)
.list-group-item-warning 警告 黄色(背景色)
.list-group-item-danger 错误 红色(背景色)
<div class="list-group">
    <a class="list-group-item list-group-item-success">item 1</a>
    <a class="list-group-item list-group-item-danger">item 2</a>
    <a class="list-group-item list-group-item-warning">item 3</a>
    <a class="list-group-item list-group-item-info">item 4</a>
</div>

6.png


定制内容

列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。bootstrap框架在链接列表组的基础上增加了两个样式:

状态
.list-group-item-heading 用来定义列表项头部样式
list-group-item-text 用来定义列表项主要内容

这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容。

<div class="list-group">
    <a href="##" class="list-group-item active">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
</div>

7.png


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
8天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
15 0
|
8天前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
57 0
|
7月前
|
前端开发 容器
|
7月前
|
前端开发 容器
|
8天前
|
前端开发
Bootstrap 5 保姆级教程(七):分页 & 列表组
Bootstrap 5 保姆级教程(七):分页 & 列表组
|
8天前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
5月前
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
77 0
|
8天前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
11 0
|
8天前
|
前端开发
bootstrap组件
bootstrap组件
18 0
|
8天前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
25 0

热门文章

最新文章