【Bootstrap 教學】網頁設計小白也能輕鬆駕馭 | Bootstrap 網頁 排版
隨著現在的行動裝置愈來愈多元,網頁設計已不再像早期一樣,只要將桌機版設計好就好,RWD響應式網頁,也有助於SEO搜尋排名,因此現在設計網頁RWD響應式網頁,已成為網頁設計的基本需求,現在有許多RWD響應式網頁的前端框架,而Bootstrap是目前相對受歡迎、也是最多人使用的前端網頁框架之一!這篇簡短的文章Glints要來簡單介紹Bootstrap,讓新手能對bootstrap網頁設計框架有一定的了解。Bootstrap是甚麼?Bootstrap[1]是由Twitter公司所推出的前端框架,擁有龐大的使用者經驗資料,無論在特效還是使用介面,都能符合現今大眾的使用習慣...
隨著現在的行動裝置愈來愈多元,網頁設計已不再像早期一樣,只要將桌機版設計好就好,RWD響應式網頁,也有助於SEO搜尋排名,因此現在設計網頁RWD響應式網頁,已成為網頁設計的基本需求,現在有許多RWD響應式網頁的前端框架,而Bootstrap是目前相對受歡迎、也是最多人使用的前端網頁框架之一!這篇簡短的文章Glints要來簡單介紹Bootstrap,讓新手能對bootstrap網頁設計框架有一定的了解。
Bootstrap是甚麼?Bootstrap[1]是由Twitter公司所推出的前端框架,擁有龐大的使用者經驗資料,無論在特效還是使用介面,都能符合現今大眾的使用習慣,甚至Bootstrap還整合網頁常會使用到的元素,如:圖像輪播、導覽列、下拉選單、滾動式頁籤、網格系統、表單等功能。最厲害的是這些特效與編排,完全無需撰寫到任何的CS、Javascript,只需要透過html標籤與架構設定,就能輕鬆的製作出各式的網頁特效與RWD版面編排。即便完全不懂CSS與Javascript,也能製作出各種酷炫的網頁效果,讓製作RWD響應式網頁,變得更簡單更快速。
如果想要了解何為前端軟體工程師的人,可以閱讀一下文章:【前端軟體工程師職責是包含什麼?如何找到高薪前端職位?】[2]
Bootstrap的核心Bootstrap是一個由HTML、CSS和JavaScript寫成的前端框架,核心的設計目標是達成RWD響應式與行動優先,也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設,讓你能在框架的基礎上進行開發,不需要再去煩惱瑣碎的設定。
Bootstrap的導入方式和平常引入CSS和JavaScript檔案的方式基本上也一樣,下載檔案之後,將其引入到HTML檔案裡。在官網的Getting Started頁面有介紹各種導入方式。
以下是引入專案的方式:
請將CSS的<link>標籤放在<head>裡,請記得瀏覽器是由上而下載入檔案,後面載入的會覆蓋掉前請載入的,如果Bootstrap和你自己的CSS發生衝突,應該要以你的為主,所以你的檔案要放在Bootstrap的後面。 JavaScrip...