Loading article…
 | |
| 原作者 | マーク・オットー、ジェイコブ・ソーントン |
|---|---|
| 開発者 | Bootstrap コアチーム |
| 初回リリース | 2011年8月19日 |
| 安定リリース | 5.3.3 [1]
/ 2024年2月20日 |
| リポジトリ | ブートストラップリポジトリ |
| 書かれた | HTML、CSS、Less（v3）、Sass（v4）、JavaScript |
| プラットフォーム | ウェブプラットフォーム |
| ライセンス | MITライセンス[2]（Apacheライセンス2.0 3.1.0以前）[3] |
| Webサイト | 取得ブートストラップ |
Bootstrap（旧称Twitter Bootstrap）は、レスポンシブでモバイルファーストのフロントエンド Web 開発を目的とした、無料のオープンソース CSS フレームワークです。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェース コンポーネント 用のHTML、CSS、および（オプションで）JavaScriptベースのデザイン テンプレートが含まれています。
2023年5月現在、BootstrapはGitHubで164,000以上のスターを獲得し、[アップデート]17番目にスターを獲得したプロジェクト（4番目にスターを獲得したライブラリ）となっている。 [4] W3Techsによると、Bootstrapは全ウェブサイトの19.2%で使用されている。[5]
特徴
Bootstrap は、情報提供を目的とする Web ページ ( Web アプリケーションではなく) の開発を簡素化することに重点を置いた HTML、CSS、および JS ライブラリです。これを Web プロジェクトに追加する主な目的は、Bootstrap の色、サイズ、フォント、レイアウトの選択をそのプロジェクトに適用することです。したがって、担当する開発者がそれらの選択を気に入るかどうかが主な要因となります。プロジェクトに追加すると、Bootstrap はすべてのHTML 要素の基本的なスタイル定義を提供します。その結果、Web ブラウザー間で散文、表、フォーム要素の外観が統一されます。さらに、開発者は Bootstrap で定義された CSS クラスを利用して、コンテンツの外観をさらにカスタマイズできます。たとえば、Bootstrap では、明るい色と暗い色の表、ページ見出し、より目立つ引用文、強調表示されたテキスト が準備されています。
Bootstrap には、 jQueryなどの他のライブラリを必要としない JavaScript コンポーネントもいくつか付属しています。これらは、ダイアログ ボックス、ツールチップ、進行状況バー、ナビゲーション ドロップダウン、カルーセルなどの追加のユーザー インターフェイス要素を提供します。各 Bootstrap コンポーネントは、HTML 構造、CSS 宣言、および場合によっては付随する JavaScript コードで構成されます。また、入力フィールドのオートコンプリート機能など、既存のインターフェイス要素の機能を拡張します。
Bootstrap の最も顕著なコンポーネントはレイアウト コンポーネントです。これは Web ページ全体に影響します。基本的なレイアウト コンポーネントは「コンテナー」と呼ばれ、ページ内の他のすべての要素がそこに配置されます。開発者は固定幅コンテナーと可変幅コンテナーのどちらかを選択できます。後者は常に Web ページの幅で埋められますが、前者はページを表示する画面のサイズに応じて、5 つの定義済み固定幅のいずれかを使用します。[6]
- 576ピクセル未満
- 576～768ピクセル
- 768～992ピクセル
- 992～1200ピクセル
- 1200～1400ピクセル
- 1400ピクセル以上
コンテナが配置されると、他の Bootstrap レイアウト コンポーネントは行と列を定義して CSS Flexbox レイアウトを実装します。
Bootstrap のプリコンパイル バージョンは、1 つの CSS ファイルと 3 つの JavaScript ファイルの形式で提供されており、どのプロジェクトにも簡単に追加できます。ただし、Bootstrap の未加工の形式を使用すると、開発者はさらなるカスタマイズとサイズの最適化を実装できます。この未加工の形式はモジュール式であるため、開発者は不要なコンポーネントを削除し、テーマを適用し、コンパイルされていないSassファイルを変更することができます。
歴史
初期の始まり
Bootstrap は元々 Twitter Blueprint と呼ばれていましたが、Twitterの Mark Otto 氏と Jacob Thornton 氏によって、社内ツール間の一貫性を促進するフレームワークとして開発されました。Bootstrap 以前は、インターフェイス開発にさまざまなライブラリが使用されていたため、一貫性が失われ、メンテナンスの負担が大きくなっていました。Otto 氏によると、
私とごく少数の開発者グループが集まり、新しい社内ツールを設計・構築し、もっと何かできる機会を見つけました。そのプロセスを通じて、私たちは他の社内ツールよりもはるかに充実したものを構築していることに気づきました。数か月後、社内で共通のデザインパターンと資産を文書化して共有する方法として、Bootstrapの初期バージョンが完成しました。[7]
数ヶ月に渡る少人数のグループによる開発の後、Twitterの多くの開発者が、Twitter開発チームのためのハッカソン形式の週であるHack Weekの一環としてプロジェクトに貢献し始めました。Twitter BlueprintからTwitter Bootstrapに名前が変更され、2011年8月19日にオープンソースプロジェクトとしてリリースされました。 [8] Otto、Thornton、少数のコア開発者グループ、そして大規模な貢献者コミュニティによってメンテナンスが続けられています。[9]
ブートストラップ 2
2012年1月31日、Bootstrap 2がリリースされ、Glyphiconsの組み込みサポート、いくつかの新しいコンポーネント、および多くの既存コンポーネントの変更が追加されました。このバージョンはレスポンシブWebデザインをサポートしており、Webページのレイアウトは、使用されるデバイス（デスクトップ、タブレット、携帯電話）の特性を考慮して動的に調整されます。[10] Bootstrap 2.1.2のリリースの直前に、OttoとThorntonはTwitterを離れましたが、独立したプロジェクトとしてBootstrapの開発を続けることを約束しました。[11]
ブートストラップ3
2013年8月19日、Bootstrap 3がリリースされました。フラットデザインとモバイルファーストのアプローチを使用するためにコンポーネントを再設計しました。[12] Bootstrap 3には、名前空間イベントを備えた新しいプラグインシステムがあります。Bootstrap 3ではInternet Explorer 7とFirefox 3.6のサポートが廃止されましたが、これらのブラウザ用のオプションのポリフィルがあります。 [13] Bootstrap 3は、TwitterではなくGitHubのtwbs組織でリリースされた最初のバージョンでもありました。[14]
ブートストラップ4
オットーは2014年10月29日にBootstrap 4を発表しました。[15] Bootstrap 4の最初のアルファ版は2015年8月19日にリリースされました。[16]最初のベータ版は2017年8月10日にリリースされました。[17]オットーは2016年9月6日にBootstrap 3の作業を中断し、Bootstrap 4の作業に時間を割きました。Bootstrap 4は2018年1月18日に完成しました。[18]
重要な変更点は次のとおりです。
- コードの大幅な書き換え
- Less をSassに置き換える
Reboot要素固有のCSS変更を1つのファイルにまとめたの追加。Normalize- IE8、IE9、iOS 6のサポートを終了
- CSS フレキシブルボックスのサポート
- ナビゲーションカスタマイズオプションの追加
- レスポンシブな間隔とサイズ調整ユーティリティの追加
- CSSのピクセル単位からルートemsへの切り替え
- 読みやすさを向上させるために、グローバルフォントサイズを 14 ピクセルから 16 ピクセルに増やしました。
panel、、、およびコンポーネントをthumbnail削除するpagerwellGlyphiconsアイコンフォントの削除- 膨大な数のユーティリティクラス
- フォームのスタイル、ボタン、ドロップダウンメニュー、メディアオブジェクト、画像クラスの改善
Bootstrap 4は、 Google Chrome、Firefox、Internet Explorer、Opera、Safari（Windowsを除く）の最新バージョンをサポートしています。さらに、 IE10と最新のFirefox延長サポートリリース（ESR）もサポートしています。[19]
ブートストラップ5
Bootstrap 5は2021年5月5日に正式にリリースされました。[20] [21]
主な変更点は以下の通りである: [22]
- 新しいオフキャンバス メニュー コンポーネント
- jQueryへの依存をなくし、Vanilla JavaScript を採用する
- レスポンシブなガターと行の外側に配置された列をサポートするためにグリッドを書き直す
- JekyllからHugoへのドキュメントの移行
- Internet Explorerのサポート終了[23]
- テストインフラストラクチャをQUnitからJasmineに移行する
- SVGアイコンのカスタムセットの追加[24]
- CSSカスタムプロパティの追加
- 改善されたAPI
- 強化されたグリッドシステム
- カスタマイズドキュメントの改善
- 更新されたフォーム
- RTLサポート
- ダークモードサポートを内蔵
参照
.svg/500px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
また、いくつかのウェブフレームワークはBootstrapでのレンダリングをサポートしています。[25] [26]
参考文献
- ^ 「リリース 5.3.3」。2024年2月20日。 2024年2月20日閲覧。
- ^ "bootstrap/LICENSE". Github .
- ^ "bootstrap/LICENSE (v3.0.3)". Github .
- ^ “Search · stars:>100000”. GitHub . 2022年12月4日閲覧。
- ^ 「ウェブサイトにおけるBootstrapの使用統計と市場シェア」w3techs.com 。 2023年1月24日閲覧。
- ^ 「Bootstrap コンテナー · Bootstrap v5.0」。
- ^ Otto, Mark (2012年1月17日). 「Bootstrap in A List Apart No. 342」. Mark Ottoのブログ. 2016年10月28日時点のオリジナルよりアーカイブ。 2017年2月23日閲覧。
- ^ Otto, Mark (2011 年 8 月 19 日)。「Bootstrap from Twitter」。開発者ブログ。Twitter。2017 年 2 月 23 日時点のオリジナルよりアーカイブ。2017 年2 月 23 日閲覧。
- ^ 「About」。Bootstrap。2011年8月19日。 2017年2月23日閲覧。
- ^ Otto, Mark (2012 年 1 月 31 日)。「Say hello to Bootstrap 2.0」。開発者ブログ。Twitter。2017 年 2 月 23 日時点のオリジナルよりアーカイブ。2017年2 月 23 日閲覧。
- ^ Otto, Mark (2012 年 9 月 29 日). 「Onward」. blog.getbootstrap.com .
- ^ 「Bootstrap ブログ - Bootstrap 3 がリリースされました」。
- ^ Otto, Mark (2013年8月19日). “Bootstrap 3 リリース”. 2016年10月21日時点のオリジナルよりアーカイブ。 2017年2月23日閲覧。
- ^ 「Bootstrap 3 プラン」。2012 年 12 月 10 日。
- ^ Otto, Mark (2014年10月29日). “Bootstrap 3.3.0 リリース”. 2016年7月24日時点のオリジナルよりアーカイブ。 2017年2月23日閲覧。
- ^ Otto, Mark (2015年8月19日). “Bootstrap 4 alpha”。2017年1月23日時点のオリジナルよりアーカイブ。 2017年2月23日閲覧。
- ^ Otto, Mark; Thornton, Jacob (2017 年 8 月 10 日). 「Bootstrap 4 Beta」 . 2017 年8 月 16 日閲覧。
- ^ “Bootstrap 4”. blog.getbootstrap.com . 2018年1月18日. 2021年2月5日閲覧。
- ^ 「サポートされているブラウザ」。Bootstrap 。 2017年2月23日閲覧。
- ^ 「リリース Release v5.0.0 (#33647) · twbs/bootstrap」。GitHub 。 2021年5月5日閲覧。
- ^ “Bootstrap 5”. blog.getbootstrap.com . 2021年5月5日.
- ^ 「Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap」。GitHub 。 2019年9月29日閲覧。
- ^ 「v5: Internet Explorer のサポートを廃止 by XhmikosR · Pull Request #30377 · twbs/bootstrap」。GitHub。2020年4月 7 日閲覧。
- ^ 「Bootstrap Icons」 . 2022年11月7日閲覧。
- ^ 「ブートストラップ フラスコ」。こんにちはFlask 。2022 年11 月 7 日に取得。
- ^ “Bootstrap-Django”. zelenij . 2022年11月7日閲覧。
外部リンク
ウィキメディア・コモンズには、 Bootstrap (フレームワーク)に関連するメディアがあります。
- 公式サイト
- GitHubの Bootstrap