ブートストラップは適応的ですか?

ブートストラップは適応型です。適応型とは、画面がどんなに大きくても、行を折り返さず、水平方向に拡大縮小するだけであることを意味します。ブートストラップはフェンス システムを通じて適応型です。グリッド システムはコンテナーのサイズを定義します。それを 12 等分し、ブラウザを行と列に分割して適応を実現します。

#このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

ブートストラップは適応可能ですか?

ブートストラップはアダプティブです

アダプティブとは、画面がどれほど大きくても、行を折り返さず、水平方向にのみ拡大縮小することを意味します。ブースストラップは「フェンス システム」を通じて適応します。

フェンス システムは、コンテナーのサイズを定義し、一連の行と列を通じて 12 等分の部分に分割し、メディア クエリと組み合わせて強力な応答性の高いグリッド システムを作成することによって作成されます。

Boosttrap の適応機能の基本は「フェンス」モードです。これはブラウザを行と列に分割します。合計 12 列、行数はカスタマイズされ、各要素は要素に従って表示されます。サイズは必要な列数であり、範囲を超える場合は自動的に行が変更されます。各列のサイズは、現在のブラウザのサイズに基づいて、Boostrap によって自動的に均等に割り当てられます。

動作原理:

データ行 (行) は、.container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります。適切な位置合わせとパディングを行うため。

行を介して水平方向に列のグループを作成します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。 。

列 (行) にパディング属性を設定して、列間にギャップを作成します。 .container 要素で設定したパディングをオフセットするために、.row で負のマージンを設定します (前に、行 (row) に含まれる列 (列) がパディングをオフセットします。これが、次の例で外側にはみ出している理由です)。

列が 12 個を超える場合、余分な列は新しい行に配置されます

Boostrap の適応機能

実際には、理解した上でフェンスモード、アダプティブ機能はシンプル たくさんあります ブラウザのサイズに応じて、Boosttrap では 4 つのフェンスクラス名が使用できます 使い方は、Css スタイルシートのクラス名セレクターのスタイル呼び出しと同じです:

xs:col-xs-1 ~col-xs-12、複数の列が常に 1 行に含まれます。

sm:col-sm-1 ~col-sm-12、ブラウザーのピクセル幅が 768px 以上の場合、複数の列を 1 行にのみ含めることができます。

md:col-md-1 ~col-md-12、ブラウザのピクセル幅が 992px 以上の場合、複数の列を 1 行にのみ含めることができます。

lg:col-lg-1 ~col-lg-12、ブラウザのピクセル幅が 1200px 以上の場合、複数の列を 1 行にのみ含めることができます。

疑似コードを投稿します:

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

この段落の意味は、ブラウザの幅が 768 ～ 992 の場合、4:4:4 で表示されるということです。デバイス幅が 992 より大きい場合、1:1:10 モードで表示されます。

もちろん、4 つすべてを使用することもできますが、内訳に注意する必要があります。いずれの場合でも、Boosttrap は、希望するプレゼンテーション モードに合わせて、ブラウザの幅に応じて列幅を自動的に割り当てます。 。

関連する推奨事項:

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

以上がブートストラップは適応的ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。