bootstrap中模态框的大小设置

最新推荐文章于 2025-06-04 08:54:17 发布

weixin_33853827

最新推荐文章于 2025-06-04 08:54:17 发布

阅读量2.1k

点赞数

本文介绍了如何使用Bootstrap创建不同尺寸的模态框，包括大型和小型模态框的实现方式。通过简单的HTML和Bootstrap类即可轻松调整模态框大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 大模态框的调节 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- 小尺寸的调节 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>