---
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

    <meta name="viewport" content="width=device-width, initial-scale=1">

* Bootstrap CSS

    <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

    <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.


<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)

<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)