bootstrap-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Bootstrap 5.3 Components

Bootstrap provides ready-to-use UI components for building interfaces. This skill covers all major components with usage patterns, JavaScript initialization requirements, and accessibility best practices.

JavaScript Initialization Overview: Some components work purely with data attributes, while others require JavaScript initialization. Components marked with Requires JS below won't function without explicit initialization.

Component	Requires JS Init	Data Attributes Only
Tooltip	Yes	No
Popover	Yes	No
Toast	Yes (to show)	No
Scrollspy	Optional	Yes
Modal	Optional	Yes
Carousel	Optional	Yes
Collapse	Optional	Yes
Dropdown	Optional	Yes

Bootstrap提供了可直接使用的UI组件，用于构建界面。本技能涵盖所有主要组件的使用模式、JavaScript初始化要求以及无障碍最佳实践。

JavaScript初始化概述： 部分组件仅通过数据属性即可工作，而其他组件则需要JavaScript初始化。下方标记为Requires JS的组件如果不进行显式初始化将无法正常运行。

组件	需要JS初始化	仅需数据属性
Tooltip	是	否
Popover	是	否
Toast	是（用于显示）	否
Scrollspy	可选	是
Modal	可选	是
Carousel	可选	是
Collapse	可选	是
Dropdown	可选	是

Interactive Components

交互式组件

These components require or benefit from JavaScript. See

references/interactive-components.md

for detailed code examples, JavaScript APIs, and accessibility guidance.

这些组件需要或受益于JavaScript。如需详细代码示例、JavaScript API及无障碍指南，请查看

references/interactive-components.md

。

Accordion

Collapsible content panels that show one section at a time. Use

.accordion

wrapper with

.accordion-item

children containing

.accordion-header

and

.accordion-collapse

. Remove

data-bs-parent

to allow multiple panels open simultaneously. Use

.accordion-flush

for borderless variant.

可折叠的内容面板，一次仅显示一个区域。使用

.accordion

容器包裹包含

.accordion-header

和

.accordion-collapse

的

.accordion-item

子元素。移除

data-bs-parent

可允许多个面板同时展开。使用

.accordion-flush

可实现无边框变体。

Carousel

Image slideshow with optional controls and indicators. Use

.carousel.slide

wrapper with

.carousel-inner

containing

.carousel-item

slides. Add

.carousel-control-prev

.carousel-control-next

for navigation. Use

data-bs-ride="carousel"

for autoplay. Respects

prefers-reduced-motion

automatically.

带有可选控件和指示器的图片轮播组件。使用

.carousel.slide

容器包裹包含

.carousel-item

幻灯片的

.carousel-inner

。添加

.carousel-control-prev

.carousel-control-next

用于导航。使用

data-bs-ride="carousel"

启用自动播放。组件会自动遵循

prefers-reduced-motion

设置。

Collapse

Toggle content visibility with smooth animations. Use

data-bs-toggle="collapse"

on trigger with

data-bs-target

pointing to

.collapse

element. Use

.collapse-horizontal

