Bootstrap 5 mô đun

Mô đun

Modal 组件 là một hộp thoại/弹出窗口 hiển thị ở trên cùng của trang hiện tại:

如何创建模态

以下示例展示如何创建基本模态：

Mô hình

<!-- 打开模态的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态
</button>
<!-- 模态 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态标题 -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- 模态主体 -->
      <div class="modal-body">
        模态主体 ..
      </div>
      <!-- 模态页脚 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

Thử ngay

添加动画

请使用 .fade 类在打开和关闭模态时添加淡入淡出效果：

Mô hình

<!-- 淡入淡出模态 -->
<div class="modal fade"></div>
<!-- 模态无动画 -->
<div class="modal"></div>

Thử ngay

模态尺寸

通过为小模态添加 .modal-sm 类（最大宽度 300px）、为大型模态添加 .modal-lg 类（最大宽度 800px）或为超大模态添加 .modal-xl 来更改模态的大小（最大宽度 1140 像素）。默认为 500 像素最大宽度。

请将 .modal-dialog 类与尺寸类一同添加到 <div> 元素：

Small Modal

<div class="modal-dialog modal-sm">

Thử ngay

Large Modal

<div class="modal-dialog modal-lg">

Thử ngay

Mô đun lớn thêm

<div class="modal-dialog modal-xl">

Thử ngay

Mặc định, kích thước của mô đun là "medium" (max-width 500px).

Mô đun toàn màn hình

Nếu bạn muốn mô đun chiếm toàn bộ chiều rộng và chiều cao của trang, hãy sử dụng .modal-fullscreen Loại:

Mô hình

<div class="modal-dialog modal-fullscreen">

Thử ngay

Mô đun toàn màn hình响应

Bạn cũng có thể sử dụng .modal-fullscreen-*-* Loại kiểm soát khi mô đun nên hiển thị toàn màn hình:

Loại Mô tả Ví dụ
.modal-fullscreen-sm-down Dưới 576px toàn màn hình Thử ngay
.modal-fullscreen-md-down Dưới 768px toàn màn hình Thử ngay
.modal-fullscreen-lg-down Dưới 992px toàn màn hình Thử ngay
.modal-fullscreen-xl-down Dưới 1200px toàn màn hình Thử ngay
.modal-fullscreen-xxl-down Dưới 1400px toàn màn hình Thử ngay

Mô đun giữa

Bằng cách sử dụng .modal-dialog-centric Loại, đặt mô đun giữa trang về cả chiều dọc và chiều ngang trong trang:

Mô hình

<div class="modal-dialog modal-dialog-centered">

Thử ngay

Cuộn mô đun

Khi mô đun có rất nhiều nội dung, sẽ thêm một thanh cuộn vào trang. Hãy xem ví dụ dưới đây để hiểu rõ hơn:

Mô hình

<div class="modal-dialog">

Thử ngay

Nhưng, bằng cách sử dụng .modal-dialog-scrollable Thêm vào .modal-dialog Có thể chỉ cuộn trong mô đun,而不是 trang本身:

Mô hình

<div class="modal-dialog modal-dialog-scrollable">

Thử ngay