ブートストラップは何ですか
•ブートストラップは、フロントフレームのJAVASCRIPT（半完成）、HTML、CSSに基づいて、。スタイルに対応するCSSスタイルとjQueryコードのその定義済みのセット、我々は唯一の固定クラススタイルを追加し、あなたが効果を達成するために完了することができ、固定HTML構造を提供する必要があります。
•ブートストラップjQueryの基本的な仕事はで、ブートストラップは、jQueryのプラグインで理解することができます。
•ブートストラップは、より高速なWeb開発を行い、よりエレガントなコードがいいです。
•Twitterのデザイナーマーク・オットーとジェイコブ・ソーントン開発することによって動作します。
•ブートストラップの基礎は、CSSスタイルを使用して構築され、高度な開発はHTML5、CSS3、レスダイナミックCSS言語のカスタム開発、JavaEEのはもちろん学習するときに「基礎を。」を使用する必要があります
•このようWeX5フロントエンドのオープンソースフレームワークとして、国内の枠組みの一部、より精通するだけでなく、ブートストラップに基づいて、ソースコードからのパフォーマンスのために最適化されたモバイル開発者
•中国の公式ウェブサイト：のhttp：//www.bootcss.com/
https://baike.baidu.com/item/Bootstrap/8301528?fr=aladdin
応答性のレイアウトは何である
複数の端末（携帯電話、アプリ、など）と互換性のサイト、それぞれの端末のための特別なバージョンを作成することなく：•応答性のレイアウトが。この概念は生まれモバイルインターネットブラウジングを解決することです。
•応答性のレイアウトが異なる端末のユーザーのためのより快適なインターフェースと優れたユーザーエクスペリエンスを提供することができ、および記述するために、「トレンド」と大画面のモバイルデバイスの現在の人気、と過言ではありません。より多くの設計者は、この技術を使用することを妨げるように、我々は技術革新の多くを参照してください、だけでなく、いくつかの形状のパターンを見ていないだけ。
別のブラウザがCSS3メディアクエリを使用して、異なる端末に適応し、jQueryのを使用することを排除するもので•ブートストラップ応答レイアウトは互換性のために最も成功した実装である（メディアからの問い合わせ）
ダウンロード
HTTP：：中国の公式ウェブサイトのアドレスを//cl.bootcss.eom/bootstrap-3.3.5.zip
GITアドレスします。https：//github.eom/twbs/bootstrap/archive/v3.3.6.zip
ビューポートのコンセプト
人気のモバイルデバイス上で言えば、ビューポートでデバイスの画面上には、当社ウェブサイトの面積ことを示すために使用することができ、ブラウザという、特定のポイントを（おそらくアプリ内のWebView）を表示Webページに使用されています領域の一部が、ビューポートは、ブラウザの表示領域の大きさによって結合されていない、それはブラウザの表示領域よりも大きくてもよい、それはブラウザの表示可能領域よりも小さくてもよいです。デフォルトでは、一般的には、モバイルデバイス上のビューポートのデスクトップコンピュータとモバイルデバイスの解像度ことを考えると比較的小さいブラウザの表示可能領域よりも大きいので、移動するために従来のデスクトップブラウザのデザインとして、これらのサイト上の通常の表示装置は、それらのデフォルトのモバイルデバイス上のブラウザビューポートにセット980px または1024pxは、しかし、と（これは、デバイス自身によって決定され、他の値でもよいです）結果はブラウザがこのデフォルト以外の領域の視覚的な幅であるため、水平スクロールバーのブラウザは、表示されることで、ビューポートに小さい幅は。マップが示すデバイスのデフォルトブラウザのいくつかのビューポートの幅。
CSSはある1pxのは、デバイスのことを意味するものではありません1ピクセル
で CSS我々は、一般的にユニットとしてPXを使用し、デスクトップブラウザにCSS、ピクセルは、しばしば物理的画素コンピュータスクリーンに対応し、ピクセルがデバイスのCSSであることを私たちの錯覚を引き起こす可能性があります物理的なピクセル。現実はそうではありません。しかし、異なるデバイスや異なる環境でのピクセル単位の単なる抽象的なCSSは、機器の1ピクセルの物理的なピクセルは、CSSが異なって表現しました。デスクトップ用に設計されたWebブラウザでは、我々はこのJinjinを気にする必要はありませんが、モバイルデバイス上で、あなたはこの点を理解する必要があります。以前のモバイルデバイス、比較的低いスクリーン密度で等 iphone3、その解像度はiphone3に、320×480であり、画素CSSは、物理画素の1つの画面に実際に等しいです。その後、技術の発展に伴い、モバイル機器の画面の画素密度は、より多くの、開始iPhone4のから、Appleは640x960に解像度を倍増、いわゆる網膜画面を立ち上げましたが、画面サイズは変更されませんでした同じ画面サイズで、画素がより倍増している。この手段は、この時、CSSピクセルは2つの物理的なピクセルに等しいです。モバイル機器の他のブランドは真実です。例に係るアンドリュース装置は画面密度に分けることができる LDPI、MDPI、hdpi、xhdpi他の異なるレベル、解像度を変化させ、画素CSSのAndroidデバイスと同等の物理的な画面ピクセル、または機器の異なる種類の数、ではないという結論。
もう一つの要因も引き起こす可能性があり、ユーザーズームされるCSS PXの変化を、。時にユーザ二重ページの倍率は、次に物理ピクセルも倍増CSSの1ピクセルを表し、例えば、そうでなければ二重ページを狭める、物理的なピクセルは、CSS 1ピクセルを表す倍減少します。
使用メタタグビューポートコントロール
私たちは、モバイル機器向けサイトの開発では、最も一般的なアクションの一つは、私たちに次のものをコピーすることでヘッドのタグ：
<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」>
メタは、タグが現在可能であるビューポートユーザが手動でズームすることができないが、デバイスの幅に等しい幅を。ユーザーズームの異なるサイトが異なる要件を持つことができますが、聞かせてはいけない、ビューポートあなたは、それは画面の縦横比を使用しますが、このセット気に入らない場合は、デバイスの幅に等しい幅を、これは、私たちすべての望む結果でなければなりませんデフォルトのビューポートの水平スクロールバーがあるだろうと言うことです。
タグビューポートメタは、目的は、モバイルデバイスビューポートの問題を解決するものであり、Appleがその最初のサファリのブラウザで導入されました。その後アンドリュース、主要なブラウザベンダーは、メタビューポートのサポートを導入し、追随し、また、このことはまだ非常に有用であることを証明しています。
Appleの仕様、次のようにメタビューポートには、6つの属性（それらのものを当分の間は、コンテンツと属性値と呼ばれます）があります。
| 幅 |
設定したレイアウトビューポートの 幅は、正の整数、または文字列である「幅デバイス」 |
| 初期の規模 |
ページのスケーリングの初期値、小数可能数 |
| 最小規模 |
最小スケーリング値は、ユーザ、小数点以下とすることができる数を可能にします |
| 最大規模 |
数のユーザの最大スケーリング値を許容する、それが小数であってもよいです |
| 高さ |
设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable |
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
总结:
第一，必须设置 meta viewport 标签
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、设置浏览器视口宽度为设备理想宽度
每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的 所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device- width这个特殊值就行了
<meta name="viewport" content="width=device-width, initial-scale=1">
BookStrap模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
<!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap完整模板</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--正文从此处开始-->
<h1>你好，世界！</h1>
<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->
<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
<script src="../../js/jquery-1.11.0.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../../js/bootstrap.min.js"></script>
</body>
</html>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
https://v3.bootcss.com/css/#grid
