bootstrap4如何設定模態框

模態框是覆蓋在父窗體上的子窗體。通常，目的是顯示來自單獨的來源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊互動等。

例如，透過點擊按鈕開啟模態方塊。 （推薦學習：Bootstrap影片教學）

nbsp;html>


  <title>Bootstrap 实例</title>
  <meta>
  <meta>
  <link>
  <script></script>
  <script></script>
  <script></script>



<div>
  <h2 id="模态框实例">模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button>
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div>
    <div>
      <div>
   
        <!-- 模态框头部 -->
        <div>
          <h4 id="模态框头部">模态框头部</h4>
          <button>×</button>
        </div>
   
        <!-- 模态框主体 -->
        <div>
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div>
          <button>关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>

我們可以透過加入 .modal-sm 類別來建立小模態框，.modal-lg 類別可以建立一個大模態框。

尺寸類別放在在尺寸上放在「div>元素的 .modal-dialog 類別後:

更多Bootstrap相關技術文章，請訪問Bootstrap教學欄位進行學習！

以上是bootstrap4如何設定模態框的詳細內容。更多資訊請關注PHP中文網其他相關文章！