iT邦幫忙

DAY 24
0

練習如何去開發一個通訊軟體 Boo it!系列 第 24

Day 24 - 程式設計師的福音,網頁前端套件包 Twitter Bootstrap

經常聽到許多程式設計師在面臨要製作網頁的前端介面(User Interface)的時候,都會抱怨『我美工不好啦!』

首先,先向各位前端工程師說聲抱歉,很多人都會稱呼你們為『美工』,我們之前就遇到不少前端工程師或是版面設計師對於被稱呼為『美工人員』很感冒

好,正名完以後,接著要回到主題來了,因為許多工程師面對到要設計前端就舉步維艱,因此像是 Yahoo 就提出了 YUI、Twitter 發表了 Bootstrap,後來還有 Flat UI、RWD Design、jQuery Mobile、d3.js、magic animation...等套件庫,提供『美工不好』的設計師也可以簡單勾勒出有質感的網頁版面,這些多數是使用 CSS 和 JavaScript 來修飾 HTML,讓使用者只需要引用指定的 class name 或 id name,或是建立 JavaScript 物件,就可以做出想要的效果

Twitter Bootstrap 是很廣泛使用,由 Twitter 工程師維護,採用 CSS3 和 jQuery 來提供的樣板套件庫,其中還收錄了一些圖示設計大師(Glyphicon Halflings)的圖集,更棒的是,這個套件庫也同時間提供了 Responsive Design 的功能,對於我們設計桌上與行動兩版網頁更加有力。

Bootstrap 的引用可以下載原始碼或是以 CDN 的方式引用,例如:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

如果是下載程式碼的方式,資料夾結構如下:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

不過核心的程式碼檔案其實就是我們用 CDN 引用的兩個:bootstrap/css/bootstrap.css 和 bootstrap/js/bootstrap.js

而帶有 min 的檔案只是壓縮成 inline 的檔案,font 是字體檔案,bootstrap-theme.css 是選擇性使用 bootstrap 主題需要用到的檔案,本文不多介紹

很典型常用的元素有 Grid System(排版元素)、Form、Button、Progress Bar、Table 等,這些使用方法在 Bootstrap 官方網站都可以找到很直觀的介紹,也有一些官方已經提供好的範本提供參考

像上面就是一個很標準的 bootstrap 使用範本,以 Button 為例,如果我們建立了一個 Button 後,想要套用白色按鈕的樣板,就把 class 名稱設定為 default ,即可得到這個按鈕的樣子,其他的元件也是依樣話葫蘆,真的很輕易上手

至於另一個重頭戲 - Responsive Design,先稍微 show 一下那是什麼,像上面的圖,是將視窗開到最大呈現的畫面,如果沒有自適的設計,那麼將視窗縮小以後,排版就會跑掉,不然就是會出現拉霸,如果是上下拉霸,還算是直覺的,但是多了左右拉霸就很不友善了,所以有 Responsive Design 的網頁在視窗縮小以後:

明天接著介紹 Responsive Desgin~


上一篇
Day23 - Boo-it 架構
下一篇
Day25 - 適者生存,會根據環境自我調整的版面設計 Responsive Design
系列文
練習如何去開發一個通訊軟體 Boo it!30

1 則留言

熊熊想起你
iT邦新手 4 級 ‧ 2014-10-16 16:09:37
【**此則訊息已被站方移除**】

我要留言

立即登入留言