Bootstrap的Breakpoints是決定響應式網頁的排版在不同大小的viewport或裝置該如何呈現的寬度位置。
Breakpoints用來控制在特定大小的viewport或裝置的網頁排版方式。Bootstrap是利用CSS的media queries依裝置（e.g. 手機幕或瀏覽器）的各個寬度來套用對應的CSS樣式以達到不同的排版效果，而這些media queries設定的寬度就是Breakpoints。
Bootstrap是以移動優先(mobile first)/手機優先的方式來設計Breakpoints，所以套用的Breakpoints順序是由小而大，且設定Breakpoints的media queries時大多使用min-width（最小寬度，即當裝置寬度超過min-width的寬度時套用對應的CSS樣式。）。
Bootstrap有以下六個預設的Breakpoints：
| Breakpoint | Class infix | 寬度尺寸 |
|---|---|---|
| X-Small 適用於手機（直立） | None | <576px |
| Small 適用於手機（橫放） | sm |
≥576px |
| Medium 適用於平板 | md |
≥768px |
| Large 適用於桌機 | lg |
≥992px |
| Extra large 適用於桌機（大螢幕） | xl |
≥1200px |
| Extra extra large 適用於桌機（更大螢幕） | xxl |
≥1400px |
Bootstrap的Container、Grid及其他響應式網頁的效果就是基於Breakpoints來實現。
以Bootstrap的Flex演示Breakpoints的效果。下面demo.html的flex <div>同時用了flex-sm-row及flex-column，代表當視圖寬度在breakpoint Small之前也就是<576px的時候套用flex-row以橫列的方式顯示flex容器中的<div>；而當視圖寬度超過breakpoint Small也就是≥576px的時候套用flex-column以直欄的方式顯示。
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<title>Demo</title>
</head>
<body>
<div class="d-flex flex-sm-row flex-column">
<div class="p-2 text-light bg-dark">Item 1</div>
<div class="p-2 text-info bg-dark">Item 2</div>
</div>
</body>
</html>
沒有留言:
張貼留言