認識與使用 Bootstrap 4
閱讀時間約 3 分鐘
1.關於 Bootstrap 4
Bootstrap 是基於 HTML、CSS、JavaScript，用於快速開發 Web 應用程序和網站的前端使用者開發介面，提供頁面編排、表單、按鈕、導覽及其他各種元件及 JavaScript 擴充套件，目的是讓使用者在建立動態網頁和 Web 應用程式開發時能更加容易。
Bootstrap 原名Twitter Blueprint，由Twitter 的Mark Otto和Jacob Thornton編寫，原意是製作一套可方便保持一致性的工具和版型。之後，Twitter Blueprint更名為Bootstrap，在2011/8/19做為開源專案釋出。此後，專案繼續由Mark Otto、Jacob Thornton和一個核心開發小組維護。
在2012/1/31，釋出Bootstrap 2。此版本增加了12列網格布局和回應式元件，並對許多元件進行了修改。從2.0版本起，Bootstrap支援響應式網頁設計（RWD），頁面布局可根據顯示網頁的裝置（桌面、平板電腦、手機）來進行動態的調整。
Bootstrap 3於2013釋出，設計方針開始以行動裝置優先，並使用扁平化設計為主軸，並特別強調響應式網頁設計。2015/4/23，Mark Otto宣布正在開發Bootstrap 4，在經歷了多個版本的歷練，並修改了大量元件與加入許多新元素及功能後，Bootstrap 4 Beta最終於 2017年8月釋出。
(資料來源:維基百科)
2.使用 Bootstrap 4的準備
想要快速建構 Bootstrap 頁面，請先連上官網首頁（https://getBootstrap.com），然後按下【Get started】，開啟以下網頁後，即可看見相關的內容說明：
在Quick start中即有說明所需要的相關CSS與JS檔案位址。
請自行新增並開啟空白的 HTML5 頁面，即可使用 StackPath 免費提供的 BootstrapCDN。先將CSS樣式表 <link> 複製／貼上到網頁中，所有其他樣式表之前的 <head> 中，以便載入 Bootstrap 的CSS。
接著，加入 JavaScript。請在 </body> 結尾標籤前，在頁面末尾放置以下的 <script> ，以便啟用。
最後，Bootstrap 的開發以行動裝置為優先，為了確保在全部裝置上都能正確支援顯示和觸控縮放，請將響應式中繼標籤記添加到 <head> 中。
也可以直接複製Starter template所提供的完整內容至你的空白HTML頁面上。
有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作:
【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】
【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】
相關課程 / 優勢多媒體 - RWD響應式網頁設計
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
從舞蹈認識平權，Jason用一輩子的時間創立Switch TaipeiShall we dance? （可以和我跳隻舞嗎？）
試問：這樣的起手式你想到的畫面。
2020-10-26
RSTP 介紹與應用 (上)
為什麼要有redundant protocol?本次要介紹Rapid Spanning Tree Protocol (RSTP) 這個protocol的重點與核心，後續將說明應用上的topology。
首先介紹protocol的目的 : 最大的目的就是redundant
簡單講就是Topology(拓樸)中，一些重要的path想做到backup
2020-06-06
【FROZEN／Elsanna】短篇-天使與旅人這個城市裡面有天使，會從高高的天上飛下來凡間給人們送上禮物。
天使的翅膀羽毛像是鑲滿了薄薄的黃金葉片，雙眼像是世間最昂貴的琉璃寶石，金白色的長髮像是皇宮裡最深鎖的絲綢一樣美麗。
世人對天使稱讚不已。
「那位天使她像教堂裡高掛的神話一樣漂亮。」一位常常在清晨裡擔任清道夫的老先生說道，他總是在
2020-05-30
認識A/B Testing：利用A/B Testing驗證價值主張沒有看過豬走路也有吃過豬肉（？），就像a/b testing一樣！很多網站其實都有偷偷在使用噢。它是一種網站拿來快速測試改版、效果及功能的方法之一，測試結果可以幫助我們拿來協助設計改動及商業決策。
2020-05-20
Git 與 Github 是什麼？如何使用 Git？搞清楚 Git 與 GitHub 的差別並學會必會操作
什麼是 Git？
Git 是一個軟體，可藉由它產生一個數據庫（repository），並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔，讓協同開發變得容易。（關於不同版本控制系統的介紹，請參閱 Git 官方教學文件）
2019-12-01
Voicetube Hero 使用心得與零元挑戰成功由於今年很明顯的感受到英文能力的不足會影響我專業能力的提升和職涯的發展，所以一直在試著應該要用什麼方式提升英文，當然一方面可能還不捨得花重本，所以看到Voicetube Hero，課程4000元，加上當時的零元挑戰，好像是一個不錯的機會可以逼自己去看英文。
2019-11-04