3.4 弹窗与提示 (Popups & Alerts) 组件

` 或其他标题标签。 * **关闭按钮**: 与警告框中的关闭按钮类似，使用 `data-dismiss="modal"` 关闭模态框。 * **`.modal-body`**: 模态框的主体内容区域。 * **`.modal-footer`**: 模态框的底部，通常包含操作按钮，例如 "关闭" 和 "保存"。 **Mermaid Graph TD 图:** ```mermaid graph TD A[div class="modal fade"] --> B[div class="modal-dialog"]; B --> C[div class="modal-content"]; C --> D[div class="modal-header"]; C --> E[div class="modal-body"]; C --> F[div class="modal-footer"]; D --> G[button class="close" data-dismiss="modal"]; D --> H[h4 class="modal-title"]; F --> I[button class="btn btn-default" data-dismiss="modal"]; F --> J[button class="btn btn-primary"]; style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style C fill:#ccf,stroke:#333,stroke-width:2px style D fill:#ccf,stroke:#333,stroke-width:2px style E fill:#ccf,stroke:#333,stroke-width:2px style F fill:#ccf,stroke:#333,stroke-width:2px style G fill:#ccf,stroke:#333,stroke-width:2px style H fill:#ccf,stroke:#333,stroke-width:2px style I fill:#ccf,stroke:#333,stroke-width:2px style J fill:#ccf,stroke:#333,stroke-width:2px ``` **图表解释:** * `div class="modal fade"` 代表模态框的最外层容器。 * `div class="modal-dialog"` 代表模态框对话框容器。 * `div class="modal-content"` 代表模态框内容容器。 * `div class="modal-header"`, `div class="modal-body`, `div class="modal-footer"` 分别代表模态框的头部、主体和底部区域。 * `button class="close" data-dismiss="modal"` 代表头部中的关闭按钮。 * `h4 class="modal-title"` 代表模态框标题。 * `button class="btn btn-default" data-dismiss="modal"` 代表底部中的 "关闭" 按钮。 * `button class="btn btn-primary"` 代表底部中的 "保存更改" 按钮。 #### 2.2 模态框尺寸 Bootstrap 提供了 `.modal-sm` 和 `.modal-lg` 类来控制模态框的尺寸。 **代码实践：** **小尺寸模态框:** ```html

...

``` **大尺寸模态框:** ```html

...

``` **内容详解：** * **`.modal-sm`**: 添加到 `.modal-dialog` 元素，使模态框显示为小尺寸。 * **`.modal-lg`**: 添加到 `.modal-dialog` 元素，使模态框显示为大尺寸。 #### 2.3 模态框背景 模态框默认有一个半透明的背景遮罩 (backdrop)，用于突出显示模态框并阻止用户与页面其他部分交互。可以通过 `data-backdrop` 属性来控制背景遮罩的行为。 **代码实践：** * **默认背景遮罩 (点击背景关闭模态框):** 默认行为，无需额外设置。 * **静态背景遮罩 (点击背景不关闭模态框):** ```html 静态背景遮罩模态框

...

