Bootstrap：快速建立響應式網頁
Bootsrap 是一種功能強大得前端網頁框架，相關介紹都可以從網路上找到許多資料，對於非科班出身，也不是從事前端相關工作，只是想要快速製作網頁又想要網頁美美的人，
以前曾學習過一點 HTML、CSS …等前端網頁程式語言，在念碩士班時，我在實驗室也是負責網頁管理，對於網頁製作其實並不陌生，不過一直都沒好好學習網頁設計這塊，雖然知道有一些模板框架可以使用，好縮短網頁製作的時間，但都沒去深入研究，光搞研究就占了大半時間………
近期小弟我正在服兵役，剛好休假都沒啥事幹，乾脆來研究之前一直沒好好正視的 Bootstrap
Bootsrap 是什麼？
是一個由 HTML、CSS 和 JavaScript 寫成的前端框架
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
從官網介紹可以略知一二 ──── 使用全球最流行的前端開發工具 Bootstrap，快速設計及自定義響應式網站，其擁有豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。
基本上它就是已經替你設定好響應式網頁所需要的設定了，使用者只要在框架的基礎上進行網頁開發就好。
恩？所需設定是什麼呢？
基本上它已經寫好 CSS，開發者只要專心製作 HTML 網頁並上加上 Bootstrap class，就能將它整合到你的網頁之中，再加上本身的官方文件也非常完善，基本上許多指令可以直接複製貼上，不管是學習還是開發上都平易近人，這種方式肯定可以提高效率，難怪許多參考書都會提到它。
開始製作
首先，先去 Bootstrap 官網 準備下載檔案，雖然裡面說可以利用 npm 來安裝，但我這隻菜雞從來沒用過，以後找個時間再來學習吧，這次就先 Pass 了，取而代之的方式，我直接從官網下載範例來修改成自己的網頁，我是使用 4.6 版的範本來做，然後我自己習慣使用 VS Code 來編輯自己的程式，基本上準備工作就完成了。
接下來，就選擇自己喜歡的範例當成基底進行修改，這些範例都是可以直接開的，我只要把自己想要打的內容加入進去，並適當加入 Bootstrap 的屬性即可。例如 Grid 屬性 (取至官網說明文件)，你只要設定對應的 Class 名稱，就可以讓你的 HTML 具有響應式網頁的網格佈局了。
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
其他還有許多文件等著探索，礙於時間，先對 Grid 系統有基本認識就好，其他東西用法也一樣，就是加入 Bootstrap 的屬性進去，我目前使用兩種範例：一個是 Cover 當作首頁，看起來像一頁式網頁的範本；而另一個是 Jumbotron，一個超大容器的範例。
小結
用了 Bootstrap 製作出個人網站，不過目前沒放什麼內容，其他東西像是多頁面共用導覽列及頁尾則是用引入 JavaScript 去解決，以前內容共用功能是用 PHP 來做，需要搭配後端伺服器，但這次我將製作好的網頁放在 GitHub 上，並不能靠 PHP 來完成，所以才用JS去做。之後邊學習就邊更新網站吧XD
完成的個人網頁：https://jacky10001.github.io/