Bootstrap
File:Bootstrap logo.svg
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。
GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。
HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器(PC、タブレット、携帯電話)の仕様に応じてWebページのレイアウトが動的に調整される。
最近では、コミュニティメンバーは中国語、ブラジルポルトガル語、日本語などマニュアル翻訳を進めている。
モジュール化されており、LESSの様々な要素を実装している。bootstrap.lessにはコンポーネントのスタイルシートが含まれており、利用者は使用するコンポーネントを選択して、ファイル自体を修正できる。
基本設計の修正は限定範囲で可能であり、LESSでの宣言により大規模な修正が可能となる。
LESS使用の際は、変数、関数、演算子、ネストされたセレクタだけでなく、Mixinが使用可能となる。
Ver2.0以来、ドキュメント内に特別な「カスタマイズ」オプションが追加された。また、利用者は必要に応じて様々なオプションの値、コンポーネント、修正をフォームで選択することができる。その後生成されたパッケージには、構築済みのCSSが含まれる。
940ピクセル幅のグリッドレイアウトが標準設計であり、利用者は代わりに可変幅レイアウトを使用できる。両者ともに、携帯電話、縦長と横長、タブレット、パソコンの4つの閲覧端末や解像度に合わせてカラム幅を調整する機能がある。
テキスト、テーブルやフォーム要素などを見栄え良くするなど、全ての主要なHTMLコンポーネントに基本的なCSSスタイル定義を適用する機能がある。
通常のHTML要素に加え、ボタンの拡張機能(ドロップダウン、グループ化、ナビゲーションリスト、水平・垂直タブ、ナビゲーション、階層リンクナビゲーション、改ページ位置の自動修正など)、ラベル、高度なタイポグラフィ、サムネイル、警告メッセージが含まれるプログレスバーなど、他の一般的な要素が含まれている。
jQueryプラグイン形式で一部のJavaScriptが使用可能であり、ダイアログボックス、ツールチップ、カルーセルなどのユーザーインターフェイス機能のほか、入力欄のオートコンプリート機能を含む既存要素の拡張機能が利用できる。Ver2.0では、モーダル、ドロップダウン、Scrollspy、タブ、ツールチップ、ポップオーバー、アラート、ボタン、折り畳み、カルーセルと先行入力などのJavaScriptプラグインがサポートされている。
Dojo Bootstrapと呼ばれる、Dojo Toolkitを使用したTwitter用の実装も利用可能である。それは、Twitter Bootstrapプラグインのポートであり、Dojoのコードを基に作成され、AMD非同期モジュール定義に対応している。
同様に、UI Bootstrapと呼ばれる、AngularJS制御用Bootstrapも存在する。
もともとTwitterブループリントと名付けられたBootstrapは、内部ツール間の一貫性を促進するためのフレームワークとして、TwitterのMarkOttoとJacobThorntonによって開発されました。 Bootstrapの前は、インターフェイス開発にさまざまなライブラリが使用されていたため、不整合が発生し、メンテナンスの負担が大きくなりました。 Twitter開発者のMarkOttoによると:
非常に小さな開発者グループと私は、新しい内部ツールを設計および構築するために集まり、さらに何かをする機会を見ました。そのプロセスを通じて、私たちは自分たちが他の内部ツールよりもはるかに実質的なものを構築するのを見ました。数か月後、社内で共通のデザインパターンとアセットを文書化して共有する方法として、Bootstrapの初期バージョンを使用することになりました。
少人数のグループによる数か月の開発の後、Twitterの多くの開発者は、Twitter開発チームのハッカソンスタイルの週であるHackWeekの一部としてプロジェクトに貢献し始めました。 Twitter BlueprintからBootstrapに名前が変更され、2011年8月19日にオープンソースプロジェクトとしてリリースされました。これは、Mark Otto、Jacob Thornton、コア開発者の小グループ、および貢献者の大規模なコミュニティによって引き続き維持されています。
2012年1月31日に、Bootstrap 2がリリースされました。これにより、Glyphiconsの組み込みサポート、いくつかの新しいコンポーネント、および既存のコンポーネントの多くへの変更が追加されました。このバージョンはレスポンシブウェブデザインをサポートしています。つまり、使用するデバイスの特性(デスクトップ、タブレット、携帯電話)を考慮して、ウェブページのレイアウトを動的に調整します。
2013年8月19日、Bootstrap3がリリースされました。フラットデザインとモバイルファーストアプローチを使用するようにコンポーネントを再設計しました。 Bootstrap 3は、名前空間付きイベントを備えた新しいプラグインシステムを備えています。 Bootstrap3はInternetExplorer7とFirefox3.6のサポートを終了しましたが、これらのブラウザーにはオプションのポリフィルがあります。
Mark Ottoは、2014年10月29日にBootstrap4を発表しました。Bootstrap4の最初のアルファ版は2015年8月19日にリリースされました。最初のベータ版は2017年8月10日にリリースされました。 2016年9月6日にBootstrap3での作業を一時停止し、Bootstrap4での作業に時間を割くようにマークを付けます。Bootstrap4は2018年1月18日に完成しました。
重要な変更は次のとおりです。
正規化に基づく、単一ファイル内の要素固有のCSS変更のコレクションである再起動の追加
IE8、IE9、およびiOS 6のサポートを終了します
読みやすさを向上させるために、グローバルフォントサイズを14pxから16pxに増やします
パネル、サムネイル、ポケットベル、およびウェルコンポーネントのドロップ
膨大な数のユーティリティクラス[定量化]
改善されたフォームスタイル、ボタン、ドロップダウンメニュー、メディアオブジェクト、および画像クラス
Bootstrap 4は、最新バージョンのGoogle Chrome、Firefox、Internet Explorer、Opera、およびSafari(Windowsを除く)をサポートしています。さらに、IE10および最新のFirefox拡張サポートリリース(ESR)へのサポートもサポートしています。
2020年6月16日、アルファ版がリリースされた。
2021年2月10日、ベータ版がリリースされた。
2022年5月5日、Bootstrap 5 が正式にリリースされた。
ベータ版時点での主な変更点は次のとおり。
間もなく登場する変更:
評価中の変更:
Bootstrap 5バージョンの最初の使用例は、公式プレミアの数日後に登場しました。最も有名なパッケージ-MDB 5-Bootstrap5のマテリアルデザインUIキット
HTMLページでの使用時に、Bootstrap用CSSをダウンロードし、HTMLファイルのリンクを用意する。(また、LESSの特別なコンパイラをダウンロードして使用してCSSをコンパイルできる。)
JavaScriptコンポーネントを使用したい場合は、HTML内でjQueryライブラリとともに参照する必要がある。
以下に動作例を示す。以下のHTMLは、公式ドキュメントに従いHTML5とCSS情報で構成された単純な検索フォームと表形式の結果を表す。以下の図は、Mozilla FirefoxVer10の動作例である。
Twitter Bootstrap Ver3.0.0の場合