ブートストラップとは何ですか?


512

Bootstrapに関連する質問はたくさんあります。たくさんの人が利用しています。そこで調べてみたところ、Bootstrap公式サイトを見つけたのですが、あとはダウンロードのセクションと数語しかありませんでした。それが何のためにあるのかを説明するものは何もありません...私はそれがフロントエンドのヘルパーであることを理解しました。私はグーグルで何かを見つけようとしましたが、具体的なものは何も見つかりませんでした。私が見つけたものはすべてコンピュータサイエンスの定義に関連しています。

だから、私の質問は:

  • ブートストラップとは何ですか?
  • それは何に使用され、フロントエンド開発にどのように役立ちますか?
  • それを説明するもう少し詳細を教えてください。

この質問はよく答えられています。特に他の場所から回答をコピーアンドペーストする場合は、新しい回答を投稿することをよく検討してください。
貧弱

@meagarのすべての敬意をもって、質問は非常に具体的で正確な答えを求めているようであり、受け入れられた答えはエレガントにそれを回避します。つまり、技術的には十分に回答されていません。それぞれの回答(削除されたものを含む)を読んだ後、Bootstrapが一般的で理解しやすい用語であり、主に初心者の混乱を減らすことを目的とする自分自身を追加しました(この質問を理解する方法です)。
tao

回答:


271

これは、WebサイトまたはWebアプリケーションを作成するための基礎として使用できるHTML、CSS、およびJavaScriptのオープンソースフレームワーク(最初はTwitterによって作成されたもの)です。

更新

公式のブートストラップWebサイトが更新され、明確な定義が含まれています。

「Bootstrapは、Webでレスポンシブなモバイルファーストプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSフレームワークです。」

@mdo@fatによって、世界中のすべての愛を込めて設計および構築されました。」


2
@hutchonoid:bootplyは常に無料ですか?Joomlaとbootplyの違いは何ですか?どっちがいいですか ?
ローガン2014年

9
@logan JoomlaとBootplyは比較できません。JoomlaはPHPとSQLに基づいて構築されたコンテンツ管理システムであり、BootplyはBootstrapフレームワーク(完全に異なる)を試すために使用されるWebサイトです。Bootplyは、Bootstrap専用のJSFiddleと考えてください。そして、はい、Bootplyは常に無料です。
APAD1 2014

15
この質問に答えるのに最も関連があるのは、上記の回答で提供されている「例」というラベルの付いたリンクをたどることだと思います。質問を投稿したユーザーがブートストラップのウェブサイトを見たことを明確に述べているので、彼らのウェブサイトからブートストラップの定義をコピー/貼り付けるのは明らかに役に立たない。彼らのウェブサイトから同じテキストを見ることが、今は太字で書かれているからといって、もっと意味があるとは思いません。
ミハエラ

13
あなたが長い時間のためのブートストラップを使用しているので、それはあなたのための明確な定義かもしれ@hutchonoidが、私を信頼し、自分のウェブサイト上でその定義がある理由私はそれが何を意味するのか理解できませんでした-私はこの答えを探し理由。だから私はこれについてミハエラに完全に同意します。この質問への回答を検索する場合、Webサイトからの同じ引用にしたくないので、フォントを大きくします。過去にこれを尋ねたユーザーは現時点ではもう答えを必要とせず、現在の誰もが最初にウェブサイトからの説明を必ず目にするので、あなたの説明は意味がありません。
アンダーソン、

2
多分それが最も適しているプロジェクトについてのいくつかの言及?(つまり、一時的なサイト、小さなWebアプリ、マイクロサイトなど)
Chuck Le Butt

94

Bootstrapは、Twitterのチームが開発したオープンソースのJavaScriptフレームワークです。これは、ユーザーインターフェイスコンポーネントの構築に役立つように設計されたHTML、CSS、およびJavaScriptコードの組み合わせです。ブートストラップは、HTML5とCSS3の両方をサポートするようにもプログラムされています。

また、フロントエンドフレームワークとも呼ばれます。

ブートストラップは、ウェブサイトとウェブアプリケーションを作成するためのツールの無料コレクションです。

タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェイスコンポーネント用のHTMLおよびCSSベースのデザインテンプレート、およびオプションのJavaScript拡張機能が含まれています。

プログラマーがブートストラップフレームワークを好む理由

  1. 簡単に始められます

  2. 素晴らしいグリッドシステム

  3. ほとんどのHTML要素の基本スタイル(タイポグラフィ、コード、テーブル、フォーム、ボタン、画像、アイコン)

  4. コンポーネントの広範なリスト

  5. バンドルされているJavaScriptプラグイン