for width-based collapse. Target multiple elements with class selector (

.multi-collapse

通过平滑动画切换内容的可见性。在触发元素上使用

data-bs-toggle="collapse"

，并通过

data-bs-target

指向

.collapse

元素。使用

.collapse-horizontal

实现基于宽度的折叠效果。可通过类选择器（

.multi-collapse

）指向多个元素。

Dropdowns

Toggleable contextual menus for links and actions. Use

.dropdown

wrapper with

.dropdown-toggle

button and

.dropdown-menu

list. Direction variants:

.dropup

.dropend

.dropstart

. Add

.dropdown-menu-dark

for dark theme. Keyboard navigation is built-in.

用于链接和操作的可切换上下文菜单。使用

.dropdown

容器包裹

.dropdown-toggle

按钮和

.dropdown-menu

列表。方向变体：

.dropup

、

.dropend

、

.dropstart

。添加

.dropdown-menu-dark

启用深色主题。组件内置键盘导航支持。

Modal

Dialog boxes that overlay the page and trap focus. Use

data-bs-toggle="modal"

with

data-bs-target

pointing to

.modal

element. Sizes:

.modal-sm

.modal-lg

.modal-xl

. Modifiers:

.modal-dialog-centered

.modal-dialog-scrollable

. Use

data-bs-backdrop="static"

to prevent dismiss on outside click.

覆盖页面并锁定焦点的对话框。使用

data-bs-toggle="modal"

，并通过

data-bs-target

指向

.modal

元素。尺寸选项：

.modal-sm

、

.modal-lg

、

.modal-xl

。修饰类：

.modal-dialog-centered

、

.modal-dialog-scrollable

。使用

data-bs-backdrop="static"

可防止点击外部关闭模态框。

Offcanvas

Hidden sidebars that slide from viewport edge. Positions:

.offcanvas-start

(left),

.offcanvas-end

(right),

.offcanvas-top

.offcanvas-bottom

. Use

data-bs-scroll="true"

to allow body scrolling. Use

data-bs-backdrop="static"

for persistent sidebars.

从视口边缘滑出的隐藏侧边栏。位置选项：

.offcanvas-start

（左侧）、

.offcanvas-end

（右侧）、

.offcanvas-top

、

.offcanvas-bottom

。使用

data-bs-scroll="true"

允许页面主体滚动。使用

data-bs-backdrop="static"

实现持久化侧边栏。

Popovers

Requires JS init and Popper.js. Rich overlay content triggered by click or hover. Use

data-bs-toggle="popover"

with

data-bs-title

and

data-bs-content

. Initialize with

new bootstrap.Popover(el)

or batch initialize all:

document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el))

. Placements: top, right, bottom, left. Use

bootstrap.bundle.js

(includes Popper) or include Popper separately before

bootstrap.js

需要JS初始化和Popper.js。 由点击或悬停触发的富内容覆盖层。使用

data-bs-toggle="popover"

，并配合

data-bs-title

和

data-bs-content

。通过

new bootstrap.Popover(el)

初始化单个组件，或批量初始化所有组件：

document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el))

。位置选项：top、right、bottom、left。可使用

bootstrap.bundle.js

（已包含Popper），或在

bootstrap.js

之前单独引入Popper。

Scrollspy

Auto-update navigation based on scroll position. Use

data-bs-spy="scroll"

on scrollable container with

data-bs-target

pointing to nav. Use

data-bs-root-margin

to control activation threshold. Container needs

tabindex="0"

so keyboard-only users can focus and scroll the container without a mouse.

根据滚动位置自动更新导航的组件。在可滚动容器上使用

data-bs-spy="scroll"

，并通过

data-bs-target

指向导航元素。使用

data-bs-root-margin

控制激活阈值。容器需要设置

tabindex="0"

，以便纯键盘用户无需鼠标即可聚焦并滚动容器。

Toasts

Requires JS to show. Lightweight dismissible notifications. Use

.toast-container

for positioning and stacking. Initialize with

new bootstrap.Toast(el)

then call

.show()

. Options:

autohide: true

delay: 5000

. Placements via container positioning classes.

需要JS触发显示。 轻量级可关闭通知组件。使用

.toast-container

进行定位和堆叠。通过

new bootstrap.Toast(el)

初始化后调用

.show()

显示。配置选项：

autohide: true

、

delay: 5000

。通过容器的定位类控制显示位置。

Tooltips

Requires JS init and Popper.js. Hover hints for brief descriptions. Use

data-bs-toggle="tooltip"

with

data-bs-title

(preferred) or

title

attribute. Initialize with

new bootstrap.Tooltip(el)

or batch initialize all:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))

. Placements: top, right, bottom, left. Tooltips on disabled buttons require a wrapper

<span>

<div>

with

tabindex="0"

for keyboard accessibility. Use

bootstrap.bundle.js

(includes Popper) or include Popper separately before

bootstrap.js

需要JS初始化和Popper.js。 用于简短说明的悬停提示。使用

data-bs-toggle="tooltip"

，并优先使用

data-bs-title

而非

title

属性。通过

new bootstrap.Tooltip(el)

初始化单个组件，或批量初始化所有组件：

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))

。位置选项：top、right、bottom、left。禁用按钮上的tooltip需要使用

<span>

或

<div>

包裹，并设置

tabindex="0"

以保证键盘无障碍。可使用

bootstrap.bundle.js

（已包含Popper），或在

bootstrap.js

之前单独引入Popper。

Static Components

静态组件

These components work primarily with CSS and HTML. See

