Bootstrap5 教程

Bootstrap 教程

Bootstrap は世界で最も人気のあるフロントエンドコンポーネントライブラリであり、レスポンシブレイアウト、モバイルファーストの WEB プロジェクトの開発に使用されます。

Bootstrap5 は現在 Bootstrap の最新バージョンであり、HTML、CSS、JS 開発用のオープンソースツールセットです。Sass 変数と mixins、レスポンシブグリッドシステム、多数のプリビルドコンポーネント、強力な JavaScript プラグインをサポートし、レスポンシブでモバイルファーストのサイトを迅速に設計・カスタマイズするのに役立ちます。

このチュートリアルは誰に向いていますか？

HTML と CSS の基礎知識があれば、このチュートリアルを読んで、自分のウェブサイトを開発することができます。このチュートリアルを学び終えると、Bootstrap を使用して Web プロジェクトを開発する中級レベルに達することができます。

このチュートリアルを読む前に、理解しておく必要がある知識：

このチュートリアルを読み始める前に、HTML、CSS、JavaScript の基礎知識が必要です。これらの概念をまだ理解していない場合は、まず以下のチュートリアルを読むことをお勧めします。

なぜBootstrapを使うのか

  • 容易上手：HTML と CSS の基本的な知識がある人なら誰でも、Bootstrap を非常に素早く使用することができます。

  • レスポンシブデザイン：Bootstrap は、異なるプラットフォーム（スマートフォン、タブレット、デスクトップ）に応じて調整することができます。

  • 移动优先：Bootstrap において、モバイル端末への自動適応はフレームワークの中核となる部分です。

  • ブラウザ互換性：Bootstrap5 はすべての主要ブラウザ（Chrome、Firefox、Edge、Safari、Opera）と互換性があります。 IE11 以前のバージョンをサポートする必要がある場合は、Bootstrap4 または Bootstrap3 を使用してください。

Bootstrap5 实例

以下は簡単なBootstrap5の例です：

Bootstrap5 实例

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>私の最初のBootstrapページ</h1> <p>これはレスポンシブページです。ブラウザのサイズを変更して効果を確認してください！</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>サンプル</p> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>サンプル</p> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>サンプル</p> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> </div> </div>

尝试一下 »

Bootstrap5 と Bootstrap 3 & 4

Bootstrap5 は Bootstrap の最新バージョンであり、新しいコンポーネント、より高速なスタイルシート、そしてより高速な応答性を備えています。

Bootstrap5 は、すべての主要な最新安定版ブラウザをサポートしていますが、Internet Explorer 11 以前のバージョンはサポートしていません。

Bootstrap5 と Bootstrap 3 & 4 の主な違いは、Bootstrap5 が jQuery に依存しなくなり、ネイティブの...を使用していることです。JavaScript、もちろん使用したい場合は導入することもできますjQuery。

Bootstrap 5 は IE11 以下のバージョンのブラウザには対応しておらず、Bootstrap 4 は IE8 および iOS 6 のサポートを終了しました。旧バージョンのブラウザとの互換性が必要な場合は、次を使用してくださいBootstrap3。

注意：現在も公式チームは Bootstrap 3 と Bootstrap 4 を保守しており、引き続き使用することができます。ただし、Bootstrap 3 & 4 に新機能が追加されることはありません。

其他扩展