免責事項:私は過去にブートストラップを使用したことがありますが、それが実際に何であるかを以前はあまり理解していませんでした。そして、私はブートストラップv4が出ていることを知っていますが、ブートストラップv3のドキュメントの方がはるかに明確であることがわかったので、それを使用しました。ライブラリは、提供するものを根本的に変えるつもりはありません。
簡単に
ブートストラップはCSSとJavaScriptファイルのコレクションであり、標準のHTML要素にいくつかの見栄えの良いデフォルトのスタイルを提供し、標準のHTML要素ではないいくつかの一般的なWebコンテンツオブジェクトを提供します。
たとえを言えば、それはpowerpointでテーマを適用するようなものですが、あなたのウェブサイトにとっては、初期の労力をかけずに、見栄えを良くすることができます。
それは何で構成されていますか?
公式のv3ドキュメントでは、3つのセクションに分かれています。
これらは、Bootstrapが提供する3つの主なものにほぼ対応しています。
- 標準のhtml要素をスタイルするプレーンCSSファイル。したがって、Bootstrapは、標準的な要素をきれいに見せます。例:html:
<input class="btn btn-default" type="button" value="Input">Click me</button>
- 標準のHTML要素にスタイリング使用するCSSファイルは標準的なHTML要素ではなく、何かにそれらを作るためにある標準のブートストラップ要素(例えばhttps://getbootstrap.com/docs/3.3/components/#progress)。このように、Bootstrapは「標準」のWeb要素のリストを視覚的に一貫した方法で拡張します。例:html:
<span class="glyphicon glyphicon-align-left"></span>
- CSSクラスはjQueryを考慮して設計されています。内部的に、BootstrapはjQueryセレクターを使用してスタイルをオンザフライで変更し、DOMと対話するため、ユーザーに同じ機能を提供します。これにはもっと説明が必要だと思うので...
JavaScript / jQueryの使用
Bootstrap はjQueryをかなり拡張します。ソースコードを見ると、jQueryを使用して次のようなことが行われていることがわかります。keydownイベントのリスナーを設定して、ドロップダウンと対話します。<script>
タグにインポートすると、このすべてのjQueryセットアップが実行されるため、Bootstrapをロードする前にjQueryがロードされていることを確認する必要があります。
さらに、JavaScriptをプレーンなjQueryよりもDOMに結び付け、JavaScriptクラスのインターフェースを提供します。たとえば、プログラムでボタンを切り替えます。CSSは外観を定義するだけなので、これらの操作の主な仕事は、その時点で要素に適用するCSSクラスを変更することです。ユーザーの入力に基づくこの種の変更は、プレーンなCSSでは実行できません。
CSSの対象外である、インターネットの居住者が慣れているユーザーとの他の標準のやり取りがあります。同様に、ページを変更するのではなく、ページを下にスクロールするリンクをクリックします。Bootstrapが提供する機能の1つは、この動作を独自のWebサイトに実装する簡単な方法です。
規格
「標準」という言葉をここで何度も述べてきましたが、それには正当な理由があります。Bootstrapが提供する最高のものは、見栄えの良い一連の標準です。デフォルトのテーマは自由に変更できますが、未加工のhtml、css、jsよりも優れたベースラインです。これが「フレームワーク」と呼ばれる理由です。
Webブラウザーが異なれば、デフォルトのスタイルも異なり、動作も異なる可能性があり、異なるCSSプレフィックスなどが必要になります。Bootstrapの主な利点は、クロスブラウザのものをすべて自分で書くよりもはるかに信頼性が高いことです(まだ問題があると思いますが、簡単です)。
gulpとbabelがそれほど人気がなかったときは、Bootstrapがより好まれたと思います。Bootstrapを見ると、誰もがJavaScriptをコンパイルする前の時期のようです。それでも関連性はありますが、今では他のソースからいくつかの利点を得ることができます。
CSSのより最近のバージョンでは、これらの静的リストの変化に応じて、それらの間の遷移を定義できます。Bootstrapの元のバージョンは、実際にはブラウザでのこの機能の広範囲にわたる採用よりも古いため、独自のアニメーションクラスがまだあります。Bootstrapには、次のようなビットがいくつかあります。その周りに他のものがあり、少し冗長に見えます。