斷點(Breakpoints) · Bootstrap 5 繁體中文文件 | RWD 中斷點
核心觀念斷點是響應式開發的基礎。使用斷點來控制在特定尺寸或設備上調整佈局。使用mediaqueries的斷點構建CSS。mediaqueries是CSS的一個特性,它允許您根據瀏覽器和操作系統参數有條件地套用樣式。我們最常在mediaqueries中使用min-width.在響應式開發中,主要會以行動版為優先。Bootstrap的CSS旨在使用最少的樣式來使佈局在最小的斷點處工作,然後在樣式上分層以針對較大的設備調整該設計。這樣可以優化CSS,縮短渲染時間,並為訪問者提供出色的體驗。網格選項Bootstrap預設默認六個斷點(有時候會稱之為網格),主要用於建立響應式...
核心觀念斷點是響應式開發的基礎。 使用斷點來控制在特定尺寸或設備上調整佈局。
使用 media queries 的斷點構建 CSS。 media queries 是 CSS 的一個特性,它允許您根據瀏覽器和操作系統参數有條件地套用樣式。我們最常在 media queries 中使用 min-width.
在響應式開發中,主要會以行動版為優先。 Bootstrap 的 CSS 旨在使用最少的樣式來使佈局在最小的斷點處工作,然後在樣式上分層以針對較大的設備調整該設計。這樣可以優化CSS,縮短渲染時間,並為訪問者提供出色的體驗。
網格選項Bootstrap 預設默認六個斷點(有時候會稱之為網格),主要用於建立響應式開發。如果您是使用我們的 Sass 原始碼,則可以自定義這些斷點。
Breakpoint Class infix Dimensions X-Small None <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px每個斷點主要是為了容納寬度為 12 倍數的容器。這些斷點也代表了常見尺寸以及可視區域—但它們並非專門針對每個設備。取而代之的是,這些範圍幾乎是所有設備基礎。
這些斷點可通過 Sass 原始碼自行進行自定義-您可以在 _variables.scss 的 Sass 中找到它們。
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );有關如何修改 Sass 和變數的更多訊息與範例,請参閱 網格章節[1].
Bootstrap 主要是以行動版為優先,因此我們使用了許多 ...