Bootstrap

特徴

HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器（PC、タブレット、携帯電話）の仕様に応じてWebページのレイアウトが動的に調整される。
最近では、コミュニティメンバーは中国語、スペイン語、ロシア語などマニュアル翻訳を進めている。

構造と機能

モジュール化されており、LESSの様々な要素を実装している。bootstrap.lessにはコンポーネントのスタイルシートが含まれており、利用者は使用するコンポーネントを選択して、ファイル自体を修正できる。
基本設計の修正は限定範囲で可能であり、LESSでの宣言により大規模な修正が可能となる。
LESS使用の際は、変数、関数、演算子、ネストされたセレクタだけでなく、Mixinが使用可能となる。
Ver2.0以来、ドキュメント内に特別な「カスタマイズ」オプションが追加された。また、利用者は必要に応じて様々なオプションの値、コンポーネント、修正をフォームで選択することができる。その後生成されたパッケージには、構築済みのCSSが含まれる。

グリッドレイアウトとレスポンシブデザイン

940ピクセル幅のグリッドレイアウトが標準設計であり、利用者は代わりに可変幅レイアウトを使用できる。両者ともに、携帯電話、縦長と横長、タブレット、パソコンの4つの閲覧端末や解像度に合わせてカラム幅を調整する機能がある。

CSSの理解

テキスト、テーブルやフォーム要素などを見栄え良くするなど、全ての主要なHTMLコンポーネントに基本的なCSSスタイル定義を適用する機能がある。

再利用

通常のHTML要素に加え、ボタンの拡張機能（ドロップダウン、グループ化、ナビゲーションリスト、水平・垂直タブ、ナビゲーション、階層リンクナビゲーション、改ページ位置の自動修正など）、ラベル、高度なタイポグラフィ、サムネイル、警告メッセージが含まれるプログレスバーなど、他の一般的な要素が含まれている。

JavaScript

jQueryプラグイン形式で一部のJavaScriptが使用可能であり、ダイアログボックス、ツールチップ、カルーセルなどのユーザーインターフェイス機能のほか、入力欄のオートコンプリート機能を含む既存要素の拡張機能が利用できる。Ver2.0では、モーダル、ドロップダウン、Scrollspy、タブ、ツールチップ、ポップオーバー、アラート、ボタン、折り畳み、カルーセルと先行入力などのJavaScriptプラグインがサポートされている。
Dojo Bootstrapと呼ばれる、Dojo Toolkitを使用したTwitter用の実装も利用可能である。それは、Twitter Bootstrapプラグインのポートであり、Dojoのコードを基に作成され、AMD非同期モジュール定義に対応している。
同様に、UI Bootstrapと呼ばれる、AngularJS制御用Bootstrapも存在する。

利用例

HTMLページでの使用時に、Bootstrap用CSSをダウンロードし、HTMLファイルのリンクを用意する。（また、LESSの特別なコンパイラをダウンロードして使用してCSSをコンパイルできる。）
JavaScriptコンポーネントを使用したい場合は、HTML内でjQueryライブラリとともに参照する必要がある。
以下に動作例を示す。以下のHTMLは、公式ドキュメントに従いHTML5とCSS情報で構成された単純な検索フォームと表形式の結果を表す。以下の図は、Mozilla FirefoxVer10の動作例である。
<!DOCTYPE html><html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>

      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>

      <h2>Results</h2>

      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  </body></html>

ネストしたフレキシブルレイアウトグリッドでの固定レイアウトグリッドの作成

<div class="row">
      <div class="span4">
        <div class="row-fluid">
          <div class="4">============================</div>
          <div class="4">...</div>
          <div class="4">...</div>
        </div>
      </div>
      <div class="span8">...</div>
    </div>