为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 Bootstrap教程(22)--列表组

Bootstrap教程(22)--列表组

2021.04.01 22:47 1472浏览

1. 概述

列表组用来显示一组关联的显示元素,Bootstrap提供了可以灵活使用的列表组组件list-group,本篇就来具体演示下。

2. 普通列表组

list-group类修饰ul元素,使用list-group-item类修饰li元素,即可创建列表组,代码如下:

				普通列表组:
                <ul class="list-group">
                    <li class="list-group-item">第1节</li>
                    <li class="list-group-item">第2节</li>
                    <li class="list-group-item">第3节</li>
                    <li class="list-group-item">第4节</li>
                </ul>

效果如下:
图片描述

3. 将普通链接转换为列表组

不仅可以针对ul、li组合应用列表组样式类,还可以对普通的div、a元素使用。

				链接转换为列表组:
                <div class="list-group">
                    <a class="list-group-item">第1节</a>
                    <a class="list-group-item">第2节</a>
                    <a class="list-group-item">第3节</a>
                    <a class="list-group-item">第4节</a>
                </div>

效果如下:
图片描述

4. 调整列表项的样式

可以针对列表项应用一些样式,例如active表示选中样式,disabled表示禁用,还有一些常见的其他样式:

				调整列表项样式
                <ul class="list-group">
                    <li class="list-group-item active">active</li>
                    <li class="list-group-item disabled">disabled</li>
                    <li class="list-group-item list-group-item-info">list-group-item-info</li>
                    <li class="list-group-item list-group-item-success">list-group-item-success</li>
                    <li class="list-group-item list-group-item-warning">list-group-item-warning</li>
                    <li class="list-group-item list-group-item-danger">list-group-item-danger</li>
                </ul>

效果如下:
在这里插入图片描述

5. 带徽章的列表组

可以在列表项中添加徽章,有趣的是,徽章会自动的排列到列表组的右侧,如下:

				带徽章列表组
                <ul class="list-group">
                    <li class="list-group-item">收件箱<span class="badge">5</span></li>
                    <li class="list-group-item">发件箱<span class="badge">5</span></li>
                    <li class="list-group-item">草稿箱<span class="badge">5</span></li>
                    <li class="list-group-item">回收站<span class="badge">5</span></li>
                </ul>

效果如下:
图片描述

6. 添加标题和内容

列表项可以摆脱固定的文字内容,通过list-item-item-heading可以为列表项添加标题部分,然后通过list-group-item-text可以为列表项添加内容部分。

 				添加标题和内容
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">张三</div>
                        <div class="list-group-item-text">一个英俊的小伙子</div>
                    </li>
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">李四</div>
                        <div class="list-group-item-text">一个优秀的小伙子</div>
                    </li>
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">赵五</div>
                        <div class="list-group-item-text">一个有前途的的小伙子</div>
                    </li>
                </ul>

效果如下:
在这里插入图片描述

7. 小结

列表组其实并不算特别常用,但是如果有合适的场景,例如邮箱的导航,直接使用列表组无疑更加省心。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消