取られたブートストラップフレームワークについて


16
「フレームワーク」というよりも、コンポーネントやウィジェットのコレクションとして印象的です。「フレームワーク」を正確に構成するもの、およびコンポーネントライブラリがコンポーネントライブラリでなくなり、「フレームワーク」になる時期を明確にできますか?「グリッドシステム」と関係があるのでしょうか?
カービーL.ウォレス

25

ブートストラップは、私が知っているように、明確に定義されたCSSです。Bootstrapを使用してもJavaScript、jQueryなども使用できます。ただし、主な違いは、Bootstrapを使用すると、クラス名を呼び出すだけで、HTMLフォームに出力を取得できることです。たとえば。レイアウトを使用したボタンの色付け、テキストの形状。これらすべてについて、CSSファイルを記述する必要はありません。HTMLフォームを形成するために正しいクラス名を使用する必要があるだけです。


10
実際、ブートストラップは単なる「cssファイル」ではありません。
レシピ

1
私は@Recipeに同意します。CSSファイルだけではありません
Sujay sreedhar 2015年

1
私は個人的にブリッツに同意します。彼がBootstrapの機能の包括的なリストを持っているというわけではありませんが、私の複雑なショップでは、私は主に純粋なコーディングを使用し、最も基本的なcss機能にはBootstrapを使用しています。それが強みの中核のようなものです。
Suamere、2015年

1
これは非常に貧弱な回答であり、CSS(およびCSSのみ)が何をするのかをひどく説明しています。反対投票。基本的には、CSSを使用し、クラスを参照してUIを変更できることを簡単に説明しています。他のパッケージ化されたリソースに対してブートストラップ自体を行うことは何もありません。
RichieHH 2017

22

簡単に言うと、Bootstrapは、デバイスレスポンシブWebアプリケーションをより速く作成するためにTwitterによって作成されたフロントエンドWebフレームワークとして理解できます。Bootstrapは、その中で直接定義されているCSSクラスのコレクションとしても理解できます。バックグラウンドでCSS、javascript、jQueryなどを利用して、Bootstrap要素のスタイル、効果、アクションを作成します。

CSSを使用してWebページ要素のスタイルを設定し、クラスを作成してWebページ要素にクラスを割り当て、スタイルをそれらに適用することをご存知かもしれません。ここでBootstrapを使用すると、Bootstrapファイルを含め、ウェブページ要素にBootstrapの事前定義されたクラス名を指定するだけでよく、Bootstrapによって自動的にスタイルが設定されるため、設計が簡単になります。これにより、Webページ要素のスタイルを設定する独自のCSSクラスを作成する必要がなくなります。最も重要なことに、Bootstrapは、Webサイトデバイスを応答可能にするように設計されており、それがその主な目的です。Bootstrapの他の代替案は、FoundationMaterializeなどのフレームワークです。

ブートストラップを使用すると、多くのCSSコードを記述する必要がなくなり、Webページの設計に費やす時間も節約できます。


18

BootstrapはオープンソースのCSS、JavaScriptフレームワークであり、もともとはTwitterのデザイナーと開発者のチームによってTwitterアプリケーション用に開発されました。その後、オープンソース向けにリリースしました。Twitterブートストラップを長年使用しているので、モバイル対応のレスポンシブWebサイトを設計するのに最適です。多くのCSSおよびJavascriptプラグインを利用して、ウェブサイトをすぐにデザインできます。それは一種の迅速なテンプレート設計フレームワークです。一部の人々は、ブートストラップCSSファイルが重く、ロードに時間がかかると文句を言いますが、これらの主張は怠惰な人々によって行われます。Webサイトに完全なbootstrap.cssを保持する必要はありません。Webサイトに不要なコンポーネントのスタイルを削除するオプションは常にあります。例えば、フォームやボタンなどの基本的なコンポーネントのみを使用している場合は、メインのCSSファイルからアコーディオンなどの他のコンポーネントを削除できます。ブートストラップで手をつけ始めるためにあなたはから基本的なテンプレートとコンポーネントをダウンロードすることができますgetbootstrapサイトにアクセスして、魔法を起こしてください


4

免責事項:私は過去にブートストラップを使用したことがありますが、それが実際に何であるかを以前はあまり理解していませんでした。そして、私はブートストラップ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には、次のようなビットがいくつかあります。その周りに他のものがあり、少し冗長に見えます。


3

