Bootstrap5 ブレークポイントとコンテナの具体的な使用法

Bootstrap5 ブレークポイントとコンテナの具体的な使用法

1. Bootstrap5 ブレークポイント

1.1 モバイルファースト

モバイルファーストについて言えば、まずレスポンシブ デザインについて触れなければなりません。レスポンシブ インターフェースとは、さまざまなデバイスに適応できるページを設計することです。レスポンシブ デザインでは、メディア クエリなどのテクノロジを使用して、さまざまなデバイス/ウィンドウでのスタイル適応を実現します。つまり、使用するさまざまなデバイスに基づいて、ユーザーに異なるページ レイアウトを表示します。
これは、画面の幅を取得し、CSS を使用して異なる幅で異なる CSS 効果を使用できる HTML5 のメディア クエリ テクノロジに基づいて実現されます。
モバイル ファーストとは、まずモバイル クライアントに適したインターフェイスを開発し、次に PC 側の状況に応じて対応するスタイルを調整することを意味します。反対の設計思想は PC ファーストです。方法の選択は、習慣とユーザーの割合に基づいて行う必要があります。最近では、モバイルがまず推奨されるのが一般的です。

1.2 ブートストラップブレークポイント

いわゆるブレークポイントは、臨界点を指します。
このテーブルとその内容、特に頻繁に使用されるクラス インフィックスは覚えておく必要があります。
これについては、次のレイアウト セクションで詳しく説明します。ここで数回読んでみてください。覚えていなくても問題ありません。後でいつでも戻って確認できます。

ブレークポイントの種類クラスインフィックス解決
X-Small(超小型、通常は携帯電話)なし<576ピクセル
小型(小型、タブレット、または古いノートパソコン) sm ≥576ピクセル
中型(中型、狭い画面のコンピュータ) md ≥768ピクセル
大型(大型ワイドスクリーンコンピュータ) lg ≥992ピクセル
特大(特大、ワイドスクリーンコンピュータ) xl ≥1200ピクセル
超特大(超大型、高解像度のコンピュータまたは広告機器) xxl ≥1400ピクセル

上の表からわかるように、画面は 5 つのブレークポイントを通じて 6 つのサイズに分割されています。読者はここでまずそれらを理解する必要があります。グリッド システムについては、第 3 セクションでさらに詳しく説明します。

2. コンテナ

2.1 コンテナは物を保管するために使われる

コンテナーは Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用してレスポンシブな Web サイトを設計するときに必要です。コンテナーの最大幅は、ブラウザーの幅に応じて変更できます。コンテナの使い方は非常に簡単です。コンテナ タグを body の内側のレイヤーに直接配置できます。一般的に、ページには他のすべてのビジュアル コンテンツをラップするためのコンテナ タグが 1 つだけ必要です。ただし、このデモでは、さまざまなコンテナの効果を比較するために、1 つのページに複数のコンテナを配置しています。

2.2 Bootstrapコンテナの分類

Bootstrap のコンテナーは、デフォルトで次の 3 つのタイプに分かれています。

  1. .container はデフォルトのコンテナーで、その幅は各レスポンシブ ブレークポイントの前のブレークポイントの最大幅になります。
  2. .container-fluid は、常にブラウザの幅の 100% を占める流動的なコンテナです。
  3. .container-{breakpoint}、ブレークポイント コンテナー。ブレークポイントに到達する前は、その幅は常にブラウザーの幅の 100% になります。ブレークポイントに到達した後は、その幅は常にブレークポイントの最大幅になります。ブレークポイントの値は、以前に導入したブレークポイントに対応しています。

次の表は、さまざまな解像度でのコンテナの幅を示しています。


エクストラスモール
<576ピクセル
小さい
≥576ピクセル
中くらい
≥768ピクセル
大きい
≥992ピクセル
特大
≥1200ピクセル
XXラージ
≥1400ピクセル
。容器100% 540ピクセル720ピクセル960ピクセル1140ピクセル1320ピクセル
.コンテナ-sm 100% 540ピクセル720ピクセル960ピクセル1140ピクセル1320ピクセル
.コンテナ-md 100% 100% 720ピクセル960ピクセル1140ピクセル1320ピクセル
.コンテナ-lg 100% 100% 100% 960ピクセル1140ピクセル1320ピクセル
.コンテナ-xl 100% 100% 100% 100% 1140ピクセル1320ピクセル
.コンテナ-xxl 100% 100% 100% 100% 100% 1320ピクセル
.コンテナ流体100% 100% 100% 100% 100% 100%

