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データをバックアップおよびエクスポートします。
Node.js では、.js ファイルは完全なスコープ (モジュール) です。したがって、var に...
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...
HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...
時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...
MySQL-8.0.23 をダウンロードクリックしてダウンロード: mysql-8.0.23-li...
成果を達成する実装コードhtml <ヘッダー> <h1><em>...
目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...
<br />原文: http://andymao.com/andy/post/102.h...
必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...
Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...
フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...
HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...