Bootstrapは、美しく最新のWebサイトまたはWebアプリケーションを非常に高速に作成できる多くのコンポーネントを備えたHTML、CSS、JSフレームワークです。

次のWebサイトには、ブートストラップフレームワークを使用してプロジェクトに統合できる例、要素、および再利用可能なコンポーネントが含まれています

bootsnipp.com

startbootstrap.com

bootdey.com


1

Bootstrapは、HTML、CSS、およびJSで開発するための世界で最も人気があり、広く使用されているオープンソースフレームワークです。HTMLのフロントエンドフレームワークです。ブートストラップは、レスポンシブなWebサイトまたはWebアプリケーション、およびWebサイトを適切な画面解像度に動的に調整するのに役立つ12列のグリッドシステムの構築に役立ちます。ブートストラップの現在のバージョンは4.3.1で、ブートストラップチームもBootstrap 5のバージョンと、ブートストラップからjqueryを削除するなどの変更を正式に発表しています。ブートストラップフレームワークが最も望ましい理由はいくつかあります。

  • 使いやすい
  • Bootstrapには大きなコミュニティサポートがあります
  • カスタマイズは簡単に行えます
  • 開発スピードを上げる
  • 対応力

    詳細については、公式Webサイト(https://getbootstrap.com/)を確認してください。

ソース:https : //vmokshagroup.com/blog/bootstrap-advantages/


1

今日の標準とWeb用語では、Bootstrapは実際にフレームワークではないと言いますが、それは彼らのWebサイトが主張していることです。ほとんどの開発者はAngular、Vue、Reactフレームワークを検討していますが、Bootstrapは一般に「ライブラリ」と呼ばれています。

しかし、正確に言うと、Bootstrapは、CSS、JavaScript、およびHTML 設計ユーティリティのオープンソースのモバイルファーストコレクションであり、一般的に使用されるWeb要素をゼロからコーディングするよりもかなり速く(そしてスマートに)開発する手段を提供することを目的としています。 。

Bootstrapの成功に貢献したいくつかのコア原則:

  • 再利用可能です
  • 柔軟性があります(つまり、カスタムグリッドシステム、応答ブレークポイント、列の余白のサイズ、または状態の色を簡単に変更できます。大まかに言えば、ほとんどの設定はグローバル変数によって制御されます)。
  • 直感的です
  • それはモジュール式です(JavaScriptと(S)CSSはどちらもモジュール式のアプローチを使用しています。カスタムBootstrapビルドの作成に関するチュートリアルを簡単に見つけて、必要な部分だけを含めることができます)
  • 平均を超えるクロスブラウザ互換性があります
  • すぐに使えるウェブアクセシビリティ(スクリーンリーダー対応)
  • かなりよく文書化されています

レイアウト、タイポグラフィ、フォーム、ナビゲーション、メニュー(ドロップダウンを含む)、ボタン、パネル、バッジ、モーダル、アラート、タブ、折りたたみ可能、アコーディオン、カルーセル、リスト、テーブル、ページネーション、メディアユーティリティ(を含む)のデザインテンプレートと機能が含まれています埋め込み、画像、画像置換)、応答性ユーティリティ、色ベースのユーティリティ(プライマリ、セカンダリ、デンジャー、警告、情報、ライト、ダーク、ミュート、ホワイト)、その他のユーティリティ(位置、マージン、パディング、サイズ変更、間隔、配置、可視性)、scrollspy、接辞、ツールチップ、ポップオーバー。


デフォルトではjQueryに依存していますが、最新の人気のあるプログレッシブJavaScriptフレームワークのそれぞれを搭載したjQueryの無料のバリアントがあります。

Bootstrapの操作は、特定のクラス(またはJSフレームワークに応じて、ディレクティブ、メソッド、または属性/プロパティ)を適用し、特定のマークアップ構造を使用することに大きく依存しています。

ドキュメントには通常、簡単にコピーアンドペーストしてスターターテンプレートとして使用できる一般的な例が含まれています。


Bootstrapを使用した開発のもう1つの利点は、活気に満ちたコミュニティであり、豊富なテーマ、テンプレート、プラグインに変換され、そのほとんどがオープンソースです(カレンダー、日付/時間ピッカー、表形式のコンテンツ管理用のプラグインなど)。 MDB、ポートフォリオテンプレート、管理用テンプレートなど、Bootstrapの上に構築されたライブラリ/コンポーネントコレクションも同様です...)

最後に、重要なことですが、Bootstrapは何年にもわたって維持されてきたため、本番環境対応のアプリケーション/ Webサイトに確実に選択できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.