CSSの概要ブートストラップ
この章では、我々は、Web開発者がより良い、より速く、より強力なベストプラクティスを作るなど、ブートストラップの重要な部分の基本構造を説明します。
HTML 5 DOCTYPE（文書型）
ブートストラップは、いくつかのHTML5の要素とCSSプロパティを使用しています。 これらが機能するためには、あなたは、HTML5のドキュメントタイプ（文書型）を使用する必要があります。 したがって、使用ブートストラッププロジェクトの先頭に次のコードセグメントが含まれています。
<!DOCTYPE html> <html> .... </html>
HTML5のドキュメントタイプ（文書型）を使用していません作成したブートストラップ内のページの始まりは、あなたが直面する可能性がある場合、一部のブラウザでは、あなたのコード内でW3C標準検証に合格できなくても、その下に一貫性のない特定の状況に直面する可能性があり矛盾の問題を表示します。
モバイルデバイスの優先順位
優先度のモバイルデバイスは、ブートストラップ3の中で最も重要な変化です。
ブートストラップの以前のバージョンでは（2.xのまで）、手動でプロジェクト全体のモバイル機器のための優しいサポートするために、別のCSSを引用する必要があります。
これからは違い、ブートストラップ3デフォルトCSS自体は、モバイルデバイス用の優しいサポートです。
3ブートストラップデスクトップに続いて、モバイルデバイスの優先順位を設計されています。 より多くの人々がモバイルデバイスを使用するように、これは、実際には非常にタイムリーなシフトです。
適切なレンダリングとタッチスクリーンズームを確保するために優しいモバイルデバイス用のブートストラップ開発のウェブサイトを作成するには、次のように、ページの頭の中にビューポートメタタグを追加する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
widthプロパティ幅制御装置。 あなたのサイトが、それは別のデバイスで正しくレンダリングさを保証するために、デバイスの幅に設定した後、閲覧するために、異なる画面解像度のデバイスとなりますと仮定します。
初期スケール= 1.0は、ページの負荷を確実にするために、1：1の比率プレゼンテーションでは、スケーリングは行われません。
モバイルデバイスのブラウザでは、 ユーザースケーラブル追加することで、=無 ビューポートのメタタグのためにそのスケーリング（ズーミング）機能を無効にします。
一般的に、最大規模= 1.0およびユーザースケーラブル=なし一緒に。 このズーム機能が無効になった後、ユーザは、画面をスクロールすることができ、あなたのサイトがより多くのネイティブアプリケーションの感触のように見えるようにすることができます。
あなた自身の状況に依存し、このように我々は、すべてのサイトの使用はお勧めしません、ということに注意してください！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
対応する画像
<img src="..." class="img-responsive" alt="响应式图像">
IMG-応答クラスを追加することにより、ブートストラップ3は、画像がより友好的である応答性のレイアウトをサポートすることができます。
それでは、このクラスはCSSのプロパティが含まれているものを見てみましょう。
以下のコードでは、画像IMG応答クラスを参照してくださいすることができ、最大幅与える：100％;高さ：自動;画像が親要素のサイズを超えないようにプロパティをスケーリングすることができます。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
これは、関連する画像は、 インラインブロックとしてレンダリングすることを示しています。 あなたは要素の表示プロパティを設定するとインラインブロック、その周囲のプレゼンテーションフォームの内容に関してはインライン要素ですが、インライン差でこのケースでは、我々は、幅と高さを設定することができるということです。
設置高さ：高さの自動、関連する要素は、ブラウザによって異なります。
設定の最大幅は 100％widthプロパティで指定された任意の幅を上書きします。 これは、写真がより友好的である応答性のレイアウトをサポートすることができます。
グローバルディスプレイ、レイアウトとリンク
基本的なグローバル表示
3ブートストラップ本体{マージン：0;}使用して余白の体を除去すること。
ボディのための次の設定を考えてみましょう：
体{
フォントファミリ： "ヘルベチカノイエ」、ヘルベチカ、Arialの、サンセリフ;
フォントサイズ：14px;
行の高さ：1.428571429;
色：＃333333;
背景色：#FFFFFF;
}
ボディ「ヘルベチカノイエ」、ヘルベチカ、Arialのためのデフォルトのフォントスタイルを設定するための最初のルール、サンセリフ体。
14ピクセルのデフォルトのフォントサイズのテキストの二番目のルール。
3番目のルールは、デフォルトの行の高さが1.428571429で設定することです。
第四の規則は、＃333333にデフォルトのテキストの色を設定します。
最終規則は、デフォルトの背景色が白で設定します。
組版
フォントファミリベース@使用し、@のfont-size-ベースとタイポグラフィなど@の行の高さ-基本プロパティ。
リンクスタイル
グローバルリンケージプロパティ@リンク色を介して色を設定します。
リンク、次の設定のデフォルトスタイル：
A：ホバー、
A：フォーカス{
色：＃2a6496;
テキスト装飾：下線;
}
A：フォーカス{
概要：細い点線＃333;
概要：5pxのオート-webkit-フォーカスリング色。
アウトライン・オフセット：-2px。
}
マウスがリンクの上に置いたり、クリックしてリンクするときに、色は＃2a6496に設定されています。 同時に、アンダースコアがあります。
また、クリックしたリンクは、細い破線のアウトライン＃333用のカラーコードが存在することになります。 別のルールは広い5ピクセルにアウトラインを設定することである、とのWebKitベースのブラウザのために-webkit-フォーカスリング色のブラウザ拡張を持っています。 輪郭オフセットは、-2ピクセルに設定されています。
これらのスタイルのすべてがscaffolding.lessで見つけることができます。
クロスブラウザの不整合を避けます
使用するブートストラップノーマライズをクロスブラウザの整合性を構築します。
Normalize.cssは、デフォルトのスタイルHTML要素でより良いクロスブラウザの一貫性を提供する小型のCSSファイルです。
コンテナ（コンテナ）
<div class="container"> ... </div>
パッケージのページのコンテンツをコンテナクラスのブートストラップ3。 それでは、このファイルbootstrap.css .containerクラスを見てみましょう。
.container {
パディング右：15ピクセル;
パディング左：15ピクセル;
マージン右：自動;
余白左：自動;
}
上記のコードにより、コンテナの左右の余白（マージン右マージン左）は、ブラウザによって決定しました。
固定幅であり、デフォルトのコンテナが入れ子にすることはできません原因パディング（パディング）にあることに注意してください。
.container：前に、
.container：後の{
ディスプレイ：テーブル。
内容： "";
}
これは、擬似要素を生成します。 表示 テーブルを設定し、それが匿名テーブルセルと新しいブロック書式コンテキストを作成します。 ：floatをクリアするために擬似要素の後にマージンの崩壊を,:防止するための擬似要素の前に 。
conteneditable属性がHTMLで表示された場合は、オペラのバグのいくつかあるため、これらの要素の周りの空間を作成します。 これは、 コンテンツを使用して行うことができます： ""修復するために。
.container：後の{
クリア：両方;
}
これは、擬似要素を作成し、すべての要素が含まれているすべての浮動容器ことを保証します。
3 CSSメディアクエリーに応答してアプリケーションを有するブートストラップ、異なるしきい値のメディアクエリーは、グリッドシステムを一致させるために、容器の最大幅を設定しています。
@media（最小幅：768px）{
.container {
幅：750px;
}
ブートストラップブラウザ/デバイスサポート
ブートストラップは、最新のデスクトップおよびモバイル端末のブラウザでも動作することができます。
古いブラウザではうまくサポートされない場合があります。
次の表は、ブラウザとプラットフォームの最新バージョンをサポートブートストラップ：
| クロム | Firefoxの | IE | オペラ | サファリ | |
|---|---|---|---|---|---|
| アンドロイド | YES | YES | 適用されません | NO | 適用されません |
| iOS版 | YES | 適用されません | 適用されません | NO | YES |
| Mac OS Xの | YES | YES | 適用されません | YES | YES |
| ウィンドウズ | YES | YES | YES * | YES | NO |
*のInternet Explorer 8とIEのそれ以降のバージョンのブートストラップをサポート。