彈出對話框有兩種大小形式

Bootstrap中的對話框有以下特點：對話框固定浮動在瀏覽器中；對話框的寬度是自適應的，而且水平居中；當瀏覽器的寬度小於768px時，對話框寬度為600px；底部有一個灰色的蒙層效果，可以禁止單擊底層元素；對話框顯示過程會有過渡效果。Bootstrap框架還為模態對話彈出窗提供了不同尺寸，一個是大尺寸樣式「modal-lg」，另一個是小尺寸樣式「modal-sm」，代碼如下：

代碼中定義了兩個對話框，分別使用了class="modal-lg"和class="modal-sm"。兩個對話框都是通過<button>的data-*屬性來觸發的，class="modal-lg"對話框在大屏幕（屏幕寬度在992px以上的情況）下寬度變成了900px，而class="modal-sm"對話框的寬度為300px。下圖為兩個對話框彈出的效果圖，大的對話框明顯比小的對話框長度要長。而對話框本身是支持響應式模式的，在不同的屏幕解析度下其寬度會不一樣。