網頁

▼

2021/6/4

Bootstrap 5 Layout Grid 基本範例

Bootstrap Grid基本範例。


Bootstrap Grid（網格）的是以CSS flexbox layout為基礎的實現，並具有以下特色：

  • 支援breakpoints。並可依此控制grid container及column在各breakpoints的寬度及行為。
  • Grid container自動置中並在column左右加入padding（又稱為gutter）控制column間的間隙。
  • Grid使用row（列）包覆column（欄），1個row有12個column。
  • 可使用Sass檔自訂grid的行為。

Grid與breakpoints的對應如下：

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)



基本範例

下面在demo.html使用grid container。

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>
  <!-- grid container here -->
</body>
</html>

基本用法，最外層為container為grid container，下一層是row為row，然後是col為column。

<div class="container"><!-- grid container -->
  <div class="row"><!-- row -->
    <div class="col border bg-dark text-light"><!-- column -->
      Column
    </div>
    <div class="col border bg-dark text-light"><!-- column -->
      Column
    </div>
    <div class="col border bg-dark text-light"><!-- column -->
      Column
    </div>
  </div>
</div>




Grid預設每個column等寬。

<div class="container"><!-- grid container -->
  <div class="row">
    <div class="col border bg-dark text-light">
      Column
    </div>
    <div class="col border bg-dark text-light">
      Column
    </div>
    <div class="col border bg-dark text-light">
      Column
    </div>
  </div>
  <div class="row">
    <div class="col border bg-dark text-light">
      Column
    </div>
    <div class="col border bg-dark text-light">
      Column
    </div>
  </div>
</div>




在col-後接數字可設定column寬度佔12欄的比例。

<div class="container"><!-- grid container -->
  <div class="row">
    <div class="col-2 border bg-dark text-light">
      Column
    </div>
    <div class="col-4 border bg-dark text-light">
      Column
    </div>
    <div class="col border bg-dark text-light">
      Column
    </div>
  </div>
  <div class="row">
    <div class="col-2 border bg-dark text-light">
      Column
    </div>
    <div class="col-4 border bg-dark text-light">
      Column
    </div>
  </div>
</div>




使用col-{breakpoint}-auto依內容長度決定column寬度，且當視圖寬度小於breakpoint時會改以堆疊呈現。

<div class="container"><!-- grid container -->
  <div class="row">
    <div class="col-2 border bg-dark text-light">
      R1C1
    </div>
    <div class="col-sm-auto border bg-dark text-light">
      R1C2 - One Man’s Trash Is Another Man’s Treasure.
    </div>
    <div class="col border bg-dark text-light">
      R1C3
    </div>
  </div>
  <div class="row">
    <div class="col-2 border bg-primary text-light">
      R2C1
    </div>
    <div class="col-md-4 border bg-primary text-light">
      R2C2 - The Early Bird Catches the Worm
    </div>
  </div>
</div>




沒有留言:

張貼留言