Bootstrapの使い方

Webサイトを迅速かつ簡単に制作するための 強力なツールBootstrapを学習中

過去10年、個別の開発コミュニティから入手して利用してきたJS/CSSのほとんどの機能が提供されている。
githubの説明ページを参考にカストマイズしながら学習している。いろんな人が日本語の説明を書いているが 公式サイトの記述と違ったりするので、オリジナルの英語サイトに準拠して書いている。
※学習後、カストマイズして運用に使うスクリプト&スタイルは/assets/に集約した。過去のスクリプトは/script/に保存した。

1. Bootstrapをダウンロード

Bootstrap公式サイト
2013-1-15最新版 Version2.2.2
スタイル要素をカストマイズしてダウンロードできる。

  bootstrap/
  ├── css/
     ├── bootstrap.css
     ├── bootstrap.min.css
  ├── js/
     ├── bootstrap.js
     ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

2. 標準的なHTMLファイル

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <link href="css/bootstrap.css" rel="stylesheet">
  6. </head>
  7. <body>
  8. <h1>Hello, world!</h1>
  9. <script src="http://code.jquery.com/jquery-latest.js"></script>
  10. <script src="js/bootstrap.js"></script>
  11. </body>
  12. </html>

3. 固定グリッド containerheaderrowspan12footer

横幅940pxの固定エリアを12カラムに分割してページをデザインする。

<div class="container">
    <div id="header">
      ヘッダー
    </div>
    <div class="row">
      <div class="span4" style="background-color: green;color:white;">サイドバー</div>
      <div class="span8" style="background-color: blue;">メイン</div>
    </div>
    <div id="footer">
      フッター
    </div>
</div>

サイドバー
メイン

4. 可変グリッド container-fluidrow-fluid

ブラウザのウィンドウ幅に応じて表示幅を可変にする。

<div class="container-fluid">
    <div id="header">
    ヘッダー
    </div>
    <div class="row-fluid">
      <div class="span4" style="background-color: silver;">サイドバー</div>
      <div class="span8" style="background-color: gray;">メイン</div>
    </div>
    <div id="footer">
    フッター
    </div>
</div>
サイドバー
メイン

5. オフセット offset

段組の間を空ける。 固定グリッドのspan8を span6 offset2 にした例。spannとoffsetmのn,mの総和が12になるようにする。

<div class="span6 offset2" style="background-color: seagreen;">メイン</div>
サイドバー
メイン

6. 入れ子の例

サイドバー
入れ子1
入れ子2

9. ページネーション pagination pager

<div class="pagination pagination-centered">
    <ul>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
    <li class="previous"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
</ul>

10. ラベル label label-success label-warning label-important label-info

Default Success Warning Important Info Inverse
    <span class="label">Default</span>
    <span class="label label-success">Success</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-important">Important</span>
    <span class="label label-info">Info</span>
    <span class="label label-inverse">Inverse</span>

11. バッジ badge

1 2 4 6 8 10
    <span class="badge">1</span>
    <span class="badge badge-success">2</span>
    <span class="badge badge-warning">4</span>
    <span class="badge badge-important">6</span>
    <span class="badge badge-info">8</span>
    <span class="badge badge-inverse">10</span>

12. ヒーローユニット hero-unit

Bootstrapの使い方

ページトップなどに表示する見出しに使う。

13. サムネール thumbnailsthumbnail

    <ul class="thumbnails">
      <li class="span2"><a href="#" class="thumbnail"><img src="img/img_260_180_1.png" alt=""></a></li>
      <li class="span2"><a href="#" class="thumbnail"><img src="img/img_260_180_2.png" alt=""></a></li>
      <li class="span2"><a href="#" class="thumbnail"><img src="img/img_260_180_3.png" alt=""></a></li>
      <li class="span2"><a href="#" class="thumbnail"><img src="img/img_260_180_4.png" alt=""></a></li>
    </ul>
説明
  <div class="thumbnail span2">
   <img src="img/103.jpg" alt="">
   <div class="caption">説明</div>
  </div>

14. アラート alertalert-erroralert-info

Alert! class="alert"    ×をクリックすると非表示
色指定 alert-error指定
色指定 alert-info指定

15. プログレスバー progressbar

16. ボタングループ btn-groupbtn-toolbarbtn

DefaultSuccessPrimaryInfoDanger

17. アイコン <i class="icon-xxxx"><i>

追加アイコン glyphicons.pngcustom.css