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データをバックアップおよびエクスポートします。

推薦する

Node.js とブラウザのグローバル オブジェクトの違いの概要

Node.js では、.js ファイルは完全なスコープ (モジュール) です。したがって、var に...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

Nofollowタグの書き方と使い方

「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...

MySQL テーブル内の重複データを検索して削除する方法の概要

時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します

Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...