---
tags: JSF_教學
---
# 訓練課程 8 (t08) - Bootstrap 的 Grid System
## Introduction
目標
介紹 Bootstrap Grid System
大綱
- 安裝 Bootstrap web application
- Grid system 的工作原理
- 響應式切換點
[Code Demo Site](https://codepen.io/hychen39/pen/rNVZMQQ)
## 安裝 Bootstrap web application
Include CSS
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```
Include required JS
```html
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
```
Use HTML 5 doctype
```html
<!doctype html>
<html lang="en">
...
</html>
```
Add Responsive meta tag
```html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```
Template for using the Bootstrap
```html
<!-- 1. Use the HTML doctype -->
<!doctype html>
<html lang="en">
<head>
<!-- 2. Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 3. Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 4. JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
```
## Grid system 的工作原理
1. Container: Grid System 必須放在 `.container` 中。Containers provide a means to center and horizontally pad your site’s contents in the viewport.
2. Row: 一個 Container 中可以有多個 row。row 和 row 之間有留白。Row 裡面可以分割成多個 column
3. Column:
- 放置網頁的內容。
- 1 個 Row 總供有 12 個 column, column 間有留白。
- Column 可以設定在不同裝置下的寛度。
- Column 內可以再放 row, 再將該 column 分成 12 等份。
例子:
```html=
<div class="container">
<div class="row">
<div class="col-6">
Row 1, Column 1
</div>
<div class="col-6">
Row 1, Column 2
<div class="row">
<div class="col-6">
Row 1, Column 1 in column 2
</div>
<div class="col-6">
Row 1, Column 2 in column 2
</div>
</div>
</div>
</div>
</div>
```
## 響應式切換點
Column 的寛度可隨不同的裝置而有不同的設定。
例如, 在手機上佔 12 columns, 但在平板上佔 8 columns。
[Demo: Mixed column width](https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match)
when Width <576px, use `col-?` class
When Width >768px, use `col-md-?` class
Bootstrap 提供的響應式切換點及樣式
如果所有裝置上都是一樣的寛度, 使用 `col-?` 即可。
column class 的命名規則
`.col`: 不指定斷點及欄位數, 寛度平均分配。參考 [All Breakpoints ](https://getbootstrap.com/docs/4.3/layout/grid/#all-breakpoints)
`.col-{n}`: 指定欄位數, 但不指定斷點。用於不同裝置的斷點皆相同。
所有寛度下, row 的欄位切成 4/12, 8/12。
```html
<div class="row">
<div class="col-4">
4/12 width
</div>
<div class="col-8">
6/12 width
</div>
</div>
```
`.col-{break_point}-{n}`: 指定斷點及欄位數。
若超過 viewport 960px (lg) 寛度, row 的欄位切成 4/12, 8/12。若小於 960px, 則寛度皆相等。
```html
<div class="row">
<div class="col-lg-4">
4/12 width when lg
</div>
<div class="col-lg-8">
6/12 width when lg
</div>
</div>
```
Column 的寬度也可以混合多個斷點下的寬度, 視 viewport 的寬度動態調整。
大於 768px 時, row 的寬度切成 8/12, 2/12, 2/12。此時作用的為 `col-md-?` class。
小於 576px 時, 第一個 column 的寬度為 12/12. 第二及三個 column 的寬度分別為 6/12, 6/12。此時作用的為 `col-?`。
```html
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-2">.col-6 .col-md-2</div>
<div class="col-6 col-md-2">.col-6 .col-md-2</div>
</div>
```
Sign in with Wallet
Connect another wallet