2.3 ブラウザ幅の分析によるコンテナの変更

2.3.1 簡単な例

2.2 の表をよく理解していない方もいるかもしれません。いくつか例を挙げてみましょう。
container-md を例にとると、画面の幅が 768 ピクセル未満の場合、コンテナの幅は画面の幅の 100% を占めます。画面の幅が 768 ピクセルより大きく 992 ピクセル未満の場合、コンテナの幅は常に 720 ピクセルになります。画面の幅が 992 ピクセルより大きく 1200 ピクセル未満の場合、コンテナの幅は常に 960 ピクセルになります。他のブレークポイント コンテナやデフォルト コンテナでも同様です。

2.3.2 Bootstrapコンテナのいくつかの機能(フローコンテナを除く)

  • コンテナの幅は滑らかではなく不安定で、2 つのブレークポイント間の幅は同じです。
  • コンテナーにはブレークポイントの前には余白がなく、ブレークポイントの後には余白があります。768 ピクセルの画面の場合、コンテナーの幅は 720 ピクセルです。
  • デフォルトのコンテナ (container) と小さなコンテナ (container-sm) は現在同等ですが、次のステップで変更される可能性も否定できません。

2.4 ブラウザの幅に応じてコンテナを変更するデモコード

以下は、さまざまなブラウザ幅のデモコードと、GIF効果チャートです。理解できない場合は、コードをダウンロードして自分で勉強してください。スタイル部分は、コンテナの背景色と各コンテナの間隔を設定して区別しやすくするために私が書いたもので、コンテナ自体とは関係ありません。

2.4.1 デモアニメーション

2.4.2 デモソースコード

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部nofollow" rel="スタイルシート">
 
    <title>さまざまな幅でのコンテナ幅のデモンストレーション</title>
    <スタイル>
      div{背景色: rgba(0, 0, 255, 0.178);パディング: 10px;マージン: 10px;}
    </スタイル>
  </head>
  <本文>
    <div class="container">デフォルトのコンテナ</div>
    <div class="container-sm">container-sm は小さなブレークポイントまで 100% の幅になります</div>
    <div class="container-md">container-md は中ブレークポイントまで 100% の幅</div>
    <div class="container-lg">container-lg は大きなブレークポイントまで 100% の幅になります</div>
    <div class="container-xl">container-xl は特大ブレークポイントまで 100% 幅</div>
    <div class="container-xxl">container-xxl 超特大ブレークポイントまで 100% 幅</div>
    <div class="container-fluid"> 流体コンテナ</div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </本文>
</html>

Bootstrap5 ブレークポイントとコンテナの具体的な使用法に関するこの記事はこれで終わりです。Bootstrap5 ブレークポイントとコンテナに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • bootstrap3 のコンテナと container_fluid 外部コンテナの違い

<<:  CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

>>:  Dockerはmysqldumpコマンドを使用してプロジェクト内のmysqlデータをバックアップおよびエクスポートします。

推薦する

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

ラベルタグを使用してテキストをクリックしてラジオボタンを選択します

<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...

重複したMySQLレコードを現場でチェックし、処理する実践的な記録

目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...

テキストエリアタグはサイズ変更できず、マウスでドラッグすることもできません

テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...

MySQL挿入パフォーマンスを最適化する方法の例

MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...

Linuxでスワップパーティションファイルを作成する方法

スワップの紹介Linux のスワップ (スワップ パーティション) は、Windows の仮想メモリ...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

リソースアップロード機能を実現するための SpringBoot+nginx の詳細な例

最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...

mysql data_dirの変更によって発生するエラー問題を解決する

今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...

HTML シンプルな Web フォーム作成例の紹介

<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

jQuery における Ajax の関連知識ポイントのまとめ

序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...

ノードイベントループにおけるイベント実行の順序

目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...