レスポンシブ Web デザインは、携帯電話から大型のデスクトップ コンピューターに至るまで、すべてのデバイスでのエクスペリエンスを向上させるために自動的に調整される Web サイトを作成することを目的としています。
<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>Jialu Sangma さんは歩みを止めることができませんでしたが、自分が太平天国出身であることに気づきました。 </p>
</div>
<div class="col-sm-4">
<h3>列 3: 山歩き</h3>
<p>遠く、冷たい山の石道が傾き、白い雲が生まれる場所に家族がいた。 </p>
<p>夜のカエデの森に立ち止まって座ってください。2月の花に霜の葉が赤く染まります。 </p>
</div>
</div>
</div>
Bootstrap 5 (2021 年リリース) は、Bootstrap (2013 年リリース) の最新バージョンで、新しいコンポーネントと高速なスタイルシートによる高速な応答性を提供します。
Bootstrap 5 は、すべての主要なブラウザおよびプラットフォームの最新の安定バージョンをサポートします。 ただし、Internet Explorer 11 以前のバージョンはサポートされていません。
Bootstrap 5 と Bootstrap 3 および 4 の主な違いは、Bootstrap 5 が jQuery ではなく Vanilla JavaScript に切り替わったことです。
注: チームは、重要なバグ修正とドキュメントの変更を加えて Bootstrap 3 と Bootstrap 4 を引き続きサポートしており、引き続き使用しても完全に安全です。 ただし、新しい機能は追加されません。
ブートストラップの利点:
注: IE11 以下をサポートする必要がある場合は、BS4 または BS3 を使用する必要があります。
独自の Web サイトで Bootstrap 5 を使用するには 2 つの方法があります。
次のことができます:
Bootstrap 5 を自分でダウンロードしてホストしたくない場合は、CDN (コンテンツ配信ネットワーク) から参照できます。
W3Cstudy は、Bootstrap の CSS と JavaScript の CDN サポートを提供します。
<!-- 最新のコンパイルおよび縮小された CSS --> <link href="https://w3cstudy.cc/lib/bs/bootstrap.css" rel="stylesheet"> <!-- 最新编译的 JavaScript --> <script src="https://w3cstudy.cc/lib/bs/bootstrap.js"></script>
多くのユーザーが、別のサイトにアクセスしているときに jsDelivr から Bootstrap 5 をダウンロードしました。 そのため、ユーザーが Web サイトにアクセスすると、Web サイトがキャッシュから読み込まれるため、読み込み時間が短縮されます。 さらに、ほとんどの CDN は、ユーザーがファイルをリクエストすると、そのファイルは最も近いサーバーから提供されることを保証するため、読み込み時間も短縮されます。
Bootstrap 5 は、さまざまなコンポーネント (モーダル、ツールチップ、ポップオーバーなど) に JavaScript を使用します。 ただし、Bootstrap の CSS 部分のみを使用している場合は、それらは必要ありません。
Bootstrap 5 を自分でダウンロードしてホストしたい場合は、https://getbootstrap.com/ にアクセスし、次の手順に従ってください。そこの指示に従ってください。
Bootstrap 5 は、HTML5 doctype を必要とする HTML 要素と CSS プロパティを使用します。
常に、ページの先頭に HTML5 doctype を、lang 属性と正しいタイトル、文字セットとともに含めてください。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 例</title>
<meta charset="utf-8">
</head>
</html>
Bootstrap 5 は、モバイル デバイスに応答できるように設計されています。 モバイルファーストのスタイルは、コアフレームワークの一部です。
適切なレンダリングとタッチ スケーリングを確保するには、次の <meta> タグを <head> 要素内に追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width は、デバイスの画面幅に合わせてページの幅を設定します (デバイスによって異なります)。
initial-scale=1 は、ブラウザが最初にページを読み込むときの初期ズーム レベルを設定します。
Bootstrap 5 では、サイト コンテンツをラップするための include 要素も必要です。
選択できるコンテナ クラスは 2 つあります。
<オル>.container クラスは、応答性の高い固定幅コンテナを提供します.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.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script> </head> <body> <div class="container"> <h1>最初のブートストラップ ページ</h1> <p> この部分は .container クラスにあります。 </p> <p>.container クラスは、応答性の高い固定幅コンテナーを提供します。 </p> </div> </body> </html>
次の例は、基本的な 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.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <h1>最初のブートストラップ ページ</h1> <p> この部分は .container-fluid クラスにあります。 </p> <p>.container-fluid クラスは、ビューポートの全幅にわたる全幅のコンテナを提供します。 </p> </div> </body> </html>