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

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

青灯夜游

リリース： 2021-09-02 19:29:42

転載

3189 人が閲覧しました

この記事では、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>

ログイン後にコピー