``` **内容详解：** * **`data-backdrop="static"`**: 添加到 `.modal` 元素，表示静态背景遮罩。当设置为 `static` 时，点击模态框背景不会关闭模态框，用户只能通过模态框内部的按钮 (例如关闭按钮) 来关闭。 #### 2.4 JavaScript 模态框方法 Bootstrap 的模态框组件提供了一些 JavaScript 方法，用于以编程方式控制模态框的显示和隐藏。 * **`$(selector).modal('show')`**: 显示模态框。 * **`$(selector).modal('hide')`**: 隐藏模态框。 * **`$(selector).modal('toggle')`**: 切换模态框的显示状态 (显示/隐藏)。 **代码实践 (JavaScript):** ```javascript $('#myModal').modal('show'); // 显示 ID 为 myModal 的模态框 $('#myModal').modal('hide'); // 隐藏 ID 为 myModal 的模态框 ``` #### 2.5 模态框事件 Bootstrap 模态框组件还提供了一些事件，允许您在模态框的不同状态下执行自定义 JavaScript 代码。 * **`show.bs.modal`**: 在 `show` 方法调用之后立即触发此事件。如果是由点击触发器元素触发，则在显示模态框之前发生。 * **`shown.bs.modal`**: 模态框对用户可见时触发 (在 CSS 过渡完成后)。 * **`hide.bs.modal`**: 当调用 `hide` 实例方法时立即触发。 * **`hidden.bs.modal`**: 模态框完全隐藏后触发 (在 CSS 过渡完成后)。 * **`loaded.bs.modal`**: 从远程 URL 加载模态框内容后触发（Bootstrap.x 已移除此功能，Bootstrap.x 存在）。 **代码实践 (JavaScript 事件监听):** ```javascript $('#myModal').on('show.bs.modal', function (event) { // 模态框即将显示时执行的代码 console.log('模态框即将显示'); }); $('#myModal').on('shown.bs.modal', function (event) { // 模态框显示后执行的代码 console.log('模态框已显示'); }); $('#myModal').on('hide.bs.modal', function (event) { // 模态框即将隐藏时执行的代码 console.log('模态框即将隐藏'); }); $('#myModal').on('hidden.bs.modal', function (event) { // 模态框隐藏后执行的代码 console.log('模态框已隐藏'); }); ``` ### 3. 工具提示 (Tooltips) 工具提示组件用于在用户悬停在元素上时显示小的描述性文本提示。 #### 3.1 基础工具提示 要使用工具提示，需要： 1. **引入 Bootstrap JavaScript 文件**: 确保页面中引入了 Bootstrap 的 JavaScript 文件 (通常依赖 jQuery)。 2. **初始化工具提示**: 使用 JavaScript 代码初始化工具提示功能。 3. **添加 `data-toggle="tooltip"` 和 `title` 属性**: 在需要添加工具提示的元素上添加 `data-toggle="tooltip"` 属性，并使用 `title` 属性设置工具提示文本。 **代码实践：** **HTML:** ```html 悬停显示工具提示 ``` **JavaScript 初始化:** ```javascript $(function () { $('[data-toggle="tooltip"]').tooltip() }) ``` **内容详解：** * **`data-toggle="tooltip"`**: 指示此元素启用工具提示功能。 * **`title="这是一个工具提示"`**: 设置工具提示显示的文本内容。 * **`$(function () { $('[data-toggle="tooltip"]').tooltip() })`**: JavaScript 初始化代码，用于选择所有带有 `data-toggle="tooltip"` 属性的元素，并为它们启用工具提示功能。这段代码通常放在页面底部或 `$(document).ready()` 中执行。 **Mermaid Graph TD 图:** ```mermaid graph TD A[button data-toggle="tooltip"] --> B(Tooltip Text); style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px ``` **图表解释:** * `button data-toggle="tooltip"` 代表带有 `data-toggle="tooltip"` 属性的按钮元素。 * `Tooltip Text` 代表工具提示显示的文本内容，来源于 `title` 属性。 #### 3.2 工具提示位置 可以通过 `data-placement` 属性来控制工具提示的显示位置。可选值包括：`top`, `bottom`, `left`, `right`。 **代码实践：** ```html 顶部工具提示 底部工具提示 左侧工具提示 右侧工具提示 ``` **内容详解：** * **`data-placement="top"`, `data-placement="bottom"`, `data-placement="left"`, `data-placement="right"`**: 分别设置工具提示显示在元素的顶部、底部、左侧和右侧。 #### 3.3 工具提示触发方式 可以通过 `data-trigger` 属性来控制工具提示的触发方式。可选值包括： * **`hover`**: 鼠标悬停时显示 (默认)。 * **`focus`**: 元素获得焦点时显示 (例如，通过键盘 Tab 键选中)。 * **`click`**: 鼠标点击元素时显示。 * **`manual`**: 手动触发，需要通过 JavaScript 代码控制 `tooltip('show')` 和 `tooltip('hide')` 方法。 * **`hover focus`**: 鼠标悬停或元素获得焦点时显示。 * **`hover click`**: 鼠标悬停或点击元素时显示。 * **`focus click`**: 元素获得焦点或鼠标点击时显示。 * **`click focus`**: 点击元素或元素获得焦点时显示 (与 `focus click` 相同)。 **代码实践：** ```html 点击触发工具提示 焦点触发工具提示 手动触发工具提示 ``` **内容详解：** * **`data-trigger="click"`, `data-trigger="focus"`, `data-trigger="manual"`**: 分别设置工具提示的触发方式为点击、焦点和手动。 * 对于 `data-trigger="manual"`，需要使用 JavaScript 代码手动控制工具提示的显示和隐藏，例如使用 `$('#manualTooltip').tooltip('show')` 显示，`$('#manualTooltip').tooltip('hide')` 隐藏，`$('#manualTooltip').tooltip('toggle')` 切换显示状态。 ### 4. 弹出框 (Popovers) 弹出框组件类似于工具提示，但可以显示更丰富的内容，包括标题和正文。 #### 4.1 基础弹出框 与工具提示类似，使用弹出框也需要： 1. **引入 Bootstrap JavaScript 文件** 2. **初始化弹出框**: 使用 JavaScript 代码初始化弹出框功能。 3. **添加 `data-toggle="popover"`、`title` 和 `data-content` 属性**: 在需要添加弹出框的元素上添加 `data-toggle="popover"` 属性，使用 `title` 属性设置弹出框标题，使用 `data-content` 属性设置弹出框正文内容。 **代码实践：** **HTML:** ```html 点击显示弹出框 ``` **JavaScript 初始化:** ```javascript $(function () { $('[data-toggle="popover"]').popover() }) ``` **内容详解：** * **`data-toggle="popover"`**: 指示此元素启用弹出框功能。 * **`title="弹出框标题"`**: 设置弹出框的标题。 * **`data-content="这里是弹出框的正文内容。"`**: 设置弹出框的正文内容。 * **`$(function () { $('[data-toggle="popover"]').popover() })`**: JavaScript 初始化代码，与工具提示的初始化代码类似，用于选择所有带有 `data-toggle="popover"` 属性的元素，并为它们启用弹出框功能。