Bootstrap5 チュートリアル

Bootstrap 教程

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

Bootstrap5 は現在 Bootstrap の最新バージョンであり、HTML、CSS、JS 開発のためのオープンソースツールセットです。Sass 変数やミックスイン、レスポンシブグリッドシステム、多数の既製コンポーネント、強力な 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>第1列</h3> <p>初心者向けチュートリアル</p> <p>学ぶのは技術だけではなく、夢でもあります！！！</p> </div> <div class="col-sm-4"> <h3>第2列</h3> <p>初心者向けチュートリアル</p> <p>学ぶのは技術だけではなく、夢でもあります！！！</p> </div> <div class="col-sm-4"> <h3>第3列</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 を使用していることです。JavaScriptもちろん、使いたい場合は導入することもできます。jQuery。

Bootstrap5 は IE11 以下のバージョンのブラウザをサポートしておらず、Bootstrap4 は IE8 および iOS 6 のサポートを放棄しました。旧バージョンのブラウザとの互換性が必要な場合は、Bootstrap3 を使用してください。Bootstrap3。

注意：現在、公式チームは Bootstrap 3 と Bootstrap 4 を引き続きメンテナンスしているため、これらを使い続けることができます。ただし、Bootstrap 3 & 4 に新機能が追加されることはありません。

その他の拡張機能