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="#">第2階層ページ</a><span class="divider">/</span>
 </li>
 <li class="active">表示しているページ</li></ul>

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

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

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

コメント

タイトルとURLをコピーしました