ブートストラップでレスポンシブレイアウトを実装する方法-ブートストラップのチュートリアル-php.cn

ブートストラップでレスポンシブレイアウトを実装する方法

藏色散人

リリース： 2023-02-09 11:38:34

オリジナル

5875 人が閲覧しました

ブートストラップでは、グリッドシステムを使用してレスポンシブレイアウトを実装できます。実装方法は次のとおりです: 1. 行と列の一連の組み合わせによってページレイアウトを作成する; 2. 異なる画面に応じて異なるレイアウトを選択するサイズ、グリッドオプションを選択し、自動レイアウトを実現します。

ブートストラップでレスポンシブレイアウトを実装する方法

#このチュートリアルの動作環境: Windows7 システム、bootstrap3 バージョン、Dell G3 コンピューター

bootstrap はレスポンシブレイアウトを実装しています:

ブートストラップでグリッドシステムを使用して、レスポンシブレイアウトを実装できます。

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

グリッドシステムの原理:

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

Bootstrap3 では、画面は主に 3 つのタイプに分かれています (ここでは行ごとに説明します):

.col-xs-* 超小型画面、携帯電話 (幅 .col-sm-* 小型画面、タブレット (幅 ≥ 768px)

.col-md-* 中型画面、デスクトップモニター (幅 ≥ 992px)

何でも表示されている画面の種類に応じて、グリッドシステムはそれを 12 列

.col-xs-*、.col-sm-、および .col-md- に自動的に分割します。現在のパラメータでは次のパラメータが表されます。画面に占有される列の数。

ブートストラップでレスポンシブレイアウトを実装する方法

グリッドシステムを使用する場合、セクション

<head>
    <meta charset="UTF-8">
     <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- [if lt IE 9]>
         <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif] -->
</head>

ログイン後にコピー

1 で次の処理を行う必要があります。適切な描画とタッチスクリーンを確保するためにスケーリングを行うには、[ビューポートメタデータタグの追加] で次の操作を行う必要があります。

width=device-width 幅はデバイスの幅と等しい

initial-scale=1.0 初期表示サイズ - 元のサイズ、スケーリングなし

2 、bootstrap.css ファイルをインポート [ブートストラップコア CSS ファイル、インポートする必要があります]、インポートするには 2 つの方法があります:

まず、ローカル .css ファイルを直接インポートします。

次に、CDN アクセラレーションサービスを使用します:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

ログイン後にコピー

3. 互換性:

bootstrap は CSS3 に基づいており、IE8 ではサポートされていません。

IE8 には必要がありますResponse.js の連携により、メディアクエリ (メディアクエリ) のサポートを実現します。

推奨: 「

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

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