Bootstrap
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/01/08 22:31 UTC 版)
特徴
HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器（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]も存在する。
歴史
開発の契機
Bootstrapは、もともとTwitterブループリント（英: Blueprint）という名前で、TwitterのMark OttoとJacob Thorntonによって、社内ツール間の一貫性を促すためのフレームワークとして開発された。Bootstrap以前は、インターフェイスの開発にさまざまなライブラリが使われていたため、一貫性がなく、メンテナンスの負担が大きかった。Twitter開発者のMarkOttoによると：
- 開発者のごく少人数グループと私は、新しい社内ツールを設計・構築するために集まり、もっと何かをする機会を得ました。そのプロセスを通じて、私たちは、別の社内ツールよりもはるかに実質的なものを構築することを確認しました。数カ月後、社内で共通のデザインパターンや資産を文書化して共有するための方法として、Bootstrapの初期バージョンに行き着きました[11]。
少人数のグループによる数ヶ月の開発の後、Twitterの開発チームのハッカソンスタイルの週であるHackWeekの一環として、Twitterの多くの開発者がこのプロジェクトに貢献するようになった。2011年8月19日にTwitter BlueprintからBootstrapに改名され、オープンソースプロジェクトとしてリリースされた[12]。その後もOtto、Thornton、コア開発者の小グループ、および貢献者の大規模なコミュニティによって引き続き維持されている[13]。
Bootstrap 2
2012年1月31日に、Bootstrap 2がリリースされた。これにより、Glyphiconsの組み込みサポート、いくつかの新しいコンポーネント、および既存の多くのコンポーネントへの変更が追加された。このバージョンはレスポンシブウェブデザインをサポートしている。つまり、使用するデバイスの特性（デスクトップ、タブレット、携帯電話）を考慮して、ウェブページのレイアウトを動的に調整するようになっている[14]。
Bootstrap 3
2013年8月19日、Bootstrap3がリリースされた。フラットデザインとモバイルファーストアプローチを使用するようにコンポーネントが再設計された。 Bootstrap 3は、名前空間付きイベントを備えた新しいプラグインシステムを備えている。 Bootstrap3はInternetExplorer7とFirefox3.6のサポートを終了したが、これらのブラウザーにはオプションのポリフィルがある[15]。
Bootstrap 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の変更がまとめられたFileであるReboot[20]の追加
- IE8、IE9、およびiOS 6のサポートの終了
- CSS Flexible Box Layoutのサポート
- ナビゲーションカスタマイズオプションの追加
- レスポンシブスペーシングおよびサイジングユーティリティの追加
- CSSのピクセル単位からem単位への切り替え
- 読みやすさを向上させるために、グローバルフォントサイズを14pxから16pxに増やす
- パネル[20]、サムネイル[21]、ページャー[22]、およびウェル[23]コンポーネントの採用
- グリフィコンアイコン[24]フォントの採用
- 膨大な数のユーティリティクラス[25]
- 改善されたフォームスタイル、ボタン、ドロップダウンメニュー、メディアオブジェクト、および画像クラス
Bootstrap 4は、最新バージョンのGoogle Chrome、Firefox、Internet Explorer、Opera、およびSafari（Windowsを除く）をサポート。さらに、IE10および最新のFirefox拡張サポートリリース（ESR）のサポート[26]。
Bootstrap 5
2020年6月16日、アルファ版がリリース[27]。
2021年2月10日、ベータ版がリリース[28]。
2021年5月5日、Bootstrap 5 が正式にリリース[29][30]。
ベータ版時点での主な変更点は次のとおり。
- バニラ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キットである[31]。
- ^ "Release 5.3.2"; 閲覧日: 2023年9月18日; 出版日: 2023年9月14日.
- ^ “GitHub: Search Stars>10000”. 2019年5月17日閲覧。
- ^ “NASA - Spot The Station” (2012年11月6日). 2012年11月6日閲覧。
- ^ “MSNBC - Breaking News” (2012年11月6日). 2012年11月6日閲覧。
- ^ About - Bootstrap v5.3
- ^ http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
- ^ Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18
- ^ Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18
- ^ AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18
- ^ http://angular-ui.github.io/bootstrap/
- ^ “Bootstrap in A List Apart No. 342” (英語). @mdo (2012年1月17日). 2021年3月16日閲覧。
- ^ “Bootstrap from Twitter” (英語). blog.twitter.com. 2021年3月16日閲覧。
- ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “概要”. getbootstrap.jp. 2021年3月16日閲覧。
- ^ “Say hello to Bootstrap 2.0” (英語). blog.twitter.com. 2021年3月16日閲覧。
- ^ Otto, Mark (2013年8月19日). “Bootstrap 3 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ Otto, Mark (2014年10月29日). “Bootstrap 3.3.0 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ Otto, Mark (2015年8月19日). “Bootstrap 4 alpha” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ Otto, Mark (2017年8月10日). “Bootstrap 4 Beta” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ Otto, Mark (2018年1月18日). “Bootstrap 4” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ a b “Bootstrapのパネルは、コンテンツの周りに少々のパディングがある境界の付いたボックス”. Bootstrap. 2023年5月19日閲覧。
- ^ “Images - Bootstrap 4.2 日本語リファレンスImage thumbnails”. Bootstrap. 2023年5月19日閲覧。
- ^ “Pagination(ページネーション)”. Bootstrap. 2023年5月19日閲覧。
- ^ “.well クラスは、灰色の背景色と少々のパディングを持ち、要素の周りに丸みのある境界線を追加”. Bootstrap. 2023年5月19日閲覧。
- ^ “GLYPHICONS - Visual language that everybody understands”. 2023年5月19日閲覧。
- ^ “Bootstrap 4 utility classes”. O’Reilly. 2023年5月19日閲覧。
- ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “Introduction” (英語). getbootstrap.com. 2021年3月16日閲覧。
- ^ Otto, Mark (2020年6月16日). “Bootstrap 5 alpha!” (英語). Bootstrap Blog. 2021年3月16日閲覧。
- ^ “Bootstrap 5 beta 2 - Summary, download, tutorial & next releases” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。
- ^ “Release Release v5.0.0 (#33647) · twbs/bootstrap” (英語). GitHub. 2021年5月5日閲覧。
- ^ “Bootstrap 5”. blog.getbootstrap.com (2021年5月5日). 2022年10月1日閲覧。
- ^ “Bootstrap 5 & Material Design 2.0” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。
- Bootstrapのページへのリンク
