WEBレイアウトの発展に応じて、モバイル端末

1.応答開発の原則

1.1応答の開発の原則

これは、異なるデバイスの目的に合うようにように、幅の異なるデバイス用のメディアクエリのレイアウトやスタイル設定を使用することです。

機器の部門：

超小型画面（携帯電話）未満768
（タブレット）992〜768の間に小さなスクリーンデバイス
992〜1200中画面（デスクトップモニタ）
1200年よりワイド大きい（大きなデスクトップモニタ）

1.2応答レイアウトコンテナ

変更の効果を持つ子要素に親として応答に必要なレイアウトコンテナが達成されます。

これは、メディアクエリを介して容器のサイズを変更し、異なる画面を実現するために、内部の子要素の配置とサイズを変更、異なるページレイアウトやスタイルの変更を参照してくださいすることが原則的に異なる画面レイアウトです。

心の親コンテナのバージョンのサイズは分割され

超小型画面（768px未満の携帯電話）：100％の幅を設定します
小さなスクリーン（フラット、以上768px）：750pxに幅を設定
媒体画面（デスクトップモニタ、以上992px）：970pxの幅
画面（大デスクトップモニター、以上1200px）：1170pxの幅

しかし、我々はまた、独自の実際の状況に基づいて区分を定義することができます

2.ブートストラップの紹介

2.1Bootstrapプロフィール

ツイッター（Twitterの）上からのブートストラップは、フロントエンドのフレームは最も人気があります。ブートストラップは、そのWeb開発者ので、より迅速に、シンプルかつ柔軟であるHTML、CSSとJavaScriptに基づいています。

中国のネット公式サイトのウェブサイトをお勧めします

フレーム：アーキテクチャのセットで名前が示すように、それはフレームワーク自体のWeb機能と制御のための比較的完全なソリューションを持って、事前にスタイルライブラリ、コンポーネントおよびプラグインがあります。ユーザーは、規範的枠組みの規定に従って開発されるべきです。

2.2ブートストラップ利点

標準化されたコーディング標準のHTML + CSS
シンプルで直感的な、強力なコンポーネントを提供します
これは、独自の生態系、常に更新反復を持っています
簡単に開発を行い、開発の効率を向上させます

2.3はじめに

バージョン2.xx：ストップメンテナンス性、互換性、およびコードは単純に十分である、機能は完璧ではありません。

3.xxの：現在、最も安定したが、IE6、IE7をあきらめました。しかし、IE8のサポート・インタフェース・効果に悪いが、応答性のレイアウト、モバイル機器WEB優先プロジェクトを開発する傾向があります。

4.XX：最新バージョンは、まだ非常に普及していません

2.4bootstrap基本的な使い方

我々は唯一のそのスタイルライブラリの使用を検討するように、この段階では、我々は、JS-関連のコースを連絡していません。

4つのステップを使用してブートストラップ：

フォルダ構造を作成します。

スケルトン構造をHTMLの作成

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

関連するスタイルファイルの導入

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

コンテンツを書きます

ブートストラップは、直接使用する事前定義されたスタイルを取ります

重量の問題に独自のスタイル、注意を修正し、ブートストラップ

ブートストラップは、学習への鍵は、それがスタイルを定義するかを知ることですし、どのような影響これらのスタイルを実現することができます

2.5ブートストラップレイアウトコンテナ

グリッド・システムまたは.containerの.container流体容器に包まれるブートストラップページのコンテンツやニーズ、それはこのクラスの2つの有用なを提供します。

。容器

応答レイアウト固定幅コンテナ
1170pxとして大画面（> = 1200px）幅
970pxとしてパネル（> = 992px）幅
750pxのような小さな画面（> = 768px）幅
超小型スクリーン（100％）

.container流体

百パーセントフローレイアウトコンテナの幅
コンテナのすべてのビューポート（ビューポート）を占めます。

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

ブートストラップは、スクリーンまたはビューポート（ビューポート）サイズの増加に応答して、モバイルデバイスの優先ストリーミンググリッドシステムを提供する、システムは自動的に12の最大に分割されます。

グリッド・システムは、一連の行（行）とカラム（列）を組み合わせることにより、ページレイアウトを作成するために使用され、これらの内容は良いレイアウトを作成置くことができます。

1〜12は、異なる画面に等分されています
行（行）は、親コンテナアクション15ピクセルの余白を除去することができます
XS-余分小：超小型; SM-小：小; MD-培地：培地; LG-大型：大型。
カラム（列）の要素の過剰「の列（カラム）」を配置し、他の列から全体的に配置され、12よりも大きいです
各列は、パディングのデフォルトの15個の画素を有します
例えば、異なる部分=クラスに分け、クラス名として複数のデバイスを指定することができる」。4-COL-COL-MD-SM。6"

---

ネストされたグリッド

グリッドシステムグリッドシステムは、再びコンテンツ巣を構築しました。部品の数に小さな列とその列を理解するためのシンプルな。私たちは、新しい要素を追加し、既存のに.row .COL-SM- * .COL-SM- *要素の一連のできる
要素内。

<!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

ここに画像を挿入説明

列オフセット

使用.COL-MD-offset- *ベースの列が右にシフトすることができます。これらのクラスは、実際に現在の要素のセレクタ*左マージン（余白）を使用することにより増加しています。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

ここに画像を挿入説明

列の並べ替え

.COL-MD-プッシュ*と.COL-MD-プル*クラスを使用することにより、簡単に（列）の順序を行を変更することができます。

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

応答ツール

モバイルデバイスに優しいページの開発作業、メディアクエリの使用高速化するために、異なるデバイスのために、これらのツールを使用するには、簡単にページのコンテンツを表示または非表示にすることができます。

ここに画像を挿入説明

3.アリ百例は、生産を表示します

3.1テクノロジーの選択

ソリューション：私たちは、応答ページの開発計画を取ります

テクノロジー：ブートストラップ・フレームワーク

デザイン：このデザインは、サイズ1280pxを使用しています

プロジェクト構造が構築されました

4つのステップを使用してブートストラップ：

フォルダ構造を作成します。
スケルトン構造をHTMLの作成
関連するスタイルファイルの導入
コンテンツを書きます

幅は、コンテナを変更しました

我々は、手動で容器の幅を変更する必要があるので、この効果は、1280年幅図とし、容器たブートストラップ1170pxの最大幅

 /* 利用媒体查询修改 container宽度适合效果图宽度  */
  @media (min-width: 1280px) { 
    .container { 
    width: 1280px; 
     } 
   }

0083移動終了ウェブ開発レイアウト、ブートストラップに応答して

WEBレイアウトの発展に応じて、モバイル端末

1.応答開発の原則

1.1応答の開発の原則

1.2応答レイアウトコンテナ

2.ブートストラップの紹介

2.1Bootstrapプロフィール

2.2ブートストラップ利点

2.3はじめに

2.4bootstrap基本的な使い方

2.5ブートストラップレイアウトコンテナ

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

3.アリ百例は、生産を表示します

3.1テクノロジーの選択

おすすめ