<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>
在这个例子中,list-group 类用于创建列表组,而 list-group-item 类用于每个列表项。
如果你想要添加更多的内容,可以在列表项中包含其他元素,如链接、按钮等:
<ul class="list-group">
<li class="list-group-item">列表项 1</li>
<li class="list-group-item">列表项 2</li>
<li class="list-group-item">
列表项 3
<span class="badge badge-primary badge-pill">5</span>
</li>
<a href="#" class="list-group-item list-group-item-action">链接项</a>
<button type="button" class="list-group-item list-group-item-action">按钮项</button>
</ul>
在这个例子中,我们添加了一个带有徽章(badge)的列表项,一个链接项和一个按钮项。list-group-item-action 类用于使链接和按钮看起来更像是可点击的元素。
你还可以创建水平排列的列表组,通过在 list-group 上添加 list-group-horizontal 类:
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item list-group-item-action">链接项 1</a>
<a href="#" class="list-group-item list-group-item-action">链接项 2</a>
<a href="#" class="list-group-item list-group-item-action">链接项 3</a>
</div>
这将使列表项水平排列而不是垂直排列。
通过使用这些辅助类,你可以轻松创建符合你设计需求的列表组。根据具体的项目需求,你可能需要进一步自定义样式和结构。
转载请注明出处:http://www.zyzy.cn/article/detail/12626/Bootstrap