前端框架和库：Bootstrap：Bootstrap列表与工具提示设计.docxVIP

PAGE1

PAGE1

前端框架和库：Bootstrap：Bootstrap列表与工具提示设计

1前端框架和库：Bootstrap：Bootstrap列表设计

1.1Bootstrap列表简介

1.1.1列表组的基本用法

Bootstrap提供了多种列表样式，其中列表组（ListGroup）是一种常见的列表展示方式，适用于显示一系列链接或简单的项目列表。列表组的基本结构是使用带有list-group类的ul元素，列表项则使用带有list-group-item类的li元素。

示例代码：

ulclass=list-group

liclass=list-group-item项目1/li

liclass=list-group-item项目2/li

liclass=list-group-item项目3/li

/ul

描述：上述代码创建了一个基本的列表组，包含三个列表项。列表组默认具有圆角边框和灰色背景，使其看起来更像一个组件而非传统的列表。

1.1.2列表项的活动和禁用状态

列表组中的列表项可以设置为活动状态或禁用状态，以表示当前选中项或不可点击的项。活动状态通过添加active类来实现，禁用状态则通过添加disabled类来实现。

示例代码：

ulclass=list-group

liclass=list-group-itemactive活动项目/li

liclass=list-group-item项目2/li

liclass=list-group-itemdisabled禁用项目/li

/ul

描述：在这个例子中，第一个列表项被设置为活动状态，显示为深色背景和白色文字。第三个列表项被设置为禁用状态，文字颜色变淡，且鼠标悬停时不会有交互效果。

1.1.3嵌套列表的创建

在列表组中，可以创建嵌套列表，即在列表项中包含另一个列表组。这在需要展示层级结构或子菜单时非常有用。

示例代码：

ulclass=list-group

liclass=list-group-item

父项目

ulclass=list-group

liclass=list-group-item子项目1/li

liclass=list-group-item子项目2/li

/ul

/li

liclass=list-group-item项目2/li

/ul

描述：这个例子展示了如何在列表项中嵌套另一个列表组。父项目下的子项目列表使用相同的list-group类，但嵌套在父项目的列表项内。

1.1.4列表项的链接和按钮

列表组中的列表项可以转换为链接或按钮，只需将列表项内容包裹在a或button标签中，并保留list-group-item类。

示例代码：

ulclass=list-group

ahref=#class=list-group-itemlist-group-item-action链接项目/a

buttontype=buttonclass=list-group-itemlist-group-item-action按钮项目/button

/ul

描述：在这个例子中，列表项被转换为链接和按钮。通过添加list-group-item-action类，可以确保当鼠标悬停或点击时，列表项会有交互效果，如背景色变化。

1.2Bootstrap工具提示设计

1.2.1工具提示的基本用法

Bootstrap的工具提示（Tooltips）用于在鼠标悬停时显示额外的信息。要使用工具提示，需要在元素上添加data-bs-toggle=tooltip和data-bs-title属性，其中data-bs-title属性定义了工具提示的内容。

示例代码：

!--引入Bootstrap和Popper.js--

linkhref=/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.cssrel=stylesheet

scriptsrc=/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js/script

scriptsrc=/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js/script

!--工具提示示例--

buttontype=buttonclass=btnbtn-secondarydata-bs-toggle=tooltipdata-bs-title=这是一个工具提