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

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 サイトの他の関連記事を参照してください。