Bootstrap5 のブレークポイントとコンテナについて話しましょう-ブートストラップのチュートリアル-php.cn

2. コンテナ

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

Bootstrap5 のブレークポイントとコンテナについて話しましょう

青灯夜游

Sep 02, 2021 am 09:55 AM

容器ブレークポイント

この記事では、Bootstrap5 のブレークポイントとコンテナについて説明します。お役に立てば幸いです。

Bootstrap5 のブレークポイントとコンテナについて話しましょう

#1. Bootstrap5 ブレークポイント

1.1 モバイルファースト

モバイルファーストと言えば、まずレスポンシブデザインについて触れなければなりません。レスポンシブインターフェイスとは、さまざまなデバイスに適応できるページをデザインすることです。レスポンシブデザインでは、メディアクエリやその他のテクノロジーを使用して、さまざまなデバイス/ウィンドウでのスタイルの適応を実現します。つまり、使用するさまざまなデバイスに応じて、さまざまなページレイアウトがユーザーに表示されます。 [関連する推奨事項: "

ブートストラップチュートリアル"]

これは、画面幅を取得し、CSS を使用してさまざまな値を使用できる HTML5 ベースのメディアクエリテクノロジによって実装されます。異なる幅の下ではCSS効果だけです。

モバイルファーストとは、まずモバイルクライアントに適したインターフェースを開発し、その後PCの状況に合わせて対応するスタイルを採用するものであり、逆にPCを優先するという設計思想です。どの方法を選択するかは、自分の習慣とどのユーザーが大きな割合を占めているかに基づいて検討する必要があります。現在ではモバイルファーストが一般的に提唱されています。

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

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

ブレークポイントの種類クラス中置解決策小型、タブレット、または古いラップトップ)≥576px中型 (中程度の狭い画面のコンピューター)≥768px#大型 (大規模なワイドスクリーンコンピュータ) lg##特大 (特大、ワイドスクリーンコンピュータ)超特大 (特大、高解像度のコンピュータまたは広告機器)

上の表からわかるように、画面は 5 つのブレークポイントによって 6 つのサイズに分割されています。読者は最初に理解するだけで十分です。これについては、グリッドシステムの 3 番目のセクションで詳しく説明します。

2. コンテナ

2.1 コンテナは物を保持するために使用されます

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

#2.2 ブートストラップコンテナの分類

#ブートストラップコンテナは、デフォルトで 3 つのタイプに分類されます。

. コンテナー (デフォルトのコンテナー)。その幅は、各応答ブレークポイントの前にある前のブレークポイントの最大幅です。
.container-fluid、ブラウザの幅の 100% を常に占める流体コンテナです。
.container-{breakpoint}, ブレークポイントコンテナ。ブレークポイントに到達する前は、その幅は常にブラウザの幅の 100% を占めます。停電に到達した後は、その幅は常にブラウザの幅になります。ブレークポイントの最大幅。ブレークポイントの値は、前に紹介したブレークポイントに対応します。


	sm
	md
	≥992px
xl	`≥ 1200px`
xxl	`≥1400px`

##超小型.container.container-sm.container-md.container- lg100%100%100 %1140px1320px100%100%100%100%1320px100%100%100%100%100%2.3 ブラウザの幅によるコンテナ解析の変更

	小型≥ 576px	中≥768px	大≥992px	X- 大≥1200px	XX-Large≥1400px
100%540px	720px	960px	1140px	1320px
100%540px	720px	960px	1140px	1320px
100% 100%	720px	960px	1140px	1320px
100%100%	100%	960px	1140px	1320px		#.container-xl
`100%`						.container-xxl
`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 ピクセルです。

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Docker を使用してコンテナ障害の回復と自動再起動を行う方法 Nov 07, 2023 pm 04:28 PM

Docker は、コンテナーテクノロジーに基づく軽量の仮想化プラットフォームとして、さまざまなシナリオで広く使用されています。実稼働環境では、コンテナの高可用性と自動障害回復が非常に重要です。この記事では、Docker を使用してコンテナ障害の回復と自動再起動を行う方法を、具体的なコード例を含めて紹介します。 1. コンテナ自動再起動の設定 Docker では、コンテナ実行時に --restart オプションを使用することでコンテナの自動再起動機能を有効にすることができます。一般的なオプションは次のとおりです。 no: 自動的に再起動しません。静けさ

ファーウェイ、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 段階のコマンドを使用できます。これを実行します

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 のいずれか) を入手するだけで済みます。

See all articles

Bootstrap5 のブレークポイントとコンテナについて話しましょう

#1. Bootstrap5 ブレークポイント

2. コンテナ

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック