アダプティブ ブートストラップの実装方法

アダプティブ: 画面がどんなに大きくても、行を折り返さず、水平方向にのみ拡大縮小するようにしてください。

Boostrap の「フェンス」モード (推奨学習: Bootstrap ビデオ チュートリアル)

Boostrap アダプティブの基礎機能の特徴は、ブラウザを行と列の合計12列に分割し、行数をカスタマイズする「フェンス」モードです。表示したい要素に応じて、各要素の表示サイズを決定し、必要な列数です。範囲を超えた場合は、自動的にキャリアが変更されます。各列のサイズは、現在のブラウザのサイズに基づいて、Boostrap によって自動的に均等に割り当てられます。

Boostrap の適応関数

#実際、フェンス モードを理解すると、適応関数ははるかに単純になります。ブラウザのサイズに応じて、Boostrap には 4 つのフェンス クラスがあります。名前 使用のために提供され、その使用法は CSS スタイル シート クラス名セレクター スタイル呼び出しと同じです:

#xxs: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 は、希望するプレゼンテーション モードに合わせて、ブラウザの幅に応じて列幅を自動的に割り当てます。 。

その方法については、Web ページの携帯電話での表示スタイルと PC での表示スタイルのデザインを考慮するだけで済みますので、特に心配する必要はありません。ブースストラップにお任せください。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル

列にアクセスして学習してください。

以上がアダプティブ ブートストラップの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。