Bootstrap

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ナビゲーションに移動 検索に移動
Bootstrap
Bootstrap logo.svg
作者
  • Mark Otto
  • Jacob Thornton
開発元 Bootstrap Core Team
初版 2011年8月19日 (9年前) (2011-08-19)
最新版
5.0.2[1] ウィキデータを編集 / 2021年6月22日 (36日前) (2021-06-22)
リポジトリ ウィキデータを編集
プログラミング
言語
プラットフォーム HTMLレンダリングエンジン
種別
  • HTML
  • CSSデザインテンプレート
ライセンス MIT License (3.1.0より前はApache License 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]も存在する。

歴史[編集]

初期の始まり

もともとTwitterブループリントと名付けられたBootstrapは、内部ツール間の一貫性を促進するためのフレームワークとして、TwitterのMarkOttoとJacobThorntonによって開発されました。 Bootstrapの前は、インターフェイス開発にさまざまなライブラリが使用されていたため、不整合が発生し、メンテナンスの負担が大きくなりました。 Twitter開発者のMarkOttoによると:

非常に小さな開発者グループと私は、新しい内部ツールを設計および構築するために集まり、さらに何かをする機会を見ました。そのプロセスを通じて、私たちは自分たちが他の内部ツールよりもはるかに実質的なものを構築するのを見ました。数か月後、社内で共通のデザインパターンとアセットを文書化して共有する方法として、Bootstrapの初期バージョンを使用することになりました[11]

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

ブートストラップ2

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

ブートストラップ3

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

ブートストラップ4

Mark Ottoは、2014年10月29日にBootstrap4を発表しました[16]。Bootstrap4の最初のアルファ版は2015年8月19日にリリースされました[17]。最初のベータ版は2017年8月10日にリリースされました[18]。 2016年9月6日にBootstrap3での作業を一時停止し、Bootstrap4での作業に時間を割くようにマークを付けます。Bootstrap4は2018年1月18日に完成しました[19]

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

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

Bootstrap 4は、最新バージョンのGoogle ChromeFirefoxInternet ExplorerOpera、およびSafariWindowsを除く)をサポートしています。さらに、IE10および最新のFirefox拡張サポートリリース(ESR)へのサポートもサポートしています[20]

ブートストラップ5ベータ

Bootstrap 5 Alphaは2020年6月16日に正式にリリースされました[21]

バージョン5ベータ版は現在、2021年02月10日にリリースされたパッケージの最新バージョンです[22]

主な変更点は次のとおりです

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

間もなく登場する変更:

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

評価中の変更:

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

Bootstrap 5バージョンの最初の使用例は、公式プレミアの数日後に登場しました。最も有名なパッケージ-MDB 5-Bootstrap5のマテリアルデザインUIキット[23]

利用例[編集]

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. ^ "Release v5.0.2"; 出版日: 2021年6月22日.
  2. ^ GitHub: Search Stars>10000”. 2019年5月17日閲覧。
  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/
  11. ^ Bootstrap in A List Apart No. 342” (英語). @mdo (2012年1月17日). 2021年3月16日閲覧。
  12. ^ Bootstrap from Twitter” (英語). blog.twitter.com. 2021年3月16日閲覧。
  13. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “概要” (日本語). getbootstrap.jp. 2021年3月16日閲覧。
  14. ^ Say hello to Bootstrap 2.0” (英語). blog.twitter.com. 2021年3月16日閲覧。
  15. ^ Otto, Mark (2013年8月19日). “Bootstrap 3 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  16. ^ Otto, Mark (2014年10月29日). “Bootstrap 3.3.0 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  17. ^ Otto, Mark (2015年8月19日). “Bootstrap 4 alpha” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  18. ^ Otto, Mark (2017年8月10日). “Bootstrap 4 Beta” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  19. ^ Otto, Mark (2018年1月18日). “Bootstrap 4” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  20. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “Introduction” (英語). getbootstrap.com. 2021年3月16日閲覧。
  21. ^ Otto, Mark (2020年6月16日). “Bootstrap 5 alpha!” (英語). Bootstrap Blog. 2021年3月16日閲覧。
  22. ^ Bootstrap 5 beta 2 - Summary, download, tutorial & next releases” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。
  23. ^ Bootstrap 5 & Material Design 2.0” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。

外部リンク[編集]