BootStrap之列表组listGroup

最新推荐文章于 2024-12-02 13:08:12 发布

原创最新推荐文章于 2024-12-02 13:08:12 发布 · 610 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#BootStrap #BootStrap不同主题列表组的用法 #BootStrap列表组用法

Bootstrap笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建不同样式的列表组，包括普通列表、按钮样式列表及包含头部和文本的链接列表。通过示例代码展示了各种列表组的实现方式，如入学通知、作息通知等，并附上了效果预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法：

<ul class="list-group">
	<子元素名 class="list-group-item list-group-item-danger"><a href="javascript:void(0)">入学通知</a><span class="badge">1</span></button>			
</ul>

普通列表组：

<ul class="list-group">
	<button class="list-group-item list-group-item-danger"><a href="javascript:void(0)">入学通知</a><span class="badge">1</span></button>
	<button class="list-group-item list-group-item-info"><a href="javascript:void(0)">作息通知</a><span class="badge">2</span></button>
	<button class="list-group-item list-group-item-success">补考通知<span class="badge">3</span></button>
	<button class="list-group-item list-group-item-warning">上课通知<span class="badge">4</span></button>
</ul>

效果图：

包含head，text的a标签列表组：

<ul class="list-group">
	<li class="list-group-item list-group-item-info">
		<a href="javascript:void(0)">
		   <div class="h4 list-group-item-heading">西游记</div>
			    <p class="list-group-item-text">经典电视剧</p>
		</a>
	</li>
	<li class="list-group-item list-group-item-success">
		<a href="javascript:void(0)">
	       <div class="h4 list-group-item-heading">红楼梦</div>
				<p class="list-group-item-text">经典电视剧</p>
		</a>
	</li>
	<li class="list-group-item list-group-item-warning">
    	<a href="javascript:void(0)">
		   <div class="h4 list-group-item-heading">三国演义</div>
			    <p class="list-group-item-text">经典电视剧</p>
		</a>
	</li>
</ul>

效果图：