references/static-components.md

for detailed code examples and accessibility guidance.

这些组件主要通过CSS和HTML工作。如需详细代码示例及无障碍指南，请查看

references/static-components.md

。

Alerts

Contextual feedback messages. Use

.alert.alert-{color}

with

role="alert"

. Colors: primary, secondary, success, danger, warning, info, light, dark. Use

.alert-link

for styled links. Add

.alert-dismissible

with close button for dismissible alerts.

上下文反馈消息。使用

.alert.alert-{color}

并设置

role="alert"

。颜色选项：primary、secondary、success、danger、warning、info、light、dark。使用

.alert-link

设置样式化链接。添加

.alert-dismissible

及关闭按钮可实现可关闭的提示框。

Badges

Labels, counters, and status indicators. Use

.badge.bg-{color}

<span>

. Use

.rounded-pill

for pill shape. Position with

.position-absolute

utilities for notification badges. Include

.visually-hidden

text for screen reader context.

标签、计数器和状态指示器。在

<span>

上使用

.badge.bg-{color}

。使用

.rounded-pill

实现胶囊形状。通过

.position-absolute

工具类设置通知徽章的位置。添加

.visually-hidden

文本为屏幕阅读器提供上下文信息。

Breadcrumb

Navigation hierarchy indicator. Wrap

<ol class="breadcrumb">

<nav aria-label="breadcrumb">

. Use

.breadcrumb-item

<li>

elements. Mark current page with

.active

and

aria-current="page"

. Customize divider via

--bs-breadcrumb-divider

CSS variable.

导航层级指示器。将

<ol class="breadcrumb">

包裹在

<nav aria-label="breadcrumb">

中。在

<li>

元素上使用

.breadcrumb-item

。使用

.active

和

aria-current="page"

标记当前页面。可通过

--bs-breadcrumb-divider

CSS变量自定义分隔符。

Buttons

Interactive button elements. Base:

.btn.btn-{color}

. Outline:

.btn-outline-{color}

. Sizes:

.btn-lg

.btn-sm

. Full width: wrap in

.d-grid

. States:

disabled

attribute,

.active

class. Use

<button>

for actions,

<a>

for navigation.

交互式按钮元素。基础样式：

.btn.btn-{color}

。轮廓样式：

.btn-outline-{color}

。尺寸选项：

.btn-lg

、

.btn-sm

。全宽按钮：包裹在

.d-grid

中。状态：

disabled

属性、

.active

类。操作类按钮使用

<button>

，导航类按钮使用

<a>

。

Button Group

Related buttons grouped together. Use

.btn-group

with

role="group"

and

aria-label

. Vertical:

.btn-group-vertical

. Toolbar:

.btn-toolbar

wrapper with

role="toolbar"

. Sizes:

.btn-group-lg

.btn-group-sm

Cards

Flexible content containers. Structure:

.card

.card-body

.card-title

.card-text

. Optional:

.card-header

.card-footer

.card-img-top

.card-img-bottom

. Grid layout: use

.row.row-cols-{n}

with

.col

.card.h-100

for equal heights.

灵活的内容容器。结构：

.card

.card-body

.card-title

、

.card-text

。可选部分：

.card-header

、

.card-footer

、

.card-img-top

.card-img-bottom

。网格布局：使用

.row.row-cols-{n}

配合

.col

.card.h-100

实现等高卡片。

Close Button

Generic dismiss button. Use

.btn-close

with

aria-label="Close"

. White variant:

.btn-close-white

. Dismiss targets via

data-bs-dismiss="alert|modal|offcanvas|toast"

通用关闭按钮。使用

.btn-close

并设置

aria-label="Close"

。白色变体：

.btn-close-white

。通过

data-bs-dismiss="alert|modal|offcanvas|toast"

指定关闭目标。

List Group

Series of content items as lists. Use

.list-group

.list-group-item

. Actionable: add

.list-group-item-action

. Borderless:

.list-group-flush

. Horizontal:

.list-group-horizontal

. Colors:

.list-group-item-{color}

以列表形式展示的系列内容项。使用

.list-group

.list-group-item

。可交互项：添加

.list-group-item-action

。无边框：

.list-group-flush

。水平布局：

.list-group-horizontal

。颜色选项：

