3 CSSの概要ブートストラップ

ターゲット

このチュートリアルでは、ブートストラップ3 CSS点を議論してきました。次に我々は、いくつかの重要な要因を作業ブートストラップ3を説明します。

HTML 5 DOCTYPE（文書型）

3ブートストラップHTML5とCSS属性のいくつかの要素を使用していました。これらが機能するためには、あなたは、HTML5のドキュメントタイプ（文書型）を使用する必要があります。

<！DOCTYPE HTML>
<HTML LANG = "EN">
  ...
</ HTML>

HTML5のドキュメントタイプ（文書型）を使用していません作成したブートストラップ内のページの始まりは、あなたが直面する可能性がある場合、一部のブラウザでは、あなたのコード内でW3C標準検証に合格できなくても、その下に一貫性のない特定の状況に直面する可能性があり矛盾の問題を表示します。

モバイルデバイスの優先順位

これはおそらくブートストラップ3の中で最も重要な変化です。ブートストラップの以前のバージョンでは（2.xのまで）、手動でメインのモバイルデバイス向けのCSSと一緒にプロジェクトを作るために、別のCSSを引用する必要があります。これからは違い、ブートストラップ3デフォルトCSS自体は、モバイルデバイスフレンドリーです。

3ブートストラップデスクトップに続いて、モバイルデバイスの優先順位を設計されています。より多くの人々がモバイルデバイスを使用するように、これは、実際には非常にタイムリーなシフトです。

適切なレンダリングとタッチスクリーンズームを確保するために優しいモバイルデバイス用のブートストラップ開発のウェブサイトを作成するには、次のように、ページの頭の中にビューポートメタタグを追加する必要があります。

<メタ名=「ビューポート」コンテンツ= "幅=デバイス幅、初期スケール= 1.0">

widthプロパティ幅制御装置。あなたのサイトが、それは別のデバイス上で正しくレンダリングすることを確認するデバイス幅に設定した後、閲覧するために、異なる画面解像度のデバイスとなりますと仮定します。

初期スケール= 1.0は、ページの負荷を確実にするために、1：1の比率プレゼンテーションでは、スケーリングは行われません。

モバイルデバイスのブラウザでは、 ユーザースケーラブル追加することで、=無ビューポートのメタタグのためにそのスケーリング（ズーミング）機能を無効にします。 一般的に、最大規模= 1.0およびユーザースケーラブル=なし一緒に。このズーム機能が無効になった後、ユーザは、画面をスクロールすることができ、あなたのサイトがより多くのネイティブアプリケーションの感触のように見えるようにすることができます。このように、我々はすべてのサイトの使用はお勧めしません、またはあなた自身の状況に依存する、ということに注意してください！

対応する画像

IMG-応答クラスを追加することにより、より友好的である応答性のレイアウトをサポートするために、ブートストラップ3枚の画像をすることができます。このクラスを見てみましょうすると、このプロパティは、CSSものが含まれています。 ;高さ：100％：その本質は、max-幅イメージを与えることです自動;プロパティは親要素のサイズを超えない、イメージスケーリングを可能にします。

.imgの応答{
  表示：インラインブロック;
  高さ：自動;
  max-width：100％;
}

これは、関連する画像は、 インラインブロックとしてレンダリングすることを示しています。あなたは要素の表示プロパティを設定するとインラインブロック、その周囲のプレゼンテーションフォームの内容に関してはインライン要素ですが、インライン差でこのケースでは、我々は、幅と高さを設定することができるということです。

設置高さ：高さの自動、関連する要素は、ブラウザによって異なります。

設定の最大幅は 100％widthプロパティで指定された任意の幅を上書きします。これは、写真がより友好的である応答性のレイアウトをサポートすることができます。

グローバルディスプレイ、レイアウトとリンク

3ブートストラップ本体{マージン：0;}使用して余白の体を除去すること。

関連する体の次のセットを考えてみましょう

体{
  フォントファミリ： "ヘルベチカノイエ」、ヘルベチカ、Arialの、サンセリフ;
  フォントサイズ：14px;
  行の高さ：1.428571429;
  色：＃333333;
  背景色：#FFFFFF;
}

ボディ「ヘルベチカノイエ」、ヘルベチカ、Arialのためのデフォルトのフォントスタイルを設定するための最初のルール、サンセリフ体。

14ピクセルのデフォルトのフォントサイズのテキストの二番目のルール。

3番目のルールは、デフォルトの行の高さが1.428571429で設定することです。

第四の規則は、＃333333にデフォルトのテキストの色を設定します。

最終規則は、デフォルトの背景色が白で設定します。

リンク、次の設定のデフォルトスタイル

A：ホバー、
A：フォーカス{
  色：＃2a6496;
  テキスト装飾：下線;
}

A：フォーカス{
  概要：細い点線＃333;
  概要：5pxのオート-webkit-フォーカスリング色。
  アウトライン・オフセット：-2px。
}

マウスがリンクの上に置いたり、クリックしてリンクするときに、色は＃2a6496に設定されています。同時に、アンダースコアがあります。

また、クリックしたリンクは、細い破線のアウトライン＃333用のカラーコードが存在することになります。別のルールは広い5ピクセルにアウトラインを設定することである、とのWebKitベースのブラウザのために-webkit-フォーカスリング色のブラウザ拡張を持っています。輪郭オフセットは、-2ピクセルに設定されています。

これらのスタイルのすべてがscaffolding.lessで見つけることができます。

クロスブラウザの不整合を避けます

3ブートストラップ、その前のバージョンと同様に、クロスブラウザの一貫性を作成するには、ノーマライズを使用します。

コンテナ

パッケージのページのコンテンツをコンテナクラスのブートストラップ3。 それでは、以下のクラスを見てみましょう

.container {
  マージン右：自動;
  余白左：自動;
}

上記のコードにより、ブラウザでコンテナの左右の余白が決めます。

.container：前に、
.container：後の{
  ディスプレイ：テーブル。
  内容： "";
}

これは、擬似要素を生成します。表示 テーブルを設定し、それが匿名テーブルセルと新しいブロック書式コンテキストを作成します。 ：floatをクリアするために擬似要素の後にマージンの崩壊を,:防止するための擬似要素の前に 。

conteneditable属性がHTMLで表示された場合は、オペラのバグのいくつかあるため、これらの要素の周りの空間を作成します。これは、 コンテンツを使用して行うことができます： ""修復するために。

.container：後の{
  クリア：両方;
}

これは、擬似要素を作成し、すべての要素が含まれているすべての浮動容器ことを保証します。

3 CSSメディアクエリーに応答してアプリケーションを有するブートストラップ、異なるしきい値のメディアクエリーは、グリッドシステムを一致させるために、容器の最大幅を設定しています。

前：プロフィールブートストラップ

次へ：グリッドシステムのブートストラップ

Bootstrap コース

Bootstrap CSS

Bootstrap レイアウトコンポーネント

Bootstrap ウィジェット

Bootstrap 他の