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