Bootstrap教程(22)--列表组

淡淡的烟草味﹌ 2022-11-06 03:54 251阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 普通列表组
 *  3. 将普通链接转换为列表组
 *  4. 调整列表项的样式
 *  5. 带徽章的列表组
 *  6. 添加标题和内容
 *  7. 小结

# 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>

效果如下：  
![在这里插入图片描述][20210307210711737.png_pic_center]

# 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>

效果如下：  
![在这里插入图片描述][20210307213659723.png_pic_center]

# 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>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 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>

效果如下：  
![在这里插入图片描述][20210307213947959.png_pic_center]

# 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>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]

# 7. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210307210711737.png_pic_center]: /images/20221023/bc0b5ca58be744c1b264803439bb7086.png
[20210307213659723.png_pic_center]: /images/20221023/44225eb51a7e486ca36ab5fab9a41687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/9537b2e60512452ab5ea108b6a6b6ffe.png
[20210307213947959.png_pic_center]: /images/20221023/9b63d4fca4b0408a85b18d277df89276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/29444378b09144ec97b4cd5e5bc889b5.png