最近はCSSを勉強したいなーと思い、まずはTwitter Bootstrapを使ってみています。
で、やりたいこととBootstrapのClass一覧があればいいなーと思い、調べたことを備忘録として。
キレイな見出しを作りたい
[php]
<div class="page-header">見出し</div>
[/php]
可変グリッドデザインにしたい
containerをcontainer-fluid・rowをrow-fluidに変更する。
[php]
<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>
[/php]
バッジを付けたい
[php]
<span class="badge">バッジ</span>
[/php]
パンくずを作りたい
[php]
<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>
[/php]
このサイトのソースを見るともっとよく理解できそう。
基本的には、独自のCSSも作ってBoostrapをオーバーライドするのが良さそう。
Twitter Bootstrap使い方-コンポーネント-v2.0.4
色などを変えるだけならLESSですかね。
コメント