1. Bootstrap5 ブレークポイント1.1 モバイルファーストモバイルファーストについて言えば、まずレスポンシブ デザインについて触れなければなりません。レスポンシブ インターフェースとは、さまざまなデバイスに適応できるページを設計することです。レスポンシブ デザインでは、メディア クエリなどのテクノロジを使用して、さまざまなデバイス/ウィンドウでのスタイル適応を実現します。つまり、使用するさまざまなデバイスに基づいて、ユーザーに異なるページ レイアウトを表示します。 1.2 ブートストラップブレークポイントいわゆるブレークポイントは、臨界点を指します。
上の表からわかるように、画面は 5 つのブレークポイントを通じて 6 つのサイズに分割されています。読者はここでまずそれらを理解する必要があります。グリッド システムについては、第 3 セクションでさらに詳しく説明します。 2. コンテナ2.1 コンテナは物を保管するために使われるコンテナーは Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用してレスポンシブな Web サイトを設計するときに必要です。コンテナーの最大幅は、ブラウザーの幅に応じて変更できます。コンテナの使い方は非常に簡単です。コンテナ タグを body の内側のレイヤーに直接配置できます。一般的に、ページには他のすべてのビジュアル コンテンツをラップするためのコンテナ タグが 1 つだけ必要です。ただし、このデモでは、さまざまなコンテナの効果を比較するために、1 つのページに複数のコンテナを配置しています。 2.2 Bootstrapコンテナの分類Bootstrap のコンテナーは、デフォルトで次の 3 つのタイプに分かれています。
次の表は、さまざまな解像度でのコンテナの幅を示しています。
2.3 ブラウザ幅の分析によるコンテナの変更2.3.1 簡単な例 2.2 の表をよく理解していない方もいるかもしれません。いくつか例を挙げてみましょう。 2.3.2 Bootstrapコンテナのいくつかの機能(フローコンテナを除く)
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 を応援してくれることを願っています。 以下もご興味があるかもしれません:
|
<<: CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル
>>: Dockerはmysqldumpコマンドを使用してプロジェクト内のmysqlデータをバックアップおよびエクスポートします。
この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...
目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...
テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...
MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...
スワップの紹介Linux のスワップ (スワップ パーティション) は、Windows の仮想メモリ...
関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...
目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...
最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...
今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...
<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...