Bootstrap

Bootstrapとは

Bootstrapは、WebサイトやWebアプリケーションを構築するための、広く利用されているオープンソースのフロントエンドフレームワークです。HTML、CSS、JavaScriptをベースとしたデザインテンプレートを提供し、タイポグラフィ、フォーム、ボタン、ナビゲーションなどのUIコンポーネントや、JavaScriptによる拡張機能を備えています。

特徴

Bootstrapは、以下の点で優れています。

ブラウザ互換性: HTML5やCSS3の機能を活用しつつ、主要なWebブラウザとの高い互換性を維持しています。
レスポンシブデザイン: PC、タブレット、スマートフォンなど、異なるデバイスの画面サイズに合わせてレイアウトを調整するレスポンシブデザインに対応しています。
モジュール性: コンポーネントがモジュール化されており、必要な部分だけを選択して利用できます。LESSやSassを利用したカスタマイズも容易です。
国際化対応: コミュニティによって、中国語、ブラジルポルトガル語、日本語など、多言語への翻訳が進められています。

構造と機能

Bootstrapは、モジュール化されたCSSとJavaScriptで構成されており、以下のような機能を提供します。

CSS

基本スタイル: テキスト、テーブル、フォーム要素など、主要なHTMLコンポーネントに対して、基本的なCSSスタイルが適用されます。
再利用可能なコンポーネント: ボタン、ドロップダウン、ナビゲーション、タブ、アラート、プログレスバーなど、再利用可能なコンポーネントが多数用意されています。
グリッドレイアウト: 940ピクセルの固定幅グリッドレイアウトを基本としつつ、可変幅レイアウトにも対応。レスポンシブデザインで、各デバイスに最適化されたカラム幅を実現します。
カスタマイズ: LESSやSassを使用して、変数、関数、演算子、ネストされたセレクタ、Mixinなどを活用し、詳細なスタイル変更が可能です。カスタマイズオプションでは、フォームを通じてコンポーネントの選択や修正ができます。

JavaScript

jQueryプラグイン: ダイアログ、ツールチップ、カルーセルなどのユーザーインターフェイス機能や、オートコンプリートなどの拡張機能が利用できます。
豊富なプラグイン: モーダル、ドロップダウン、Scrollspy、タブ、ツールチップ、ポップオーバー、アラート、ボタン、折り畳み、カルーセル、先行入力などのプラグインがサポートされています。
Dojo Bootstrap: Dojo Toolkitを使用したBootstrapの実装も存在し、AMD非同期モジュール定義に対応しています。
UI Bootstrap: AngularJS制御用のBootstrapも利用可能です。

歴史

Bootstrapは、もともとTwitterの社内ツール開発のために、Mark Otto氏とJacob Thornton氏によって開発されました。当初は「Twitter Blueprint」という名前でしたが、2011年8月19日に「Bootstrap」としてオープンソースプロジェクトになりました。その後のバージョンアップにより、数多くの機能追加や改善が行われています。

Bootstrap 2

2012年1月31日にリリース。Glyphiconsのサポート、レスポンシブウェブデザインの導入、多くのコンポーネントの追加と変更が行われました。

Bootstrap 3

2013年8月19日にリリース。フラットデザインとモバイルファーストアプローチを採用し、コンポーネントが再設計されました。プラグインシステムも刷新されました。

Bootstrap 4

2018年1月18日に完成。Sassへの移行、Rebootの追加、IE8/9およびiOS6のサポート終了、CSS Flexible Box Layoutのサポート、グローバルフォントサイズの変更、パネルなどのコンポーネントの廃止、グリフィコンの廃止など、大幅な変更が行われました。

Bootstrap 5

2021年5月5日に正式リリース。jQueryの削除、バニラJavaScriptのサポート、グリッドシステムの書き直し、ドキュメントのHugoへの移行、IE10/11のサポート終了、SVGアイコンの追加、CSSカスタムプロパティの追加などが行われました。オフキャンバスメニューの実装やSassモジュールシステムの導入などが予定されています。

利用例

Bootstrapは、HTMLファイルにCSSとJavaScriptをリンクするだけで利用できます。LESSやSassを使用する場合は、コンパイラが必要です。例えば、検索フォームや表形式の結果を、簡単なHTMLとCSSで表現できます。

以下にHTMLのサンプルコードを示します。

html

まとめ

Bootstrapは、Web開発を効率化するための強力なフレームワークです。レスポンシブデザイン、豊富なコンポーネント、カスタマイズ性など、多くの利点を備えており、開発者の生産性向上に貢献します。常に進化を続けており、今後の動向にも注目が必要です。

外部リンク

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

もう一度検索