ブートストラップ-レスポンシブレイアウト、1ページですべてに対応
レスポンシブ開発の原則
メディアクエリを使用して、さまざまなデバイスの目的に合わせてさまざまな幅のデバイスのレイアウトとスタイルを設定します
| 設備部門 | サイズ範囲 | 幅を設定する | 列プレフィックス |
|---|---|---|---|
| 超小型画面（携帯電話） | <768px | 100％ | .col-xs- |
| 小画面デバイス（タブレット） | > = 768px〜 <992px | 750px | .col-sm- |
| ミディアムスクリーン（デスクトップ） | > = 992px〜 <1200px | 970px | .col-md- |
| ワイドスクリーンデバイス（大型デスクトップ） | > = 1200px | 1170px | .col-lg-3 |
Responsiveでは、変更の効果を実現するために、レイアウトコンテナとして親がその要素と一致する必要があります。原則は、さまざまな画面でメディアクエリを使用してレイアウトコンテナのサイズを変更してから、内部の子要素の配置とサイズを変更することです。さまざまなページでさまざまなページレイアウトとスタイルの変更を確認できるようにする
@media screen and (max-width:767px) {//小屏设备下的布局为100%
.container {
width: 100%;
}
}
@media screen and (min-width:768px) {//中屏设备下的
.container {
width: 750px;
}
}
Bootstarpフロントエンド開発フレームワーク-HTML、CSS、JSに基づいており、シンプルで柔軟性があり、WEB開発を高速化します
-
フレームワーク：一連のアーキテクチャ、完全なWebページ機能ソリューション、既成のスタイルライブラリ、コンポーネント、およびプラグイン
-
利点：標準化されたコーディング仕様は、直感的で強力なコンポーネントのセットを提供し、絶えず更新および反復し、開発効率を向上させます
-
4つのステップ：1。フォルダー構造の作成2.HTMLスケルトン3.関連ファイルスタイルのインポート4.コンテンツの書き込み
-
クラス名から直接使用されます。独自のスタイルを追加する場合は、スタイルを使用して適切な変更を直接行うだけです。
コンテナ-流体クラスフローレイアウトコンテナ、100％幅、独立したモバイル開発
グリッドシステム
-
ページレイアウトを同じ幅の列に分割し、列数の定義を通じてページレイアウトをモジュール化すると、システムはそれを12列に均一に分割します
-
既存の行にはさらに多くの列があり、列の特定の分割では、列プレフィックス.col-lg-3（12コピーの各列の等しい部分の数）を追加する必要があります。
- 列数の合計は12に等しい必要があります。コンテナ全体を埋めるには、列は正確に12に等しくなります。十分でない場合は空白になり、追加される列数が12を超えると、追加の列は空白になります。新しい行に表示されます
- 「class = col-lg-3col-md-4」を同時に追加することもできます
-
各列には左右15pxのパディング値があります。原則として、幅の距離の33.3％を指定し、左にフロートします。この+マージンの境界線を直接指定すると、オーバーフローとフォールが発生します。列に別のボックスを追加し、パディングを設定します
-
列のネストの問題
- 列に2つのボックスを直接配置すると、上部のグリッドが表示されないという問題があります
- 列の前に行ボックスを追加すると、親要素のパディングをキャンセルでき、高さは意識的に親の高さと同じになります
-
列オフセットの問題
-
内部のコンテンツを個別に配布できるようにするために、右のボックスを右にシフトし、空白のコンテンツを中央に表示することができます
-
col-md-offset-4は右オフセットを実現し、左ボックスはマージン値を追加します
-
-
列の並べ替えの問題
- col-lg-push-8右側のボックスを押すcol-lg-pull-4左側のボックスを引く
-
列の非表示表示の問題
- hidden-xs / sm / md / lgは、さまざまな状況でコンテンツを非表示にすることができます
- 可視-xs / sm / md / lgはさまざまな状況でコンテンツを表示します