Twitter 除了創造了 microblogging 這一風潮外，還建立了一套非常方便的工具：Twitter Bootstrap。
做任何網站或 web application，會花很多時間在網站的外觀上：表單應該怎樣加上效果，怎樣令此按鈕看上去更立體，怎樣做些這個分頁效果等。就算是個 prototype，簡陋的頁面也會令使用者望而生畏。Bootstrap 正正可以解決此問題。
Bootstrap 其實是一套框架，它只是一堆 css （version 2.0+ 用 less）和 html ，但卻提供所有常用的配件，如 navigation bar、dynamic menu、按鈕等，而且外貌還非常不錯。對於不太懂設計的 developer 來說，簡直是天降甘露。也因為它只是 html 和 css （ok，我知道也有 javascript 啦），你可以簡單的將它套進你的頁面上，要做的只是下載、解壓，然後將你的 static/dynamic html 改成：
就只是加進 css 和兩個 javascript 而已。再加上簡單的 css class，將你的 button 變成如些效果：
或用上 tab:
做任何網站或 web application，會花很多時間在網站的外觀上：表單應該怎樣加上效果，怎樣令此按鈕看上去更立體，怎樣做些這個分頁效果等。就算是個 prototype，簡陋的頁面也會令使用者望而生畏。Bootstrap 正正可以解決此問題。
Bootstrap 其實是一套框架，它只是一堆 css （version 2.0+ 用 less）和 html ，但卻提供所有常用的配件，如 navigation bar、dynamic menu、按鈕等，而且外貌還非常不錯。對於不太懂設計的 developer 來說，簡直是天降甘露。也因為它只是 html 和 css （ok，我知道也有 javascript 啦），你可以簡單的將它套進你的頁面上，要做的只是下載、解壓，然後將你的 static/dynamic html 改成：
<!DOCT<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
就只是加進 css 和兩個 javascript 而已。再加上簡單的 css class，將你的 button 變成如些效果：
或用上 tab:
或這些 label：
比起自己砌 html / css，是不是方便百倍、漂亮千倍？而且它還是 responsive webpage ，可跟著 screen size 改變排位，這個要自己做的話何止麻煩萬倍？
唯一的缺點，是因為它太受觀迎了、太多人用了，齋用預話的顏色的話很難突出自己的 website。當然它支援自訂，容許你自設顏色、背景等。你連這樣的設定也懶？幸好，網上有不少其他設定好的模板任君選擇，總有一款適合你的。
如果還是覺得 bootstrap 不適合的話，另外一個叫 Foundation 的也可一試。它主要是為 responsive framework，沒有什麼額外的功能，較為簡單。若想令自己 website 變成 responsive 的話可以試試。
張貼留言