---
# System prepended metadata

title: Bootstrap 4
tags: [Bootstrap 4]

---

---
title: Bootstrap 4
tags: Bootstrap 4

---

> 【目次】
> [TOC]
> 
> Reference Website：
> 1. [Bootstrap Overview](https://bootstrap.hexschool.com/docs/4.1/layout/overview/)
> 2. [Bootstrap 4 Tutorial](https://www.w3schools.com/bootstrap4/default.asp)

---
# **Bootstrap 4**

## What is Bootstrap？
* Bootstrap 是一組以HTML、CSS及JavaScript為基礎的開源前端網頁框架，旨在==使動態網頁和Web應用的開發更加容易==。
* 提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件。

## Why use Bootstrap？
* Easy to use
* Responsive features
* Mobile-first approach
* Browser compatibility

## Let's start!

### 1. 基本設定-1
* Viewport
    ```htmlmixed=
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ```
* Bootstrap CSS
    ```htmlmixed=
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    ```
* 動畫效果：JS, Popper.js, and jQuery
    ```htmlmixed=
    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    ```

### 2. Containers - two classes 
1. ```.container``` ：responsive fixed width container.
2. ```.container-fluid``` ：full width container, spanning the entire width of the viewport.

![](https://i.imgur.com/Q99uTdT.png)

```htmlmixed=
<div class="container" style="border: 1px solid blue;">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>
```

### 3. Bootstrap Grids 
* 把一個頁面分成12等份，方便做版面規劃。
* ==放在 Container 裡面==
* Grid Classes
    1. ```.col-``` (extra small devices - screen width less than 576px)
    2. ```.col-sm-``` (small devices - screen width equal to or greater than 576px)
    3. ```.col-md-``` (medium devices - screen width equal to or greater than 768px)
    4. ```.col-lg-``` (large devices - screen width equal to or greater than 992px)
    5. ```.col-xl-``` (xlarge devices - screen width equal to or greater than 1200px)
 
```htmlmixed=
<div class="row">
  <div class="col-sm-3" style="border: 1px dashed red;">col-sm-3</div>
  <div class="col-sm-9" style="border: 1px dashed yellow;">col-sm-9 (small devices - screen width equal to or greater than 576px)</div>
</div>

<div class="row">
  <div class="col-md-3"  style="border: 1px solid blue;">col-md-3</div>
  <div class="col-md-5"  style="border: 1px solid blue;">col-md-5 (medium devices - screen width equal to or greater than 768px)</div>
  <div class="col-md-4"  style="border: 1px solid blue;">col-md-4</div>
</div>
```

## 補充
* bootstrap 是否還需要 media query?
* RWD 模板：
    * [Bootstrap 模板](https://getbootstrap.com/docs/4.1/examples/)
    * [w3school 模板](https://www.w3schools.com/w3css/w3css_templates.asp)

