Bootstrap 5 入門

Bootstrapとは何ですか?

  • Bootstrapは、Web開発をより速く、簡単に行うために無料のフロントエンドフレームワークです
  • BootstrapにはHTMLおよびCSSに基づいたデザインテンプレートが含まれており、レイアウト、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像スライダーなどに使用されます
  • Bootstrapは豊富なJavaScriptプラグインを提供しています
  • Bootstrapを使えば、レスポンシブデザインを簡単に作成できます

レスポンシブウェブデザインとは何ですか?

レスポンシブウェブデザインは、携帯電話から大規模なデスクトップパソコンまで、すべてのデバイス上での使用体験を自動的に調整できるウェブサイトを作成することを目指しています。

Bootstrap 5 インスタンス

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>私の最初の Bootstrap ページ</h1>
</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>

自分で試してみる

Bootstrapバージョン

Bootstrap 5(2021年リリース)は、Bootstrapの最新バージョン(2013年リリース)です。新しいコンポーネント、より速いスタイルシートを使用して、より高速な応答能力を提供します。

Bootstrap 5は、主要なブラウザおよびプラットフォームの最新の安定版をサポートしています。ただし、Internet Explorer 11およびそれ以前のバージョンをサポートしていません。

Bootstrap 5とBootstrap 3 & 4の主な違いは、Bootstrap 5がjQueryではなくVanilla JavaScriptに切り替わったことです。

注釈:そのチームはBootstrap 3およびBootstrap 4の主要なバグ修正とドキュメントの変更をサポートし続けていますが、それらを使用することは完全に安全です。ただし、新しい機能は追加されません。

なぜBootstrapを使うべきですか?

Bootstrapの利点:

  • 使いやすさ:HTMLとCSSに基本的な理解がある人なら、Bootstrapをすぐに使用できます。
  • レスポンシブ特性:BootstrapのレスポンシブCSSは、スマートフォン、タブレット、デスクトップに調整できます。
  • モバイル優先の方法:Bootstrapでは、モバイル優先のスタイルがフレームワークの一部です。
  • ブラウザ互換性:Bootstrap 5は、Chrome、Firefox、Edge、Safari、Operaなどのすべての現代ブラウザと互換性があります。

注意:IE11およびそれ以下のバージョンをサポートする必要がある場合は、BS4またはBS3を使用する必要があります。

Bootstrap 5 をどこで手に入れるか?

Bootstrap 5 をあなたのウェブサイトで使用するには、2つの方法があります。

あなたは:

  • CDNからのBootstrap 5を含む
  • getbootstrap.comからBootstrap 5をダウンロードする

Bootstrap 5 CDN

Bootstrap 5を自分でダウンロードしてホストする場合は、CDN(コンテンツデリバリーネットワーク)から参照することができます。

CodeW3C.comはBootstrapのCSSとJavaScriptにCDNサポートを提供しています:

MaxCDN:

<!-- 最新编译并压缩的 CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Bootstrap 5 CDNの利点の1つ:

多くのユーザーはjsDelivrからBootstrap 5をダウンロードして、他のサイトを訪問する際に既に使用しています。そのため、彼らがあなたのウェブサイトにアクセスすると、キャッシュから読み込まれ、ロード時間が短くなります。また、ほとんどのCDNは、ユーザーがファイルをリクエストすると、最も近いサーバーからサービスを提供することを保証し、これによりロード時間がさらに短くなります。

JavaScript?

Bootstrap 5は、モーダル、ツールチップ、ポップアップなどのコンポーネントにJavaScriptを使用しますが、BootstrapのCSS部分のみを使用する場合は、それらは必要ありません。

Bootstrap 5のダウンロード

Bootstrap 5を自分でダウンロードしてホストする場合は、以下のリンクをクリックしてください https://getbootstrap.com/その後、その指示に従ってください。

Bootstrap 5で初めてのウェブページを作成してください

1. HTML5 ドキュメントタイプの追加

Bootstrap 5 はHTML5ドキュメントタイプが必要なHTML要素とCSS属性を使用します。

常にHTML5ドキュメントタイプを含め、lang属性と正しいタイトル、エンコーディングを含めてください:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 インスタンス</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 モバイルファースト

Bootstrap 5 のデザイン目標は、レスポンシブなモバイルデバイスです。モバイルファーストのスタイルはフレームワークの一部です。

正しいレンダリングとタッチズームを確保するために、 <head> 以下を要素内に追加してください <meta> タグ:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width ページの幅をデバイスの screen-width(デバイスごとに異なります)に合わせます。

initial-scale=1 ブラウザがページを最初に読み込んだ際の初期ズームレベルを設定します。

3. コンテナ

Bootstrap 5 には、サイトのコンテンツを包装するための要素が必要です。

選択できるコンテナクラスは二種類あります:

  1. .container クラスは応答的な固定幅のコンテナを提供します
  2. .container-fluid クラスは全幅のコンテナを提供し、ビューポートの全体の幅をカバーします

二つの基本的な Bootstrap 5 ページ

container インスタンス

以下は、基本的な Bootstrap 5 ページ(応答的な固定幅のコンテナを含む)のコードの例を示します:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap インスタンス</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>私の最初の Bootstrap ページ</h1>
  <p>この部分は .container クラス内にあります。</p>
  <p>.container クラスは応答的な固定幅のコンテナを提供します。</p>
</div>
</body>
</html>

自分で試してみる

Container Fluid インスタンス

以下は、基本的な Bootstrap 5 ページ(全幅コンテナを含む)のコードの例を示します:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap インスタンス</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>私の最初の Bootstrap ページ</h1>
  <p>この部分は .container-fluid クラス内にあります。</p>
  <p>.container-fluid クラスは全幅のコンテナを提供し、ビューポートの全体の幅をカバーします。</p>
</div>
</body>
</html>

自分で試してみる