Bootstrap5 のブレークポイントとコンテナについて話しましょう
この記事では、Bootstrap5 のブレークポイントとコンテナについて説明します。お役に立てば幸いです。
#1. Bootstrap5 ブレークポイント
1.1 モバイル ファースト
モバイル ファーストと言えば、まずレスポンシブ デザインについて触れなければなりません。レスポンシブ インターフェイスとは、さまざまなデバイスに適応できるページをデザインすることです。レスポンシブ デザインでは、メディア クエリやその他のテクノロジーを使用して、さまざまなデバイス/ウィンドウでのスタイルの適応を実現します。つまり、使用するさまざまなデバイスに応じて、さまざまなページ レイアウトがユーザーに表示されます。 [関連する推奨事項: "ブートストラップ チュートリアル"]
これは、画面幅を取得し、CSS を使用してさまざまな値を使用できる HTML5 ベースのメディア クエリ テクノロジによって実装されます。異なる幅の下ではCSS効果だけです。 モバイルファーストとは、まずモバイルクライアントに適したインターフェースを開発し、その後PCの状況に合わせて対応するスタイルを採用するものであり、逆にPCを優先するという設計思想です。どの方法を選択するかは、自分の習慣とどのユーザーが大きな割合を占めているかに基づいて検討する必要があります。現在ではモバイルファーストが一般的に提唱されています。1.2 ブートストラップ ブレークポイント
いわゆるブレークポイントは、重要なポイントを指します。 このテーブルとその内容は覚えておく必要があり、また、特にクラス中置は頻繁に使用されます。 これについては、次のセクションのレイアウトで詳しく説明します。数回読むだけで十分です。覚えていなくても問題ありません。必要なときに確認してください。| クラス中置 | 解決策 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| sm | ≥576px||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
md | ≥768px||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| lg |
|
##特大 (特大、ワイドスクリーンコンピュータ) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| xl | ≥ 1200px |
超特大 (特大、高解像度のコンピュータまたは広告機器) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| xxl | ≥1400px |
|
小型≥ 576px |
中≥768px |
大≥992px |
X- 大≥1200px |
XX-Large≥1400px |
|
|
|---|---|---|---|---|---|---|
100% |
720px | 960px | 1140px | 1320px | .container-sm | |
100% |
720px | 960px | 1140px | 1320px | .container-md | |
100% |
720px | 960px | 1140px | 1320px | .container- lg | |
100% |
100% | 960px | 1140px | 1320px | #.container-xl | |
100% | 100%100 % | 1140px | 1320px | .container-xxl | ||
100%
| 100%100% | 100% | 1320px | 。コンテナ流体 | ||
100% | 100%100% | 100% | 100% |
2.3.1簡単な例
友達の中には 2.2 のテーブルを理解できない人もいるかもしれません。いくつか例を挙げます:container-md を例に挙げます。 768px 未満の場合、コンテナの幅は画面の幅の 100% を占めます。画面の幅が 768px より大きく 992px 未満の場合、コンテナの幅は常に 720px です。画面の幅が 992px より大きく 1200px 未満の場合、コンテナの幅は常に 720px になります。コンテナの幅は常に 960px など、他のブレークポイント コンテナとデフォルト コンテナにも同じことが当てはまります。
2.3.2 Bootstrap コンテナのいくつかの特徴 (フロー コンテナを除く)
コンテナの幅が飛び跳ねて滑らかではない間隔の幅2 つのブレークポイントの間は同じです コンテナーはブレークポイントの前では境界線がなく、ブレークポイントの後にはマージンがあります。768 ピクセルの画面の場合、コンテナーの幅は 720 ピクセルです。
- デフォルトのコンテナー (container) と小さいコンテナー (container-sm) は現在同等ですが、次のステップで変更される可能性は排除されません。
- 2.4 ブラウザ幅によるコンテナ変更のデモ コード
以下は、さまざまなブラウザ幅でのデモ コードです。 GIF レンダリングがわからない場合は、コードをダウンロードして自分で学習できます。スタイル部分は、コンテナの背景色と各コンテナの間隔を設定して、区別して表示しやすくするために私が作成したものです。何もありません。コンテナ自体に関係します。 2.4.1 デモ アニメーション
##2.4.2 デモのソース コード
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>不同宽度下容器宽度演示</title>
<style>
div{background-color: rgba(0, 0, 255, 0.178);padding: 10px;margin: 10px;}
</style>
</head>
<body>
<div> 默认容器 </div>
<div>container-sm 100% wide until small breakpoint</div>
<div>container-md 100% wide until medium breakpoint</div>
<div>container-lg 100% wide until large breakpoint</div>
<div>container-xl 100% wide until extra large breakpoint</div>
<div>container-xxl 100% wide until extra extra large breakpoint</div>
<div> 流式容器 </div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がBootstrap5 のブレークポイントとコンテナについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1662
14
1419
52
1313
25
1262
29
1236
24
ファーウェイ、Inspur、その他の部門が共同で設立したオープンソースのコンテナミラーリングセンターであるAtomHubは、正式に公開テストを開始し、国内サービスを安定してダウンロードできると発表した。
Jan 02, 2024 pm 03:54 PM
ファーウェイの公式ニュースによると、「開発者のためのすべて」をテーマとしたオープン・アトミック・デベロッパー・カンファレンスが12月16日から17日までの2日間、無錫で開催された。このカンファレンスは、オープン・アトミック・オープンソース財団、ファーウェイ、 Inspur.、DaoCloud、Xieyun、Qingyun、Hurricane Engine、OpenSDV Open Source Alliance、openEuler コミュニティ、OpenCloudOS コミュニティ、その他のメンバー ユニットが共同で AtomHub Trusted Mirror Center の構築を開始し、正式に公開テストが開始されました。 AtomHub は、共同構築、共同ガバナンス、共有の概念を遵守し、オープンソース組織と開発者に中立的でオープンで共同構築された信頼できるオープンソース コンテナ ミラー センターを提供することを目指しています。 DockerHub などのイメージ ウェアハウスの不安定性と制御不能性を考慮して、
CMD 経由で Windows 10 または 11 に Redhat Podman をインストールする方法
Oct 02, 2023 pm 09:33 PM
Windows 11 または 10 に RedHatPodman をインストールする 以下の手順に従って、コマンド プロンプトまたは Powershell を使用して Windows マシンに RedHatPodman をインストールします。 ステップ 1: システム要件を確認する まず、Windows システムが最新のアップデートで実行されていることを確認する必要があります。 Podman の要件を実行するための要件を満たすことができます。 Windows 11 または Windows 10 バージョン 1709 (ビルド 16299) 以降を使用する必要があり、Windows Subsystem for Linux 2 (WSL2) と VM 機能を有効にする必要があります。まだアクティブ化されていない場合は、次の 2 段階のコマンドを使用できます。これを実行します
Docker を使用してコンテナ障害の回復と自動再起動を行う方法
Nov 07, 2023 pm 04:28 PM
Docker は、コンテナー テクノロジーに基づく軽量の仮想化プラットフォームとして、さまざまなシナリオで広く使用されています。実稼働環境では、コンテナの高可用性と自動障害回復が非常に重要です。この記事では、Docker を使用してコンテナ障害の回復と自動再起動を行う方法を、具体的なコード例を含めて紹介します。 1. コンテナ自動再起動の設定 Docker では、コンテナ実行時に --restart オプションを使用することでコンテナの自動再起動機能を有効にすることができます。一般的なオプションは次のとおりです。 no: 自動的に再起動しません。静けさ
Windows 11 でブレークポイント エラーを修正する: 10 の効果的な方法
Apr 24, 2023 am 10:19 AM
Windows 11 はまだ比較的新しく、多くの改善が期待されているため、ユーザーは必ず 1 つや 2 つのバグに対処することになります。そのようなエラーの 1 つは、Windows 11 の「Breaking Point Reached」エラー メッセージです。このエラーはさまざまな要因によって発生する可能性があり、その中には既知の要因もあれば、特定が難しい要因もあります。ありがたいことに、これらの解決策は通常、突飛なものではなく、場合によってはシステムのアップデートのみが必要です。原因や複雑さに関係なく、この完全なガイドにはエラーを修正する方法がまとめられています。指示に従うだけで大丈夫です。 「ブレークポイントに達しました」というエラー メッセージは何を意味しますか? 「ブレークポイントに到達しました」は、Windows 11 ユーザーが遭遇する可能性のある一般的なエラー メッセージです。このエラー メッセージは通常、次の場所で発生します。
C++ STL コンテナをソートするにはどうすればよいですか?
Jun 02, 2024 pm 08:22 PM
C++ で STL コンテナを並べ替える方法: sort() 関数を使用して、std::vector などのコンテナを適切に並べ替えます。順序付けされたコンテナー std::set および std::map を使用すると、要素は挿入時に自動的に並べ替えられます。カスタムの並べ替え順序の場合、文字列のベクトルをアルファベット順に並べ替えるなど、カスタム コンパレータ クラスを使用できます。
C++ STL コンテナーの一般的な型は何ですか?
Jun 02, 2024 pm 02:11 PM
C++STL で最も一般的なコンテナ タイプは、Vector、List、Deque、Set、Map、Stack、および Queue です。これらのコンテナーは、動的配列、二重リンク リスト、キーおよび値ベースの連想コンテナーなど、さまざまなデータ ストレージのニーズに対応するソリューションを提供します。実際には、STL コンテナを使用して、生徒の成績の保存など、データを効率的に整理してアクセスできます。
フロントエンド開発におけるJavaScriptのデバッグスキルとメソッドの経験の共有
Nov 02, 2023 pm 05:54 PM
フロントエンド開発における JavaScript のデバッグ スキルと手法に関する経験の共有 はじめに: フロントエンド開発において、JavaScript は最も一般的かつ重要なプログラミング言語の 1 つであり、Web ページ、アプリケーション、モバイル端末の開発に広く使用されています。ただし、JavaScript の動的で緩い性質により、開発者はさまざまなバグや問題に遭遇することがよくあります。この記事では、私がフロントエンド開発で学んだ JavaScript のデバッグのヒントと方法を共有します。
Python を小規模プログラムのバックエンドとして使用する 3 つの方法
Apr 12, 2023 pm 09:10 PM
こんにちは、私は鄭兄弟です。 WeChat のミニ プログラムはとても良い経験で、シンプルですぐに使えます。私は最近ミニ プログラムの使い方を勉強しています。参考までに Python をミニ プログラムのバックエンドとして使用する 3 つの方法をまとめました。方法 1. WeChat クラウド ホスティング [1]。メリット: サーバー購入不要、ドメイン名登録不要、使用量に応じた課金、DevOps自動化、セキュリティ認証、運用保守の経験がない人に適しています。短所: コストは、自社でサーバーを構築するコストよりも確実にわずかに高くなります。同じ車種でもオートマチックトランスミッション車はマニュアルトランスミッション車よりも高価です。いわゆるクラウド ホスティングは Docker コンテナで、ウェアハウス (github、gitlab、gitee のいずれか) を入手するだけで済みます。
