Bootstrap from Twitter ver1.3.0の使い方を日本語解説して簡単css (web)デザイン

この解説ページ群の目次	url
トップ(このページです)	bootstrapの概要「等」
入手と設置(install)	http://d.hatena.ne.jp/end0tknr/20111016/1318730072
グリッドシステム	http://d.hatena.ne.jp/end0tknr/20111016/1318731266
(固定/可変)レイアウト	http://d.hatena.ne.jp/end0tknr/20111016/1318732238
テキスト(ﾍｯﾀﾞ, ﾘｽﾄ, ｲﾝﾗｲﾝﾗﾍﾞﾙ)	http://d.hatena.ne.jp/end0tknr/20111016/1318750736
テーブル	http://d.hatena.ne.jp/end0tknr/20111016/1318777018
フォーム、ボタン	http://d.hatena.ne.jp/end0tknr/20111017/1318779011
ナビゲーション	http://d.hatena.ne.jp/end0tknr/20111017/1318780114
警告とエラー	http://d.hatena.ne.jp/end0tknr/20111017/1318780510
ポップアップ	http://d.hatena.ne.jp/end0tknr/20111017/1318781086

bootstrapとは

http://twitter.github.com/bootstrap/
http://www.ideaxidea.com/archives/2011/08/twitter_bootstrap.html

2011年8月にtwitterからcss フレームワーク?のBootstrapがリリースされました。Bootstrapでは、簡単にグリッドや2カラム(ペイン)レイアウト、文字、フォーム、ポップアップ等をデザインできます。
Bootstrap ver.1.3.0は、次のブラウザをサポートしていますが、例えば、table.zebra-stripedはie8で動作しませんでした。

Latest Safari , Latest Google Chrome , Firefox 4+ , Internet Explorer 7+ , Opera 11

jQuery UIよりも簡単

http://jqueryui.com/home

同様のCSS フレームワークにjQuery UIがあります。jQuery UIは機能が豊富で、派手なページを作成できますが、bootstrapと比較するとcssクラスの構成が複雑なので、個人的にはbootstrapの方が扱いやすいと思います。

例えば、タブメニューは jQuery UI では次のように実装し

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
 <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
    <a href="#tabs-1">First</a>
  </li>
  <li class="ui-state-default ui-corner-top">
    <a href="#tabs-2">Second</a>
  </li>
  <li class="ui-state-default ui-corner-top">
    <a href="#tabs-3">Third</a>
  </li>
</ul>

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-2">
   Phasellus mattis tincidunt nibh. 
</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-3">
  Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis.
</div>
</div>