ブートストラップを使用する場合

Bootstrap は、Web アプリケーションと Web サイトを迅速に開発するためのフロントエンド フレームワークです。ブートストラップは HTML、CSS、および JAVASCRIPT に基づいています。

Web コンテンツのサイズを画面サイズに自動的に適応させたい場合、つまり次のような場合にブートストラップを使用できます。 PC とさまざまな携帯電話 (ディスプレイ サイズが異なる) のコンテンツを正常に表示できます。 (推奨学習: Bootstrap チュートリアル )

大画面でも超小型画面でも、1 行に最大 12 個のタグを占有することができます。

col-lg は通常、大画面デバイス (min-width: 1200px) に使用されます。

col-md は通常、中画面デバイス (min-width: 1200px) に使用されます。 992px) ;

col-sm は通常、小さな画面デバイスに使用されます (min-width: 768px);

col-xs は超小型デバイスに使用されます (max-width: 768px);

その後に続く数字は、それが占める部分の数を表します (例: 4 は 1 行に 3 つ表示できることを意味し、12 は 1 つ表示できることを意味します)一行で。

使用法に関しては、さまざまな画面で適切に表示できるように、設定で 4 つの属性をすべて使用することをお勧めします。

たとえば、セクション タグが 12 個ある場合、さまざまな画面サイズでさまざまな方法で表示する必要があります。大画面の場合は 1 行に 6 個が表示され、中程度の画面の場合は 3 個が表示されます。 1 行に表示、小さい画面の場合は 2 行に表示、超小型画面の場合は 1 行に表示します。

これを各セクション タグに記述できます:

<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

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