.list-group-item-{color}

。

Navbar

Responsive navigation header. Use

.navbar.navbar-expand-{breakpoint}

. Contains

.navbar-brand

.navbar-toggler

.navbar-collapse

. Placement:

.fixed-top

.fixed-bottom

.sticky-top

. Theme:

data-bs-theme="dark"

(

.navbar-light

deprecated in v5.3).

响应式导航头部。使用

.navbar.navbar-expand-{breakpoint}

。包含

.navbar-brand

、

.navbar-toggler

、

.navbar-collapse

。定位选项：

.fixed-top

、

.fixed-bottom

、

.sticky-top

。主题：

data-bs-theme="dark"

（v5.3中已弃用

.navbar-light

）。

Navs and Tabs

Base navigation with visual styles. Styles:

.nav-tabs

.nav-pills

.nav-underline

. Layout:

.nav-fill

(equal width),

.nav-justified

(full width),

.flex-column

(vertical). For tabbed content, use

role="tablist"

with

role="tab"

buttons and

role="tabpanel"

panes.

带有视觉样式的基础导航。样式选项：

.nav-tabs

、

.nav-pills

、

.nav-underline

。布局选项：

.nav-fill

（等宽）、

.nav-justified

（全宽）、

.flex-column

（垂直）。对于标签页内容，使用

role="tablist"

配合

role="tab"

按钮和

role="tabpanel"

面板。

Pagination

Navigation for paginated content. Use

<nav aria-label="...">

.pagination

.page-item

.page-link

. Sizes:

.pagination-lg

.pagination-sm

. Alignment:

.justify-content-center

.justify-content-end

. Mark current:

.active

with

aria-current="page"

分页内容的导航组件。使用

<nav aria-label="...">

.pagination

.page-item

.page-link

。尺寸选项：

.pagination-lg

、

.pagination-sm

。对齐方式：

.justify-content-center

、

.justify-content-end

。标记当前页：

.active

配合

aria-current="page"

。

Placeholders

Loading state indicators. Use

.placeholder

spans with column widths (

.col-6

). Animations: wrap in

.placeholder-glow

.placeholder-wave

. Sizes:

.placeholder-lg

.placeholder-sm

.placeholder-xs

. Add

aria-hidden="true"

to placeholder containers.

加载状态指示器。在

<span>

上使用

.placeholder

并配合列宽类（

.col-6

）。动画效果：包裹在

.placeholder-glow

或

.placeholder-wave

中。尺寸选项：

.placeholder-lg

、

.placeholder-sm

、

.placeholder-xs

。在占位容器上添加

aria-hidden="true"

。

Progress

Progress indicators for tasks. Use

.progress

wrapper with

.progress-bar

inside. Set width via

style="width: X%"

. Variants:

.progress-bar-striped

.progress-bar-animated

. Colors:

.bg-{color}

. Include ARIA attributes:

role="progressbar"

aria-valuenow

aria-valuemin

aria-valuemax

任务进度指示器。使用

.progress

容器包裹内部的

.progress-bar

。通过

style="width: X%"

设置宽度。变体：

.progress-bar-striped

、

.progress-bar-animated

。颜色选项：

.bg-{color}

。添加ARIA属性：

role="progressbar"

、

aria-valuenow

、

aria-valuemin

、

aria-valuemax

。

Spinners

Loading indicators. Types:

.spinner-border

(spinning),

.spinner-grow

(pulsing). Sizes:

.spinner-border-sm

.spinner-grow-sm

. Colors:

.text-{color}

. Include

role="status"

and

.visually-hidden

loading text.

加载指示器。类型：

.spinner-border

（旋转）、

.spinner-grow

（脉冲）。尺寸选项：

.spinner-border-sm

、

.spinner-grow-sm

。颜色选项：

.text-{color}

。添加

role="status"

及

.visually-hidden

加载文本。

Common Gotchas & Tips

常见问题与技巧

Components Requiring JavaScript Initialization

需要JavaScript初始化的组件

Tooltips and popovers will not work without explicit JavaScript initialization. Unlike modals, dropdowns, and carousels (which work via data attributes), these components must be initialized:

javascript

// Initialize all tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el));

// Initialize all popovers
document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach(el => new bootstrap.Popover(el));

Toasts also require JavaScript to show—they are hidden by default and must be shown programmatically with

