ブートストラップは携帯電話をサポートしていますか?-ブートストラップのチュートリアル-php.cn

ブートストラップは携帯電話をサポートしていますか?

藏色散人

リリース： 2023-02-13 14:37:32

オリジナル

3209 人が閲覧しました

bootstrap は携帯電話をサポートしています。Bootstrap のレスポンシブ CSS はデスクトップ、タブレット、携帯電話に適応できます。また、Bootstrap 3 以降、フレームワークにはライブラリ全体にモバイルファーストスタイルが含まれています。

ブートストラップは携帯電話をサポートしていますか?

#この記事の動作環境: Windows 7 システム、bootstrap2.3.2 バージョン、Dell G3 コンピューター。

bootstrap レスポンシブレイアウト

Bootstrap は、画面またはビューポートのサイズに応じて変化する、レスポンシブなモバイルファーストの流体グリッドシステムを提供します。増加すると、システムは自動的に分割します。 12列まで。これには、使いやすい事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスインが含まれています。

まず、グリッドシステムを使用して、行と列の一連の組み合わせを通じてページレイアウトを作成します。ブートストラップは、さまざまな画面サイズに応じてさまざまなグリッドオプションを選択します。グリッドオプションには、超小型画面 (携帯電話)、小型画面 (タブレット)、中画面 (デスクトップ)、および大型画面 (特大デスクトップ) の 4 つがあります。グリッドシステムは 12 列に分割されています。つまり、各行は最大 12 列を保持できます。 .row に含まれる列の数が 12 より大きい (つまり、行内のグリッドセルが 12 セルを超える) 場合、自動的に入力されます。つまり、行には最大 12 列しか含めることができません。詳細な分析は後ほど。

原則:

CSS3 メディアクエリ (メディア (デバイス) クエリ) を通じて、メディアクエリを使用すると、さまざまなメディア環境で実行するときにページコンテンツをさまざまなスタイルで表示できます (もちろん、このスタイルは有効です)私たちにルールを書くよう依頼してください）。

@media は CSS3 で指定される属性で、メディアデバイスごとに異なるスタイルを設定するという目的を達成できます。また、同じデバイス上でも、ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページが再レンダリングされます。

アプリケーション:

Bootstrap は主に min-width、max-width、および構文を使用して、さまざまな解像度でさまざまな CSS スタイルを設定します。

@メディアの構文

@media mediatype and|not|only (media feature) {
CSS-Code;
}

ログイン後にコピー

メディアタイプには、印刷 (印刷デバイス)、画面 (コンピューター画面、タブレット、スマートフォンなどに使用)、音声 (スクリーンリーダーなどに使用) が含まれます。音を出す) デバイス); メディア機能を使用して、最大幅または最小幅を指定します。

ブートストラップのレイアウトコンテナーの例を見てみましょう:

ブートストラップには、ページコンテンツとグリッドシステムをラップするための .container コンテナーが必要です。

次のように

固定幅レイアウト

<div class="container">
...
</div>

ログイン後にコピー

または流体レイアウト

<div class="container-fluid">
...
</div>

ログイン後にコピー

@ブートストラップCSSドキュメントのメディア属性

1591 ~1605行

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

ログイン後にコピー

上記のコードは、ブラウザの幅が変化するとコンテナーの幅も変化することを認識しています。

推奨: 「

bootstrap ビデオチュートリアル」「css ビデオチュートリアル」

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