Bootstrap 简明教程
Bootstrap - Modal demo
What is a modal?
引导中的模态框是叠加在当前页面上的一个对话框/弹出窗口。它用于显示重要信息，或在执行特定操作之前向用户询问确认。
A modal in bootstrap is a dialog box/popup window that is displayed on top of the current page. It is used to display important information or ask the user for confirmation before taking a specific action.
模态框是引导中的一个核心 UI 组件，可以使用内置的 CSS 类和 JavaScript 方法轻松对其进行自定义。
Modal is a core UI component of bootstrap and can be easily customized using built-in CSS classes and JavaScript methods.
class |
description |
.modal |
This is used to define the basic structure of the modal |
.modal-header |
This is used to define the header section of the modal |
.modal-body |
This is used to define the body section of the modal |
.modal-footer |
This is used to define the footer section of the modal |
.fade |
This is used to add a fade effect to the modal |
.modal-dialog |
This is used to customize the size and position of the modal |
.modal-content |
This is used to customize the background color and border of the modal |
.modal-title |
This is used to customize the title of the modal |
.close |
This is used to add a close button to the modal |
以下列举了一些模态示例：
Some of the examples of the modals are as follows:
Example |
Description |
Download link |
This example shows a static modal. |
||
This example shows a scrollable modal. |
||
This example shows a modal with static backdrop. |
||
This example shows a modal with a tooltip. |
||
This example shows a modal with a popover. |
||
This example shows a modal with grid. |
||
This example shows a modal with animation. |