Bootstrap中国語マニュアル

---

Bootstrap は、レスポンシブ (適応型) Web 開発をより迅速かつ簡単に行う、最も人気のある強力なフロントエンド (HTML、CSS、および JavaScript) フレームワークです。

---

Bootstrap の概要

Bootstrap は、もともと 2010 年代半ばに Twitter のデザイナーと開発者によって作成されました。オープンソース フレームワークになる前は、Bootstrap は Twitter ブループリントとして知られていました。

Bootstrap は、Web 開発をより迅速かつ簡単にする強力なフロントエンド フレームワークです。これには、フォーム、ボタン、ナビゲーション、ドロップダウン メニュー、アラート、モーダル、タブ、アコーディオン、カルーセル、ツールチップなどの一般的なユーザー インターフェイス コンポーネントを作成するための HTML および CSS ベースのデザイン テンプレートが含まれています。

Bootstrap を使用すると、時間とエネルギーを大幅に節約できます。

注: デフォルトでは、Bootstrap 4 は応答性が高く、モバイルファーストのアプローチを採用しています。 Bootstrap 4.3 は、Bootstrap の最新かつ最も安定したバージョンです。 Bootstrap 4 は、Google Chrome、Firefox、Safari、Internet Explorer 10 以降など、すべての主要な最新ブラウザでサポートされています。

Bootstrap でできること

• Bootstrap でできることはさらにたくさんあります。

• #レスポンシブな Web サイトを簡単に作成できます。

• 事前定義されたクラスを使用して、複数列のレイアウトをすばやく作成できます。

• さまざまなタイプのフォーム レイアウトをすばやく作成できます。

• さまざまなナビゲーション バーのバリエーションをすばやく作成できます。

• JS コードを書かずに、アコーディオンやモーダルなどのコンポーネントを簡単に作成できます。

• 動的タブを簡単に作成して、大量のコンテンツを管理できます。

• ツールチップとポップアップを簡単に作成して、ツールチップ テキストを表示できます。

• カルーセルや画像スライダーを簡単に作成して、コンテンツを紹介できます。

• さまざまなタイプのアラート ボックスをすばやく作成できます。

実際には、それだけではありません。Bootstrap を使用すると、他にも多くの興味深いことができます。これらすべてについては、後続の章で詳しく説明します。

Bootstrap を使用する利点

フロントエンド フレームワークの使用経験がある場合は、Bootstrap がなぜ特別なのか疑問に思うかもしれません。 Bootstrap フレームワークを選択する理由をいくつか挙げます。

• 時間を大幅に節約 - Bootstrap の事前定義されたデザイン テンプレートとクラスを使用すると、時間と労力を大幅に節約できます。そして他の開発作業に集中します。

• レスポンシブ機能 - Bootstrap を使用すると、マークアップを変更せずに、さまざまなデバイスや画面解像度でより適切に動作するレスポンシブ Web サイトを簡単に作成できます。

• 一貫したデザイン - すべての Bootstrap コンポーネントは、中央ライブラリを介して同じデザイン テンプレートとスタイルを共有するため、Web ページのデザインとレイアウトの一貫性が保たれます。

• 使いやすい - Bootstrap は非常に使いやすいです。 HTML、CSS、JavaScript の基本的な知識があれば誰でも、Bootstrap を使用した開発を始めることができます。

• 互換性のあるブラウザ - Bootstrap は最新の Web ブラウザを念頭に置いて作成されており、Chrome、Firefox、Safari、Internet Explorer などのすべての最新ブラウザと互換性があります。

• オープンソース - 最も良い点は、完全に無料でダウンロードして使用できることです。

このチュートリアルの内容

この Bootstrap チュートリアル シリーズでは、グリッド システム、タイポグラフィ スタイルのメカニズム、フォームのスタイリング方法などの基本から始めて、Bootstrap フレームワークのすべての機能を取り上げます。 、およびテーブル、リスト、画像などの一般的なユーザー インターフェイス要素のスタイルを設定するためのテクニック。

さらに、入力グループ、ボタン グループ、メディア オブジェクト、ナビゲーション バー、パネル、ページネーション、ラベルとバッジ、プログレス バーなどのすぐに使用できる Bootstrap コンポーネントを活用する方法も学びます。それらをカスタマイズしてさまざまなバリエーションを作成する方法。

最後に、モーダル ウィンドウ、動的タブ、ツールヒント、アラート、アコーディオン メニュー、カルーセル、スクロールなどの作成など、Bootstrap の高度な機能のいくつかと、利用可能なオプションと方法を使用してそれをカスタマイズする方法を確認します。既存の機能を拡張します。

このコースを学習する前に、

• HTML チュートリアル

• # #CSS チュートリアルを学習してください。

• JAVASCRIPT チュートリアル