toast.show()

Tooltip和popover如果不进行显式JavaScript初始化将无法工作。与modal、dropdown和carousel（可通过数据属性工作）不同，这些组件必须初始化：

javascript

// 初始化所有tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el));

// 初始化所有popovers
document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach(el => new bootstrap.Popover(el));

Toast也需要JavaScript触发显示——它们默认隐藏，必须通过

toast.show()

以编程方式显示。

Tooltip/Popover Positioning Issues

Tooltip/Popover定位问题

If tooltips or popovers appear in the wrong position, get clipped, or behave strangely in complex layouts (input groups, button groups, tables, modals), use

container: 'body'

javascript

// Append to body to avoid rendering issues
new bootstrap.Tooltip(el, { container: 'body' });
new bootstrap.Popover(el, { container: 'body' });

For popovers inside modals, set

container

to the modal body so focus remains trapped:

javascript

new bootstrap.Popover(el, { container: '.modal-body' });

如果tooltip或popover出现位置错误、被截断，或在复杂布局（输入组、按钮组、表格、模态框）中表现异常，可使用

container: 'body'

：

javascript

// 追加到body以避免渲染问题
new bootstrap.Tooltip(el, { container: 'body' });
new bootstrap.Popover(el, { container: 'body' });

对于模态框内的popover，将

container

设置为模态框主体，以确保焦点被正确锁定：

javascript

new bootstrap.Popover(el, { container: '.modal-body' });

Modal Best Practices

Modal最佳实践

Semantic headings: Bootstrap recommends using

<h1>

for modal titles semantically (the modal represents its own document context). Use font size utilities like

.fs-5

to control visual appearance while maintaining proper heading hierarchy.

Autofocus workaround: The HTML

autofocus

attribute has no effect in Bootstrap modals due to HTML5 semantics. To focus an input when a modal opens:

javascript

myModal.addEventListener('shown.bs.modal', () => {
  document.getElementById('myInput').focus();
});

Nested modals: Bootstrap only supports one modal at a time. Nested modals are not supported and considered poor user experience. If multiple dialogs are needed, close the current modal before opening another.

Dynamic content height: After dynamically changing modal body content that affects height, call

modal.handleUpdate()

to readjust the modal's position.

语义化标题：Bootstrap建议在模态框标题中使用

<h1>

（模态框代表独立的文档上下文）。可使用

.fs-5

等字体大小工具类控制视觉样式，同时保持正确的标题层级。

自动聚焦解决方案：由于HTML5语义限制，HTML的

autofocus

属性在Bootstrap模态框中无效。如需在模态框打开时聚焦输入框：

javascript

myModal.addEventListener('shown.bs.modal', () => {
  document.getElementById('myInput').focus();
});

嵌套模态框：Bootstrap仅支持同时显示一个模态框。嵌套模态框不受支持，且被认为是糟糕的用户体验。如果需要多个对话框，应先关闭当前模态框再打开新的。

动态内容高度：在动态修改模态框主体内容并影响高度后，调用

modal.handleUpdate()

重新调整模态框的位置。

Cross-Component Patterns

跨组件模式

Modals with forms: Place form validation feedback inside the modal body. On successful submission, call

modal.hide()

and optionally show a toast notification.

Toast stacking: Use

.toast-container

with positioning utilities (

.position-fixed.bottom-0.end-0.p-3

) for consistent toast placement. Multiple toasts stack automatically.

Navbar with offcanvas: For mobile navigation, combine

.navbar

with offcanvas for a sliding menu. Use

data-bs-toggle="offcanvas"

on the navbar toggler instead of collapse for a different UX pattern.

Cards in grids: Use

.row.row-cols-{n}

with

.col

.card.h-100

to create equal-height card grids that respond to breakpoints.

带表单的模态框：将表单验证反馈放在模态框主体内。提交成功后，调用

modal.hide()

并可选择显示toast通知。

Toast堆叠：使用

.toast-container

配合定位工具类（

.position-fixed.bottom-0.end-0.p-3

）实现一致的toast定位。多个toast会自动堆叠。

搭配Offcanvas的Navbar：对于移动端导航，可将

.navbar

与Offcanvas结合实现滑动菜单。在导航栏切换按钮上使用

