Bootstrap

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索
Bootstrap
Boostrap logo.svg
作者 Mark Otto, Jacob Thornton
開発元 Bootstrap Core Team
初版 2011年8月19日(5年前) (2011-08-19
最新版 3.3.7 / 2016年7月25日(4か月前) (2016-07-25[1]
最新評価版 4.0.0-alpha.4 / 2016年9月6日(2か月前) (2016-09-06
プログラミング言語 HTML, CSS, SassLESSJavaScript
プラットフォーム HTMLレンダリングエンジン
種別 HTMLCSSデザインテンプレート
ライセンス MIT License (Apache License3.1.0前の2.0 )
公式サイト getbootstrap.com
テンプレートを表示

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

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

特徴[編集]

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

Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器(PC、タブレット、携帯電話)の仕様に応じてWebページのレイアウトが動的に調整される。

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

構造と機能[編集]

Example of a webpage using Bootstrap framework
Firefox表示例

モジュール化されており、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]も存在する。

Webフォント[編集]

Bootstrap の Glyphicons も Webフォント として利用してできるようになってい ます。カスタマイズする場合はこちらのサイトを参考して下さい。

便利なツール[編集]

bootstrap3のコンポーネントをドラッグドロップで配置し、そのコードを書き出してくれる LayoutIt日本語版

利用例[編集]

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>

脚注[編集]

  1. ^ Bootstrap 3.3.7 Released”. 2016年7月30日閲覧。
  2. ^ GitHub: Search Stars>1”. 2013年10月5日閲覧。
  3. ^ NASA - Spot The Station” (2012年11月6日). 2012年11月6日閲覧。
  4. ^ MSNBC - Breaking News” (2012年11月6日). 2012年11月6日閲覧。
  5. ^ http://getbootstrap.com/about/
  6. ^ http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
  7. ^ Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18
  8. ^ Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18
  9. ^ AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18
  10. ^ http://angular-ui.github.io/bootstrap/

外部リンク[編集]