モバイルWeb開発レスポンシブレイアウト（ブートストラップフレームワーク）

レスポンシブ開発

レスポンシブ開発の原則

メディアクエリを使用して、さまざまなデバイスの目的に合わせてさまざまな幅のデバイスのレイアウトとスタイルを設定します。

設備部門

超小型画面（携帯電話）：<768px

小画面デバイス（タブレット）：> = 768px〜 <992px

中画面（デスクトップモニター）：> = 992px〜 <1200px

ワイドスクリーンデバイス（大型デスクトップモニター）：> = 1200px

レスポンシブコンテナ

Responsiveでは、変更効果を実現するために子要素と連携するレイアウトコンテナとして親が必要です。

原則は、さまざまな画面でのメディアクエリを使用してレイアウトコンテナのサイズを変更してから、内部の子要素の配置とサイズを変更して、さまざまな画面でさまざまなページレイアウトとスタイルの変更を実現することです。

通常のレスポンシブサイズ分割

超小型画面（携帯電話、768px未満）：幅を100％に設定

小画面デバイス（タブレット、768px以上）：幅を750pxに設定します

中画面（デスクトップモニター、992px以上）：幅を970pxに設定します

ワイドスクリーンデバイス（大型デスクトップモニター、1200px以上）：幅を1170pxに設定します

ブートストラップフロントエンド開発フレームワーク

ブートストラップの概要

Bootstrapは、HTML、CSS、およびJAVASCRIPTに基づいています。簡潔で柔軟性があり、Web開発を高速化します。

中国の公式ウェブサイト：http：//www.bootcss.com/

公式サイト：http：//getbootstrap.com/

推奨される使用法：http：//bootstrap.css88.com/

フレームワーク：名前が示すように、これはアーキテクチャのセットであり、Webページの機能ソリューションの比較的完全なセットがあり、コントロールはフレームワーク自体にあり、事前に作成されたスタイル、コンポーネント、およびプラグインがあります。ユーザーは、フレームワークで規定された特定の仕様に従って開発する必要があります。

利点

標準化されたhtml + cssコーディング標準
シンプルで直感的で強力なコンポーネントのセットを提供します
独自のエコシステムを持ち、常に更新と反復を行う
開発を容易にし、開発の効率を向上させる

ブートストラップの使用

4つのステップを使用します。

フォルダ構造を作成する
HTMLスケルトン構造を作成する
関連するスタイルファイルを紹介する
書かれた内容

フォルダ構造を作成する

プロジェクトに別のフォルダーを作成し、解凍したブートストラップをそのフォルダーに配置します。

HTMLスケルトン構造を作成する

ブートストラップの公式ドキュメントを参照してください

[外部リンク画像の転送に失敗しました。ソースサイトにアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-Q9EKRDFl-1596522555977）（C：\ Users \ FL \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200802223411562.png）]

書かれた内容

ブートストラップの事前定義されたスタイルを直接使用する
ブートストラップの元のスタイルを変更し、重量の問題に注意してください
ブートストラップをうまく学習するための鍵は、ブートストラップが定義するスタイルと、これらのスタイルが実現できる効果を知ることです。

レイアウトコンテナ

Bootstrapは、ページコンテンツとグリッドシステムの.containerコンテナをラップする必要があります。Bootstrapには、.containerと呼ばれるこのクラスが事前定義されています。

1..containerクラス

レスポンシブレイアウトコンテナの固定高さ

大画面の幅（> = 1200px）は1170pxに設定されています
中央の画面の幅（> = 992px）は970pxに設定されています
小さな画面の幅（> = 768px）は750pxに設定されています
超小型画面（100％）

2.コンテナ-流体クラス

流体レイアウトコンテナの幅のパーセンテージ
すべてのビューポートを占めるコンテナ
独立したモバイル開発に適しています

ブートストラップグリッドシステム

グリッドシステムの概要

グリッドシステム英語：グリッドシステム。これは、ページレイアウトを同じ幅の列に分割し、列数の定義を通じてページレイアウトをモジュール化することを指します。

Bootstrapは、応答性の高いモバイルデバイスファーストのストリーミンググリッドシステムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。

Bootstrapのコンテナの幅は固定されていますが、画面によってコンテナの幅が異なるため、コンテナを12の部分に分割します。

グリッドシステムパラメータ

グリッドシステムは、ページレイアウトを作成するための一連の行と列の組み合わせに使用されます。

	超小型画面（携帯電話、768px未満）	小画面デバイス（タブレット、768px以上）	中画面（デスクトップモニター、992px以上）	ワイドスクリーンデバイス（大型デスクトップモニター、1200px以上）
。コンテナの最大幅	自動（100％）	750px	970px	1170px
クラスプレフィックス	.col-xs-	.col-sm-	.col-md-	.col-lg-
列の数	12	12	12	12

行はコンテナレイアウトコンテナに配置する必要があります
列を均等に分割するには、列にクラスプレフィックスを追加する必要があります
xs-極小：超小; sm-小：小; md-中：中; lg-大：大
列（列）が12より大きい場合、余分な「列」要素は全体として新しい行に配置されます
列（列）は12未満であり、コンテナー全体の幅よりも小さくなります。
各列には、デフォルトで15ピクセルのパディングがあります
複数のデバイスクラス名を同時に列に割り当てて、異なる数のコピーを分割できます。例：class = "col-md-4 col-sm-6"

グリッドシステムの使用

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

    </div>

  </div>

</body>

列のネスト

グリッドシステムに組み込まれているグリッドシステムは、コンテンツを再びネストします。簡単に理解すると、列はいくつかの小さな列に分割されます。新しい.row要素と一連の.col-sm- *要素を既存の.col-sm- *要素に追加できます。

親のパディング値をキャンセルでき、高さが自動的に親と同じになるように、列のネストに行「行」を追加することをお勧めします。

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="row">

                    <div class="col-sm-6">1</div>

                    <div class="col-sm-6">2</div>

        </div>

      </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

    </div>

  </div>

</body>

列オフセット

列は、.col-md-offset- *クラスを介して右にオフセットできます。これらは実際には、*セレクターを使用して現在の要素に左マージンを追加することによって行われます（マージン）

<div class="container">
        <div class="row">
            <div class="col-md-4">左</div>
            <div class="col-md-4 col-md-offset-4">右</div>
        </div>
    </div>

オフセットコピーの数は12です-2つのボックスのコピーの数。

ボックスが1つしかない場合は、オフセット（12-8）/ 2

列の並べ替え

「.col-md-push」クラスと「.col-md-pull」クラスを使用すると、（列）の順序を簡単に変更できます。

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左</div>
            <div class="col-md-8 col-md-pull-4">右</div>
        </div>
    </div>

レスポンシブツール

モバイルデバイスに適したページの開発をスピードアップするには、メディアクエリ機能を使用し、これらのツールを使用して、さまざまなデバイスのページコンテンツを便利に表示または非表示にします。

クラス名	超小型画面	小さな画面	ミドルスクリーン	大画面
.hidden-xs	隠す	見える	見える	見える
.hidden-sm	見える	隠す	見える	見える
.hidden-md	見える	見える	隠す	見える
.hidden-ig	見える	見える	見える	隠す

対照的に、visble-xs visble-sm visble-md visble-lgは、特定のページのコンテンツを表示するためのものです。