Bootstrap 列表组
Bootstrap 列表组
Bootstrap提供了列表组组件，可以帮助开发者快速创建具有结构性的列表。列表组组件包含了一些基本样式和类，可以很容易地修改其外观。
基本列表组
Bootstrap提供了两种列表——无序列表和有序列表。
无序列表
无序列表可以用于显示没有明确顺序的内容。
<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>
</ul>
有序列表
有序列表可以用于显示有明确顺序的内容。
<ol class="list-group">
<li class="list-group-item">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
</ol>
活动列表组
Bootstrap提供了一种特殊的列表，可以用于显示当前选择的项。这种列表被称为“活动列表组”。
<ul class="list-group">
<li class="list-group-item active">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
</ul>
禁用列表组
Bootstrap还提供了一种禁用列表，可以用于显示不可用的内容。这种列表被称为“禁用列表组”。
<ul class="list-group">
<li class="list-group-item">列表项1</li>
<li class="list-group-item disabled">列表项2</li>
<li class="list-group-item">列表项3</li>
</ul>
带链接的列表组
Bootstrap还提供了一种带链接的列表，可以用于显示链接列表。
<div class="list-group">
<a href="#" class="list-group-item">链接1</a>
<a href="#" class="list-group-item">链接2</a>
<a href="#" class="list-group-item">链接3</a>
</div>
列表组嵌套
Bootstrap还允许开发者嵌套列表，以创建更复杂的结构。
<ul class="list-group">
<li class="list-group-item">列表项1
<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>
</ul>
</li>
<li class="list-group-item">列表项2
<ul class="list-group">
<li class="list-group-item">嵌套列表项4</li>
<li class="list-group-item">嵌套列表项5</li>
</ul>
</li>
<li class="list-group-item">列表项3</li>
</ul>
自定义列表样式
Bootstrap允许开发者自定义列表样式，可以使用CSS自定义样式。
<style>
.list-group-custom {
border-radius: 30px;
background-color: #f5f5f5;
padding: 30px;
}
.list-group-custom-item {
border-radius: 30px;
background-color: #cfcfcf;
padding: 20px;
margin-bottom: 10px;
}
</style>
<ul class="list-group list-group-custom">
<li class="list-group-item list-group-custom-item">列表项1</li>
<li class="list-group-item list-group-custom-item">列表项2</li>
<li class="list-group-item list-group-custom-item">列表项3</li>
</ul>
总结
Bootstrap的列表组组件提供了多种基本列表类型，包括无序列表、有序列表、活动列表、禁用列表和带链接的列表。还可以嵌套列表、自定义列表样式，以创建更复杂的结构。开发者可以利用这些基本列表类型和相关类轻松构建出功能丰富的列表。