Bootstrap

Bootstrap

作者	Mark Otto Jacob Thornton
開発元	Bootstrap Core Team
初版	2011年8月19日 (2011-08-19)
最新版	5.3.3  / 2024年2月20日
リポジトリ	github.com/twbs/bootstrap
プログラミング 言語	HTML CSS Sass LESS JavaScript
プラットフォーム	HTMLレンダリングエンジン
種別	HTML CSSデザインテンプレート
ライセンス	MIT License (3.1.0より前はApache License 2.0)
公式サイト	getbootstrap.com

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

GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。

特徴

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

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

最近では、コミュニティメンバーは中国語、ブラジルポルトガル語、日本語などマニュアル翻訳を進めている。

構造と機能

Firefox表示例

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

歴史

開発の契機

Bootstrapは、もともとTwitterブループリント（英: Blueprint）という名前で、TwitterのMark OttoとJacob Thorntonによって、社内ツール間の一貫性を促すためのフレームワークとして開発された。Bootstrap以前は、インターフェイスの開発にさまざまなライブラリが使われていたため、一貫性がなく、メンテナンスの負担が大きかった。Twitter開発者のMarkOttoによると：

開発者のごく少人数グループと私は、新しい社内ツールを設計・構築するために集まり、もっと何かをする機会を得ました。そのプロセスを通じて、私たちは、別の社内ツールよりもはるかに実質的なものを構築することを確認しました。数カ月後、社内で共通のデザインパターンや資産を文書化して共有するための方法として、Bootstrapの初期バージョンに行き着きました。

少人数のグループによる数ヶ月の開発の後、Twitterの開発チームのハッカソンスタイルの週であるHackWeekの一環として、Twitterの多くの開発者がこのプロジェクトに貢献するようになった。2011年8月19日にTwitter BlueprintからBootstrapに改名され、オープンソースプロジェクトとしてリリースされた。その後もOtto、Thornton、コア開発者の小グループ、および貢献者の大規模なコミュニティによって引き続き維持されている。

Bootstrap 2

2012年1月31日に、Bootstrap 2がリリースされた。これにより、Glyphiconsの組み込みサポート、いくつかの新しいコンポーネント、および既存の多くのコンポーネントへの変更が追加された。このバージョンはレスポンシブウェブデザインをサポートしている。つまり、使用するデバイスの特性（デスクトップ、タブレット、携帯電話）を考慮して、ウェブページのレイアウトを動的に調整するようになっている。

Bootstrap 3

2013年8月19日、Bootstrap3がリリースされた。フラットデザインとモバイルファーストアプローチを使用するようにコンポーネントが再設計された。 Bootstrap 3は、名前空間付きイベントを備えた新しいプラグインシステムを備えている。 Bootstrap3はInternetExplorer7とFirefox3.6のサポートを終了したが、これらのブラウザーにはオプションのポリフィルがある。

Bootstrap 4

Mark Ottoは、2014年10月29日にBootstrap4を発表した。Bootstrap4の最初のアルファ版は2015年8月19日にリリースされ、最初のベータ版は2017年8月10日にリリースされた。 2016年9月6日にBootstrap3での作業を中断し、Bootstrap4での作業に時間を割くようにした。Bootstrap4は2018年1月18日に完成した。

重要な変更は次のとおり。

• コードの大幅な書き直し
• LessをSassに置き換える
• 正規化に基づく、要素固有のCSSの変更がまとめられたFileであるRebootの追加
• IE8、IE9、およびiOS 6のサポートの終了
• CSS Flexible Box Layoutのサポート
• ナビゲーションカスタマイズオプションの追加
• レスポンシブスペーシングおよびサイジングユーティリティの追加
• CSSのピクセル単位からem単位への切り替え
• 読みやすさを向上させるために、グローバルフォントサイズを14pxから16pxに増やす
• パネル、サムネイル、ページャー、およびウェルコンポーネントの採用
• グリフィコンアイコンフォントの採用
• 膨大な数のユーティリティクラス
• 改善されたフォームスタイル、ボタン、ドロップダウンメニュー、メディアオブジェクト、および画像クラス

Bootstrap 4は、最新バージョンのGoogle Chrome、Firefox、Internet Explorer、Opera、およびSafari（Windowsを除く）をサポート。さらに、IE10および最新のFirefox拡張サポートリリース（ESR）のサポート。

Bootstrap 5

2020年6月16日、アルファ版がリリース。

2021年2月10日、ベータ版がリリース。

2021年5月5日、Bootstrap 5 が正式にリリース。

ベータ版時点での主な変更点は次のとおり。

• バニラJavaScriptをサポートしてjQueryは削除
• 行の外側に配置された列と応答性のあるガターをサポートするようにグリッドを書き直し
• ドキュメントをJekyllからHugoに移行
• IE10およびIE11のサポート終了
• テスト基盤をQUnitからJasmineに移行
• SVGアイコンのカスタムセットを追加
• CSSカスタムプロパティの追加
• APIの改善
• グリッドシステム強化
• カスタマイズドキュメントの改善
• フォームの更新
• RTLサポート

間もなく登場する変更：

• オフキャンバスメニューの実装

評価中の変更：

• Sassモジュールシステム
• CSSカスタムプロパティの使用の増加
• CSSではなくHTMLにSVGを埋め込む

Bootstrap 5バージョンの最初の使用例は、公式プレミアの数日後に登場した。最も有名なパッケージはMaterial Design for Bootstrap 5 & Vanilla JavaScript マテリアルデザインUIキットである。

利用例

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>

外部リンク

• 公式ウェブサイト
• 公式ブログ
• Bootstrap 5 日本語リファレンス
• Bootstrap (@getbootstrap) - X（旧Twitter）
• Material Design for Bootstrap v5 & v4
• Material Design for Bootstrap (mdbootstrap) - Facebook
• MD Bootstrap (@MDBootstrap) - X（旧Twitter）