Twitter Bootstrap 1.4

1.一般的なタグにもすでにきれいなスタイルがあてられている
・smallタグ、preタグ、li、strongなど

2.ミニラベル
・labelタグという独自タグがあるのではない
・ラベルのように、よく使うクラスが予め準備されているか

<span class="label important">重要！</span>

3.ボタン
・最初にbtnクラスを指定
・次に「色」「大きさ」「有効か無効か」のクラスを指定
※「seccessは緑色」など、予め設定されている

4.テーブル
・1.3.0の書き方

<table class="zebra-striped">

　<thead>

 <tr><th>1990年</th><th>2000年</th><th>2010年</th></tr>

　</thead>

 <tbody>

 <tr><td>11</td><td>32</td><td>22</td></tr>

 </tbody>

</table>

・1.4.0で、テーブルに縦線を出すにはbordered-tableの追加が必要

<table class="bordered-table zebra-striped">

※<thead><tbody>を忘れないようにする


5.パンくずナビゲーション
・何か凄い技があるかと期待してたけど、レイアウトに関する設定が予め用意されてるだけ


6.ページナビゲーション

 <div class="pagination">

 <ul>

 <li class="prev">前に</li>

 <li>1</li>

 <li class="active">2</li>

 <li>3</li>

 <li>...</li>

 <li>24</li>

 <li>25</li>

 <li>26</li>

 <li class="next">次に</li>

 </ul> 

 </div> 

レイアウトクラスが用意されているだけ。
見た目は今風


7.トップバー
画面上部に固定で表示させる、トップナビゲーションバーの作り方

<div class="topbar">

 <div class="fill">

 <div class="container">

 MySite

 <ul class="nav">

 <li class="active">ホーム</li>

 <li>このサイトについて</li>

 <li>ヘルプ</li>

 </ul>

 </div>

 </div>

</div>

8.もっとトップバー
トップバーに検索ボックスを実装する方法

<div class="topbar">

 <div class="fill">

 <div class="container">

 MySite

 <ul class="nav">

 <li class="active">ホーム</li>

 <li>このサイトについて</li>

 <li>ヘルプ</li>

 </ul>

 <form action="" class="pull-right">

 <input type="text" class="span3" placeholder="検索">

 <button class="btn" type="submit">検索</button>

　　　　　　</form>

 </div>

 </div>

</div>

※class="span3"は長さを表すクラス。別にここじゃなくても、色々な場所で使える
※placeholder="検索">で、フォームに初期表示される値を指定できる


9.ドロップダウンメニュー

<ul class="nav">

 <li class="active">ホーム</li>

 <li>このサイトについて</li>

 <li>ヘルプ</li>

 <li class="dropdown" data-dropdown="dropdown">

 製品紹介

 <ul class="dropdown-menu">

 <li>製品A</li>

 <li>製品B</li>

 <li class="divider"></li>

 <li>製品C</li>

 </ul>

 </li>

 </ul>