第 5 章 Bootstrap

5.1 參考資料

5.2 什麼是Bootstrap

Bootstrap is a free front-end framework (網頁前端架構) for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs(指可隨瀏覽裝置大小自動調整)

5.3 自動調整設計Reponsive Design

html responsive
1. 使用meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  - viewport：瀏覽器（Chrome，IE，Safari）瀏覽「目前網頁」的範圍。
2. style使用百分比定義寛度: width:100%;(保持螢幕100%寬度)，max-width:100%;(隨螢幕調整，但最寬不超過原照寬度的100%)。
3. style使用vw單位字義font-size大小：1vw=viewport寬度的1% 如：style="font-size:10vw;"

5.4 套用設定

w3school Bootstrap 4 Get Started

在<head>...</head>加入

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

在<body>...</body>的最底部加上

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

5.5 格狀系統(grid system)

Bootstrap’s grid system is built with flexbox(彈性盒子) and allows up to 12 columns across the page.

每增加一個row，用彈性盒子塞滿，每個盒子所跨的column數可自定，但加起來不超過12。

CSS-flexbox說明
- 設定<div>帶有{display:flex;}設計，則它下面的所有子<div>就會是彈性盒子。
- 彈性盒子並不完全responsive.

5.5.1 BS格狀系統使用方式

<div class="container"> 設定BS彈性盒子含蓋範圍。
- <div class="row"> 新增一行。
  - <div class="col"> 在這一行增加一個彈性盒子設定。
範例

5.5.1.1 彈性盒子含蓋範圍

<div class="container">：左右盡頭有留白
<div class="container-fluid">：左右盡頭「沒」有留白
w3s說明

5.5.1.2 彈性盒子設定

先確認已被以下<div>包覆住：

<div class="container">
  <div class="row">
    .....從這裡面開始放彈性盒子
  </div>
</div>

放法：
```
<div class="彈性盒子的class設定">...</div>
```
- 一個<div>...</div>代表一個盒子。
彈性盒子的class種類：
- .col：依盒子數平分12欄數（不管營幕大小同一row都維持盒子數目）
- .col-數字：指定盒子跨越欄數（整數1-12）,同一row各盒子數加起來總欄位不超過12
- .col-裝置代號-數字：比裝置代號螢幕大或一樣大的裝置才適用；小於它的就直向堆疊。
  - 螢幕解析度<768px，class語法為col-xs ，如手機。
  - 螢幕解析度≥768px，class語法為col-sm，如平板。
  - 螢幕解析度≥992px，class語法為col-md，如桌機螢幕。
  - 螢幕解析度≥1200px，class語法為col-lg，如桌機大螢幕。
範例：How it works

5.6 常見Components

5.6.1 button

5.6.2 button group

5.6.3 card

5.6.4 collapse

5.6.6 pagination

分頁

5.6.7 tooltips

小提示、提醒。

5.7 圖例Icon

Bootstrap 4 參考

Iconic

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

<span class="oi oi-person" title="person" aria-hidden="true"></span>

fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

<i class="fas fa-user"></i>

網頁入門