式の発展に応じて、第1、
1.1応答開発原理は、
異なるデバイスの目的に合うようにように、幅の異なるデバイス用のメディアクエリのレイアウトやスタイル設定を使用することです。
| 機器部門 | サイズ範囲 |
|---|---|
| 超小型スクリーン（携帯電話） | <768px |
| 小さなスクリーンデバイス（タブレット） | > = 768px〜<992px |
| ミディアムスクリーン（デスクトップモニタ） | > = 992px〜<1200px |
| ワイドスクリーン（大デスクトップモニター） | > = 1200px |
1.2応答レイアウトコンテナ
変更効果の子要素に親として対応し、必要なレイアウトコンテナが達成されます。
これは、メディアクエリを介して容器のサイズを変更し、異なる画面を実現するために、内部の子要素の配置とサイズを変更、異なるページレイアウトやスタイルの変更を参照してくださいすることが原則的に異なる画面レイアウトです。
二、ブートストラップ先端開発フレームワーク
2.1ブートストラップについて
Twitterからブートストラップ（ツイッター）、それは最も人気のあるフロントエンドのフレームワークです。ブートストラップは、HTML、CSSとJavaScriptに基づいて
いるWeb開発者ので、より迅速に、シンプルで柔軟性があり、。
- 中国の公式ウェブサイト：のhttp：//www.bootcss.com/
- 公式サイト：のhttp：//getbootstrap.com/
利点：
- 標準化されたコーディング標準のHTML + CSS
- シンプルで直感的な、強力なコンポーネントを提供します
- これは、独自の生態系、常に更新反復を持っています
- 簡単に開発を行い、開発の効率を向上させます
使用してブートストラップ2.2
の4つの手順を使用してブートストラップを：1.フォルダ構造を作成します。3.作成したHTMLスケルトン構造4は、導入された、関連するスタイルファイル書かれた内容であります
- スケルトン構造をHTMLの作成
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
2.3レイアウトコンテナ
ブートストラップページコンテンツ及びこのクラスの有用両者を提供するラスタシステム.container容器内にラップされる必要があります。
-
コンテナ型
の固定幅のレイアウトに応じて、容器
の大画面（> = 1200px）1170px幅と
画面（> = 992px）970px幅と
小さな画面（> = 768px）750px幅と
超小型スクリーン（100％） -
ベース容器流体
百パーセント幅フローレイアウトコンテナは、
コンテナのすべてのビューポート（ビューポート）を占めます。
幅は、コンテナを変更しました
例えば、私たちは手動で下容器の幅を変更する必要があるので、1170px幅内部のコンテナブートストラップの最大一方で、1280年の幅を取ります
/* 利用媒体查询修改 container宽度适合效果图宽度 */
@media (min-width: 1280px) {
.container {
width: 1280px;
}
}
三、ブートストラップグリッドシステム
3.1グリッドシステムの概要
グリッドシステム英語「グリッドシステム」として、それが通過次いで、等しい幅の列に分割されているページレイアウトを指し、「グリッドシステム」として翻訳された
列モジュラーページレイアウトの定義された数を介して。
ブートストラップは、スクリーンまたはビューポート（ビューポート）サイズの増加に応答して、モバイルデバイスの優先ストリーミンググリッドシステムを提供する、
システムは自動的に12の最大に分割されます。
3.2グリッドのオプションパラメータ
グリッドシステムは、一連の行（行）とカラム（列）を組み合わせることにより、ページレイアウトを作成するために使用され、これらの内容は良いレイアウトを作成置くことができます。
| 超小型スクリーン（携帯電話）<768px | 小画面装置（タブレット）> = 768px | 媒体画面（デスクトップモニタ）> = 992px | ワイドスクリーン（大デスクトップモニタ）> = 1200px | |
|---|---|---|---|---|
| .container最大幅 | 自動的に（100％） | 750px | 970px | 1170px |
| クラス接頭辞 | .COL-XS- | .COL-SM- | .COL-MD- | .COL-LG |
| カラム（列）数 | 12 | 12 | 12 | 12 |
1〜12は、異なる画面に等分されています
- 行（行）は、親コンテナアクション15ピクセルの余白を除去することができます
- XS-余分小：超小型; SM-小：小; MD-培地：培地; LG-大型：大型。
- カラム（列）の要素の過剰「の列（カラム）」を配置し、他の列から全体的に配置され、12よりも大きいです
- 各列は、パディングのデフォルトの15個の画素を有します
- それは「COL-MD-4 COL-SM-6」は、異なる部品クラス=分割するように、例えば、同時にクラス名を指定された複数のデバイスとすることができます
3.3ネストされた
グリッドシステムは、再び、コンテンツ、ネストされたグリッドシステムを構築しました。部品の数に小さな列とその列を理解するためのシンプルな。私たちは、.rowの新しい要素を追加することができます
し、.COL-SM-*既存の要素に.COL-SM- *要素のシリーズを。
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- 列嵌套 -->
<!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
</div>
</div>
<div class="col-md-2">2</div>
</div>
オフセット3.4
.COL-MD-offset- *ベースのカラムを用いて右にシフトさせることができます。これらのクラスは、実際に現在の要素のセレクタ*左マージン（余白）を使用することにより増加しています。
<div class="row">
<div class="col-md-3">左侧3</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧3</div>
</div>
<div class="row">
<!-- 偏中间 -->
<!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
<div class="col-md-8 col-md-offset-2">中间盒子8</div>
</div>
レンダリング：
3.5ソート
容易行（列）の順番を変更することができ.COL-MD-プッシュ*と.COL-MD-プル*クラスを使用して。
- .COL-MD-プッシュ*：右へのプッシュ
- .COL-MD-プル*：左を引きます
<div class="container">
<div class="row">
<div class="col-md-4 ">左侧</div>
<div class="col-md-8 ">右侧</div>
</div>
<div class="row">
<!-- “左侧div”向右推8，-->
<!-- “右侧div”向左拉4 -->
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
レンダリング：
3.6応答ツール
、モバイルデバイスに優しいページの開発作業、メディアクエリの使用を促進し、簡単にでき、異なるデバイスのためのこれらのツールを使用するために
表示（可視）または非表示ページコンテンツ（隠されました）。
.hidden-XS：非表示にする超小型スクリーン、他の可視;
.hidden-SM：隠すために小さな画面、他の可視;
.hidden-MD：非表示にする画面、他の可視;
.hidden-LG：非表示にするには大画面、他の可視;
また可視LG同様の効果を有します。
ブートストラップその他（ボタン、フォーム、テーブル）ブートストラップの参照ドキュメント。
第四に、携帯端末のレイアウトの概要
- 流体レイアウト（レイアウト割合）
- フレックス弾性レイアウト（推奨）
- レム適応レイアウト（推奨）
- 応答レイアウト
の提案：私たちは、他の技術支援として、このハイブリッド技術開発を主要な技術選択を選択してください
