--- 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 等份。 ![](https://i0.wp.com/bootstrapcreative.com/wp-bc/wp-content/uploads/2016/11/Screen-Shot-2016-11-22-at-5.18.43-AM.png?w=732&ssl=1) 例子: ```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 ![](https://i.imgur.com/M2sGJBf.png) When Width >768px, use `col-md-?` class ![](https://i.imgur.com/kbD4CYx.png) Bootstrap 提供的響應式切換點及樣式 ![](https://i.imgur.com/crIpLAc.png) 如果所有裝置上都是一樣的寛度, 使用 `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。 ![](https://i.imgur.com/a5SQN9w.png) 小於 576px 時, 第一個 column 的寬度為 12/12. 第二及三個 column 的寬度分別為 6/12, 6/12。此時作用的為 `col-?`。 ![](https://i.imgur.com/J8tv2lc.png) ```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> ```