網頁

2021/6/1

Bootstrap 5 Layout Breakpoints 簡介

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-rowflex-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>



沒有留言:

張貼留言