111網頁前端設計工程師培訓班
一、Bootstrap容器
- 固定寬度：container
- 100%寬度：container-fluid
- .container-{breakpoint}, 直到指定斷點之前，都會是 width: 100%
下表說明了每個容器的 max-width 與每個斷點處的原始 .container 和 .container-fluid 的比較。
可以在實際操作中觀看它們，並在我們的網格範例中進行比較。 -
<576px Small
≥576px Medium
≥768px Large
≥992px X-Large
≥1200px XX-Large
≥1400px.container 100% 540px 720px 960px 1140px 1320px .container-sm 100% 540px 720px 960px 1140px 1320px .container-md 100% 100% 720px 960px 1140px 1320px .container-lg 100% 100% 100% 960px 1140px 1320px .container-xl 100% 100% 100% 100% 1140px 1320px .container-xxl 100% 100% 100% 100% 100% 1320px .container-fluid 100% 100% 100% 100% 100% 100%
二、斷點
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
每個斷點主要是為了容納寬度為 12 倍數的容器。這些斷點也代表了常見尺寸以及可視區域—但它們並非專門針對每個設備。取而代之的是，這些範圍幾乎是所有設備基礎。