ブートストラップとは
ここではBootstrapに関する質問がたくさんあります。私はそれを使っている人がたくさんいるのを見ます。それで私はそれを調査しようと試みました、そして私は 公式のBootstrapサイト を見つけました、しかしダウンロードセクションとその後の数語だけがありました。それが何のためにあるのかを説明するものは何もありません...フロントエンドヘルパーであることを私はちょうど理解しました。私はグーグルで何かを見つけようとしましたが、特に何も見つけませんでした。私が見つけたものはすべてコンピュータサイエンスの定義に関連しています。
だから、私の質問は：
- ブートストラップとは何ですか？
- それは何のために使われていますか、そしてそれはフロントエンド開発にどのように役立ちますか？
- 私はまたそれを説明するいくつかの詳細がほしいと思います。
これはHTML、CSS、およびJavaScriptのオープンソースフレームワーク（最初はTwitterによって作成されたもの）で、WebサイトまたはWebアプリケーションを作成するための基礎として使用できます。
更新
公式の ブートストラップWebサイトが更新され、明確な定義が含まれています。
「ブートストラップは、レスポンシブなモバイル初のWeb上でのプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSフレームワークです。」
Bootstrapは、Twitterのチームによって開発されたオープンソースのJavascriptフレームワークです。これは、HTML、CSS、およびJavascriptコードを組み合わせたもので、ユーザーインターフェイスコンポーネントの構築に役立ちます。ブートストラップもHTML 5とCSS 3の両方をサポートするようにプログラムされました。
フロントエンドフレームワークとも呼ばれます。
ブートストラップは、WebサイトやWebアプリケーションを作成するための無料のツール集です。
これには、タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェースコンポーネント、およびオプションのJavaScript拡張機能用のHTMLおよびCSSベースのデザインテンプレートが含まれています。
プログラマがブートストラップフレームワークを好む理由
始めるのが簡単
グレートグリッドシステム
ほとんどのHTML要素（タイポグラフィ、コード、テーブル、フォーム、ボタン、画像、アイコン）の基本スタイル
豊富なコンポーネント一覧
バンドルされたJavascriptプラグイン
から抜粋 ブートストラップフレームワークについて
私が知っているように、ブートストラップは明確に定義されたCSSです。 Bootstrapを使ってもJavaScriptやjQueryなどを使うことができます。しかし、主な違いはBootstrapを使ってクラス名を呼び出すだけでHTMLフォームに出力できることです。例えば。レイアウトを使用して、テキストのボタンを形づくることの着色。これらすべてのためにあなたはCSSファイルを書く必要はなく、むしろあなたのHTMLフォームを形作るために正しいクラス名を使う必要があります。
簡単に言うと、Bootstrapは、デバイスに応答するWebアプリケーションを迅速に作成するためにTwitterによって作成されたフロントエンドWebフレームワークとして理解できます。ブートストラップは、その中で定義されているCSSクラスの集まりとして理解することもできます。これは単純に直接使用できます。バックグラウンドでCSS、javascript、jQueryなどを利用して、Bootstrap要素のスタイル、効果、およびアクションを作成します。
Webページ要素のスタイル設定にCSSを使用し、クラスを作成し、Webページ要素にクラスを割り当ててスタイルを適用することをご存知かもしれません。ここでのBootstrapは、Bootstrapファイルを含めるだけでよく、Webページ要素にはBootstrapの事前定義クラス名を指定するだけでよく、Bootstrapによって自動的にスタイル設定されます。これにより、Webページ要素をスタイルするための独自のCSSクラスを作成する必要がなくなります。最も重要なのは、Bootstrapはあなたのウェブサイトのデバイスを反応させるように設計されており、それがそれの主な目的です。 Bootstrapの他の選択肢は - Foundation 、 Materialise などのフレームワークです。
ブートストラップを使用すると、たくさんのCSSコードを書く必要がなくなり、Webページの設計に費やす時間も節約できます。
Bootstrapは、もともとTwitterの設計者や開発者のチームによってTwitterアプリケーション用に開発された、オープンソースのCSS、JavaScriptフレームワークです。それから彼らはオープンソースのためにそれをリリースしました。 Twitterのブートストラップを長年使用してきた私は、モバイル対応Webサイトを設計するのに最も適していることがわかりました。すぐにあなたのウェブサイトをデザインするために多くのCSSとJavascriptプラグインが利用可能です。それは一種の迅速なテンプレートデザインフレームワークです。一部の人々は、ブートストラップCSSファイルが重くてロードに時間がかかると不満を言いますが、これらの主張は怠惰な人々によってなされています。あなたはあなたのウェブサイトに完全なbootstrap.cssを保存する必要はありません。 Webサイトには不要なコンポーネントのスタイルを削除することもできます。たとえば、フォームやボタンなどの基本コンポーネントだけを使用している場合は、メインCSSファイルからアコーディオンなどの他のコンポーネントを削除できます。ブートストラップで手を出し始めるには、 getbootstrap siteから基本的なテンプレートとコンポーネントをダウンロードして、魔法を起こしてください。
BootstrapはHTML、CSS、JSのフレームワークで、多くのコンポーネントを使って美しくモダンなWebサイトやWebアプリケーションを非常に高速に作成できます。
免責事項：私は過去にbootstrapを使用しましたが、実際にそれが以前のものであることに本当に感謝していません。今日は私の定義に来ます。そして、bootstrap v4が公開されていることは知っていますが、bootstrap v3のドキュメントの方がはるかにわかりやすいので、それを使用しました。ライブラリは、提供するものを根本的に変えることはありません。
簡単に
BootstrapはCSSおよびjavascriptファイルのコレクションであり、標準のhtml要素に見栄えの良いデフォルトのスタイルを提供し、標準のhtml要素ではないいくつかの一般的なWebコンテンツオブジェクトを提供します。
類推すると、PowerPointでテーマを適用するようなものですが、あなたのWebサイトにとっては、あまり労力をかけなくても見栄えが良くなります。
何で構成されていますか？
V3の公式ドキュメントでは、次の3つのセクションに分かれています。
これらは、Bootstrapが提供する3つの主なものにほぼ対応しています。
- 標準のhtml要素をスタイルするプレーンなCSSファイル。したがって、Bootstrapは、標準の要素をきれいに見せます。例えばhtml：
<input class="btn btn-default" type="button" value="Input">Click me</button> - 標準のhtml要素にスタイルを使用して、標準のhtml要素ではなく、is標準のBootstrap要素（例 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を使用する
ブートストラップ 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の主な利点は、クロスブラウザのものをすべて自分で書くよりもはるかに信頼性が高いことです（まだ問題はありますが、確かに簡単です）。
Bootstrapは、gulpとbabelがあまり人気がなかったときに、より好まれたと思います。 Bootstrapを見ると、誰もがjavascriptをコンパイルする前から来ているようです。まだ関連がありますが、他のソースからいくつかの利点を得ることができます。
CSSの最近のバージョンでは、これらの静的リストが変化するときに、それらの遷移を定義できます。 Bootstrapの元のバージョンは、実際にブラウザでこの機能が広く採用される前のことなので、独自のアニメーションクラスがまだあります。このようなBootstrapのいくつかのビットがあります：他のものがその周りに出てきて、少し冗長に見えるようにします。