【Bootstrap学习 day4】

Bootstrap5 列表组
使用Bootstrap创建列表
可以创建三种不类型的HTML列表：

• 无序列表—顺序无关紧要的项目列表。无序列表中的列表标有项目符号，例如。、·等ul>li
• 有序列表—顺序确实很重要的项目列表。有序列表中的列表项用数字标记，例如1、vi等ol>li
• 定义列表—术语列表及其项目描述。dl>dt

内联列表
如果要使用有序列表或无序列表创建水平菜单，则需要将所有列表项放在一行中（即并排）。可以通过将类.list-inline添加到<ul>或<li>元素来完成此操作。
添加.list-inline属性变为内联列表，简单点说就是把垂直方向的列表变为水平方向。内联列表一般用作菜单（导航）样式。

<h3>内联列表</h3>
	<ul class="list-inline">
		<li class="list-inline-item">标题一</li>
		<li class="list-inline-item">标题二</li>
		<li class="list-inline-item">标题三</li>
	</ul>

Bootstrap5列表组
列表组是非常有用且灵活的组件，用于以漂亮的方式显示元素列表。在最基本的形式中，列表组只是一个带有.list-group类的无序列表，且列表中的元素带有.list-group-item类
基础的列表组

<ul class="list-group">
	<li class="list-group-item">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
</ul>

设置禁用和活动项
可以将类.active添加到.list-group-item类后面用来指示当前项目元素使活动的。同样，可以将.disabled添加到.list-group-item后面，从而使其看起来是禁用状态。

<ul class="list-group">
	<li class="list-group-item active">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item disabled">第三项</li>
</ul>

移除列表边框
使用.list-group-flush类添加到list-group元素上，用以移除外边框和圆角，从而创建与其父容器边对边的列表组

<ul class="list-group list-group-flush">
	<li class="list-group-item">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
</ul>

水平列表组
.list-group-horizontal类添加到.list-group，可以将列表项水平显示而不是垂直显示（并排而不是堆叠）

<ul class="list-group list-group-horizontal">
	<li class="list-group-item">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
	<li class="list-group-item">第四项</li>
</ul>

创建编号列表组

可以通过简单地在.list-group元素上添加类.list-group-numbered来创建带有元素编号的列表组。

<ol class="list-group list-group-numbered">
	<li class="list-group-item">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
	<li class="list-group-item">第四项</li>
</ol>

数字式通过CSS（而不是<ol>元素的默认浏览器样式）生成的。
带有徽章的列表组
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，只需在.list-group-item的基础上追加徽章组件“badge”。

<ul class="list-group">
	<li class="list-group-item">第一项
		<small class="bg-primary badge">12</small>
	</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
	<li class="list-group-item">第四项</li>
</ul>

多种颜色列表项
和大多数其他组件一样，可以在列表组项目上使用相应的类来对它们进行额外的背景色设置，来对它们施加额外的强调。

<ul class="list-group">
	<li class="list-group-item list-group-item-success">Success item</li>
	<li class="list-group-item list-group-item-secondary">Secondary item</li>
	<li class="list-group-item list-group-item-info">Info item</li>
	<li class="list-group-item list-group-item-warning">Warning item</li>
	<li class="list-group-item list-group-item-danger">Danger item</li>
	<li class="list-group-item list-group-item-primary">Primary item</li>
	<li class="list-group-item list-group-item-dark">Dark item</li>
	<li class="list-group-item list-group-item-light">Light item</li>
</ul>

向列表组添加自定义内容
bootstrap框架在链接列表组的基础上增加了两个样式：
.list-group-item-heading：用来定义列表项头部样式
.list-group-item-text:用来定义列表项主要内容
这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-heading">网站服务</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-heading">标题一</h4>
		<p class="list-group-item-text">这里面是内容一</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-heading active">标题二</h4>
		<p class="list-group-item-text">这里面是内容二</p>
	</a>
</div>