# 格線系統 (Grid-system)
###### tags: `NKFW 網頁設計入門`
## Breakpoint
* 直接設計出來的網站無法適應所有大小的螢幕，所以我們需要對不同設備設計不同的排版。
* 以下是Bootstrap對於不同大小的設備做的分類，分別有以下的尺寸代號。
* 可以按-F12-切換裝置模擬，來看看不同大小的設備顯示網頁的狀況。
| Breakpoint | 類別名稱 | 尺寸 | 相對應的設備 | EX |
|:----------- | -------- | ------ | ------------ |:------------------ |
| Extra small | None | <576px | 手機直向寬度 | Samsung Galaxy S8+ |
| Small | **sm** | ≥576px | 手機橫向 | |
| Medium | **md** | ≥768px | 平板直向寬度 | iPad Air |
| Large | **lg** | ≥992px | | 電腦螢幕 |
:::warning
上面的表格僅為參考用，難免會有一些特殊尺寸的設備(Ultra、Pro)會尺寸比同類型的設備還要大一些。
:::
## Container & Fluid container
:::info
Container的作用是用於填充整個畫面，容納其他元素。在Containter裡面有網格系統，網格系統則由row跟column組成，範例如下：
:::
```xml!
<div class="container">
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>
```
1. container
* 定寬容器
* 在每一個breakpoint上都有一個最大寬度(max-width)
2. container-fluid
* 在所有大小的視窗中都是width:100%，會隨著視窗大小縮放
<!-- 3. Responsive container
* EX：container-md
* 在平板直向寬度以下的時候，container是滿版的(fluid)
* 大於等於平板直向寬度的時候，container是定寬的
底下的範例，container-md會在`md`以下的尺寸滿版(`container-fluid`)
```htmlmixed!
<div class="container-md bg-danger-subtle">
試試看我甚麼時候會是滿版容器
</div>
``` -->
## Grid
:::info
* Bootstrap的格線系統是由row跟column組成，每一個row都被切分成12等分
* 因為常用的版面是2、3、4欄的版面，所以就取最小公倍數12作為基準
:::
* 不指定column欄寬，會自動分配寬度
```xml!
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
```
* 指定column欄寬
```xml!
<div class="container">
<div class="row">
<div class="col-4">...</div>
<div class="col-8">...</div>
</div>
</div>
```
* column+breakpoint
EX：在手機上面滿版(只有一欄)，但是希望在平板上面有三欄，我該怎麼做？
```xml!
<div class="container">
<div class="row">
<div class="col col-md-4">...</div>
<div class="col col-md-4">...</div>
<div class="col col-md-4">...</div>
</div>
</div>
```
* row-cols欄數
* 控制一個row有幾個column，多的換行
* EX：平板橫向/電腦以上4欄，平板直向以上2欄，手機1欄
```xml!
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 justify-content-center">
<div class="col">......</div>
<div class="col">......</div>
<div class="col">......</div>
<div class="col">......</div>
<div class="col">......</div>
</div>
</div>
```
## Flex
因為row有flex的屬性，所以我們可以對column做以下幾種操作：
* <p style="color:purple">justify-content</p>
* <p style="color:purple">align-items</p>
* <p style="color:purple">align-content</p>
```xml!
<!-- 指定column欄寬 -->
<div class="container">
<div class="row justify-content-between">
<div class="col-4">...</div>
<div class="col-8">...</div>
</div>
</div>
```
:::success
客戶奇怪的要求：我想要一個三欄的版面，但是我想要每一個欄位的寬度只有3/12
該怎麼做呢？
:::
:::spoiler 解答在這裡
```xml!
<div class="container">
<div class="row justify-content-center">
<div class="col-3">...</div>
<div class="col-3">...</div>
<div class="col-3">...</div>
</div>
</div>
<!-- 或是-->
<div class="container">
<div class="row justify-content-around">
<div class="col-3">...</div>
<div class="col-3">...</div>
<div class="col-3">...</div>
</div>
</div>
```
:::
## Gutter
是時候讓column之間有點喘息的空間了。
gutter控制每一個column的padding。
* <p style="color:purple">g-0</p>
* <p style="color:purple">g-1</p>
* <p style="color:purple">g-2</p>
* <p style="color:purple">g-3</p>
* <p style="color:purple">g-4</p>
* <p style="color:purple">g-5</p>
```xml!
<div class="container">
<div class="row ">
<div class="col-3">...</div>
<div class="col-3">...</div>
<div class="col-3">...</div>
<div class="col-3">...</div>
</div>
</div>
```
<!-- :::danger
我在column上面設定背景顏色之後
gutter就沒有作用了
我該怎麼辦？
:::
因為gutter是指column的padding，而設定背景顏色的時候padding會受到影響，加上預設的flex物件之間沒有margin，所以你要給column一些margin。
底下是範例
:::info
class:`flex-nowrap`屬性指的是CSS的`flex-wrap: nowrap`。
因為我們有三個4欄的`col`，所以他們被分配到各1/3的row的寬度，但是現在每一個`col`又被手動加上水平10px的`margin`，所以最後一個`col`會超出去整個`row`，這時候需要設定`flex-wrap: nowrap`，讓超出去的`col`不要被換行，這樣會使所有的`col`重新分配大小。
:::
```xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Document</title>
<style>
.content{
text-align: center;
margin: 0px 10px;
}
#content1{
background-color:blueviolet;
}
#content2{
background-color: brown;
}
</style>
</head>
<body>
<div class="container">
<div class="row g-0 justify-content-center flex-nowrap m-3">
<div class="content col-3" id="content1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
<div class="content col-3" id="content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
<div class="content col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
<div class="content col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
``` -->
Sign in with Wallet
Connect another wallet