data-bs-toggle="offcanvas"

而非collapse，以提供不同的用户体验模式。

网格中的卡片：使用

.row.row-cols-{n}

配合

.col

.card.h-100

创建等高卡片网格，且可响应断点变化。

Additional Resources

额外资源

Reference Files

参考文件

```
references/components-reference.md
```
- Quick reference tables for all component classes
```
references/css-custom-properties.md
```
- CSS custom properties for runtime component theming
```
references/interactive-components.md
```
- Detailed documentation for JS-dependent components
```
references/static-components.md
```
- Detailed documentation for CSS/HTML components

```
references/components-reference.md
```
- 所有组件类的快速参考表格
```
references/css-custom-properties.md
```
- 用于运行时组件主题定制的CSS自定义属性
```
references/interactive-components.md
```
- 依赖JS的组件详细文档
```
references/static-components.md
```
- CSS/HTML组件详细文档

Example Files

示例文件

```
examples/accordion-patterns.html
```
- Accordion and FAQ patterns
```
examples/alert-patterns.html
```
- Alert variants, dismissible alerts, live region patterns
```
examples/badge-button-patterns.html
```
- Badges, buttons, button groups, and close buttons
```
examples/breadcrumb-patterns.html
```
- Breadcrumb navigation with custom dividers and icons
```
examples/card-grid-patterns.html
```
- Responsive card grid layouts
```
examples/carousel-patterns.html
```
- Carousel implementation patterns
```
examples/collapse-patterns.html
```
- Collapse, horizontal collapse, and multi-target patterns
```
examples/dropdown-patterns.html
```
- Dropdown menus, split buttons, and form dropdowns
```
examples/list-group-patterns.html
```
- List groups, actionable items, and tab integration
```
examples/modal-patterns.html
```
- Modal dialog patterns
```
examples/navbar-patterns.html
```
- Navigation bar layouts
```
examples/offcanvas-patterns.html
```
- Offcanvas sidebar patterns
```
examples/pagination-patterns.html
```
- Pagination variants, alignment, and responsive patterns
```
examples/placeholder-patterns.html
```
- Loading skeleton patterns for cards, lists, and tables
```
examples/popovers-tooltips-patterns.html
```
- Tooltip and popover patterns (requires JS init)
```
examples/progress-spinner-patterns.html
```
- Progress bars and spinner loading indicators
```
examples/scrollspy-patterns.html
```
- Scrollspy with navbar, list group, and documentation patterns
```
examples/tabs-patterns.html
```
- Tab navigation patterns
```
examples/toasts-patterns.html
```
- Toast notification patterns (requires JS init)

```
examples/accordion-patterns.html
```
- 手风琴和FAQ模式
```
examples/alert-patterns.html
```
- 提示框变体、可关闭提示框、实时区域模式
```
examples/badge-button-patterns.html
```
- 徽章、按钮、按钮组和关闭按钮
```
examples/breadcrumb-patterns.html
```
- 面包屑导航（含自定义分隔符和图标）
```
examples/card-grid-patterns.html
```
- 响应式卡片网格布局
```
examples/carousel-patterns.html
```
- 轮播组件实现模式
```
examples/collapse-patterns.html
```
- 折叠、水平折叠和多目标折叠模式
```
examples/dropdown-patterns.html
```
- 下拉菜单、分割按钮和表单下拉框
```
examples/list-group-patterns.html
```
- 列表组、可交互项和标签页集成
```
examples/modal-patterns.html
```
- 模态框对话框模式
```
examples/navbar-patterns.html
```
- 导航栏布局
```
examples/offcanvas-patterns.html
```
- 侧边栏抽屉模式
```
examples/pagination-patterns.html
```
- 分页变体、对齐方式和响应式模式
```
examples/placeholder-patterns.html
```
- 卡片、列表和表格的加载骨架模式
```
examples/popovers-tooltips-patterns.html
```
- Tooltip和Popover模式（需要JS初始化）
```
examples/progress-spinner-patterns.html
```
- 进度条和加载指示器
```
examples/scrollspy-patterns.html
```
- 搭配Navbar、列表组和文档的Scrollspy模式
```
examples/tabs-patterns.html
```
- 标签导航模式
```
examples/toasts-patterns.html
```
- Toast通知模式（需要JS初始化）