Bootstrap

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
Bootstrap
開発元 Mark Otto、Jacob Thornton
初版 2011年8月(3年前) (2011-08
最新版 3.0.2 / 2013年11月6日(12か月前) (2013-11-06 [1]
プログラミング言語 HTMLCSSLESSJavaScript
対応OS クロスプラットフォーム
サイズ 83.8 KB (archived)
サポート状況 Active
種別 HTML及びCSS用デザインテンプレート
ライセンス MIT License (Apache License 2.0〜3.0.1)
公式サイト getbootstrap.com
テンプレートを表示

BootstrapウェブサイトWebアプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

GitHubで最も人気があり[2]アメリカ航空宇宙局MSNBCなどに採用されている。[3][4]

特徴[編集]

HTML5やCSS3では比較的サポートが不完全だが、主要なウェブブラウザとの互換性がある。 ウェブサイトやアプリケーションの互換性の基本情報が、すべてのデバイスやブラウザで利用できるように部分的な互換性という概念を用いている。 例えば、角丸、階調、影などのCSS3で導入された機能は、古いWebブラウザでサポートされていないがBootstrapで使用される。

Ver2.0以降ではresponsive designに対応しており、閲覧機器(PC、タブレット、携帯電話)の仕様に対応しWebページの配置が動的に調整される。

最近では、コミュニティメンバーは中国語スペイン語ロシア語などマニュアル翻訳を進めている。[5]

構造と機能[編集]

モジュール化されており、LESSの様々な要素を実装している。 bootstrap.lessにはコンポーネントのスタイルシートが含まれており、 利用者は使用するコンポーネントを選択して、ファイル自体を修正できる。

基本設計の修正は限定範囲で可能であり、LESSでの宣言により大規模な修正が可能となる。

LESS使用の際は、変数、関数、演算子、ネストされたセレクタだけでなく、Mixinが使用可能となる。

Ver2.0以来、ドキュメント内に特別な「カスタマイズ」オプションが追加された。 また、利用者は必要に応じて様々なオプションの値、コンポーネント、修正をフォームで選択した。 その後生成されたパッケージには、構築済みのCSSが含まれる。

グリッド方式と応答性設計[編集]

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

CSSの理解[編集]

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

再利用[編集]

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

JavaScript[編集]

jQueryプラグイン形式で一部のJavaScriptが使用可能であり、ダイアログボックス、ツールヒント、カルーセルなどのユーザーインターフェイス機能のほか、入力欄のオートコンプリート機能を含む既存要素の拡張機能が利用できる。 Ver2.0では、モーダル、ドロップダウン、Scrollspy、タブ、ツールチップ、ポップオーバー、アラート、ボタン、崩壊、カルーセルと先行入力などのJavaScriptプラグインがサポートされている。

Dojo Bootstrapと呼ばれる、Dojo Toolkitを使用したTwitter用の実装[7][8]も利用可能である。 それは、Twitter Bootstrapプラグインのポートであり、Dojoのコードを基に作成され、AMD非同期モジュール定義[9]に対応している。

同様に、UI Bootstrapと呼ばれる、AngularJS制御用Bootstrap[10]も存在する。

利用例[編集]

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>
      <div class="span8">...</div>
    </div>
  • Twitter Bootstrap Ver3.0.0の場合
<div class="row">
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
</div>
<div class="row">
  <div class="col-md-8">8 Column </div>
  <div class="col-md-4">4 Column </div>
</div>
<div class="row">
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
</div>
<div class="row">
  <div class="col-md-6">6 Column</div>
  <div class="col-md-6">6 Column</div>
</div>

ネストした流体レイアウトグリッドでの固定レイアウトグリッドの作成[編集]

    <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>

脚注[編集]

外部リンク[編集]