Twitter Bootstrapで覚えておきたい便利なclass一覧

最近はCSSを勉強したいなーと思い、まずはTwitter Bootstrapを使ってみています。
で、やりたいこととBootstrapのClass一覧があればいいなーと思い、調べたことを備忘録として。

キレイな見出しを作りたい

<div class="page-header">見出し</div>

可変グリッドデザインにしたい

containerをcontainer-fluid・rowをrow-fluidに変更する。

<div class="container-fluid">
  <div id="header">header</div>
  <div class="row-fluid">
    <div class="span4"style="background-color:red;">サイドバー</div>
    <div class="span8"style="background-color:yellow;">メイン</div>
  </div>
  <div id="footer">footer</div>
</div>

バッジを付けたい

<span class="badge">バッジ</span>

パンくずを作りたい

<ul class="breadcrumb">
　<li>
　 <a href="#">Home</a><span class="divider">/</span>
　</li>
　<li>
　　<a href="#">第２階層ページ</a><span class="divider">/</span>
　</li>
　<li class="active">表示しているページ</li></ul>

このサイトのソースを見るともっとよく理解できそう。
基本的には、独自のCSSも作ってBoostrapをオーバーライドするのが良さそう。

Twitter Bootstrap使い方-コンポーネント-v2.0.4

色などを変えるだけならLESSですかね。