---
# System prepended metadata

title: RWD Bootstrap4 for Stat Class05
tags: [' Bootstrap4', RWD]

---

---
title: RWD Bootstrap4 for Stat Class05
tags: RWD, Bootstrap4

---

> 【目次】
> [TOC]
> 
> Reference Website：
> 1. [bulma](https://bulma.io/)
> [bulma和bootstrap...前端框架我該選擇哪個？](https://www.zhihu.com/question/265026551)
> 2. [Bootstrap -> 建議看，概念我都講過了](http://cythilya.blogspot.com/2015/02/bootstrap-rwd-template.html)
> 4. [Content delivery networks (CDN)](https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html)
* [Ajax + Bootstrap --Bessy Huang](https://hackmd.io/efmCxJbISOyREejQ7woaOQ?view)
* [RWD --Sam Yang](https://hackmd.io/pKxbRF20TQm_JtXYxZvcHA?both#%E6%80%8E%E9%BA%BCRWD)
---
# **12/11 Class05 RWD + Bootstrap4**

## Bootstrap (原名Twitter Blueprint)
由Twitter的Mark Otto和Jacob Thornton編寫，本意是製作一套可以保持一致性的工具和框架。

2011年8月Github上釋出原始碼。
2014年6月成為Github上第一名的project。
* 前端網頁框架(framework)
* ==讓你簡單且快速地創造出RWD網頁==
* 包括HTML、CSS及JavaScript的框架，提供網頁排版、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。
    * 以往，開發介面需要使用不同的程式碼庫，容易導致不一致的問題，增加維護的負擔。

1. Bootstrap並非唯一能製造RWD的framework。
    * Ex: bulma、Foundation、Ulkit、Semantic UI
3. [你可以客制化你的Bootstrap](https://wcc723.github.io/sass/2015/12/01/bootstrap-and-compass/)

## [Using bootstrap4](https://bootstrap.hexschool.com/docs/4.0/layout/grid/)
* Content Delivery Network(CDN)
    * 一種內容在網路上傳輸的快取機制。
    * 透過Internet的互相連接的電腦網路系統，負責內容傳遞。
    * 利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。

* 加入bootstrap CDN：
    * [Popper.js](https://bootstrap.hexschool.com/docs/4.1/components/tooltips/)：輕量級tooltips提示類JS特效插件。

```htmlmixed=
<head>
    # CSS #
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    
    # jQuery #
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    # Popper.js #
    <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>
    # JS #
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

<!--    integrity="[hash]-[value]"
目前僅 chrome、firefox 及 opera 有支援，用來檢驗載入的 script 是否經過第三方竄改。    -->
```

* 刪刪樂~
```css=
* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%; /* For mobile: 0px ~ 500px */
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {   
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
```

* 加上 ```<div class="container-fluid"></div>```
    * bootstrap用row包圍col：
        1. 製造橫向的並排結構
        2. 消除col之間的gap

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

---
![](https://i.imgur.com/zDMwyQe.png)
<iframe height='500' scrolling='no' title='RWD Bootstrap  範例' src='//codepen.io/bessyhuang/embed/bQrZLJ/?height=265&theme-id=0&default-tab=html,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/bQrZLJ/'>RWD Bootstrap  範例</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


## Using templates
* https://getbootstrap.com/docs/4.1/examples/
* https://www.w3schools.com/css/css_rwd_templates.asp