レスポンシブデザインブートストラップ
簡単な紹介
このチュートリアルでは、レスポンシブデザインにページレイアウトを使用する方法を示しています。 コースでは、レスポンシブWebデザインを学びます。 モバイル機器の普及により、どのようにユーザーが既に避けられない問題であり、良好な視覚効果を得るためにあなたのサイトにモバイルデバイスを介して参照できます。 応答Webデザインは、この目的を達成するための有効な方法です。
レスポンシブWebデザインとは何ですか
レスポンシブWebデザインは、ユーザーがサイトに良い視覚効果を閲覧するためにデバイスの様々なサイズにアクセスできるようにすることです。 たとえば、Webサイトにアクセスし、スマートフォン上で閲覧するコンピュータのモニタに、スマートフォンの画面サイズは、コンピュータのモニタよりもはるかに小さいですが、そのサイトを表す、ユーザーエクスペリエンスとの間の差はほぼ同じであると感じませんでした応答デザインで良い仕事をしていません。
私たちは持っているの流体レイアウト例のアプリケーション応答性能を 、そしてさまざまな画面サイズで閲覧していただけます。 あなたが使用することができますクロムまたはFirefoxは 、ブラウザのウィンドウサイズの変更展開を調整します。
こちらをクリックして、あなたが見ることができるブートストラップ応答デザイン例 。
レスポンシブWebデザインワークス
適用するために、レスポンシブWebデザインは、あなたはスタイルが含まれるCSSのサイズに適応するための様々なデバイスを作成する必要があります。 ページが特定のデバイスにロードされると、デバイスのビューポートのサイズの最初のテストとなり、このようなメディアクエリ（メディアクエリ）、今回のようにページやWeb開発技術上のフォントのさまざまなを使用して、[スタイルのデバイス固有のがロードされます。
レスポンシブWebデザインCSSの深さの研究
私たちは、「レスポンシブデザイン」を学ぶ方法を学ぶ「ブートストラップ・responsive.css「意志ニュアンスを達成することです。 これに先立って、ページのヘッダ領域に次のコード行を追加する必要があります。
<メタ名=「ビューポート」コンテンツ= "幅=デバイス幅、初期スケール= 1.0">
ビューポートメタタグは、デフォルトのビューポートを無効にして、特定のスタイル関連のビューポートをロードするのに役立ちます。
画面幅にwidthプロパティ。 それは、このような320のように、値が含まれている320ピクセル、または元の解像度を使用するようにブラウザに指示するために使用される「デバイス幅」の値を表します。
最初のスケールのプロパティは、最初のビューポートの比率です。 1.0に設定すると、デバイスは元の幅が表示されます。
次のようにもちろん、あなたは、ブートストラップ応答CSSを追加する必要があります。
<リンクのhref = "資産/ CSS /ブートストラップ-responsive.css"のrel = "スタイルシート">
あなたが応答CSSファイルを見つけた場合さて、あなたは（行番号10-22から）戻っていくつかの公式声明でそれを見つけるだろう、地域の様々な'@media'が始まりました。 これは、さまざまなデバイスに適したスタイルを記述する方法です。
「@media（最大幅：480PXへの第一の領域は）「 480ピクセルスタイルのデバイス設定の最大幅として始まりました。
「@media（最大幅：767pxに第2の領域が）「 767ピクセルスタイルのデバイス設定の最大幅として始まりました。
第3領域」@media（最小幅：768px ） および（最大幅：979px）」768ピクセルの最小幅979ピクセルスタイルのデバイス設定の最大幅としてスタートしました。
次の領域は、デバイス設定のスタイル979ピクセルの最大幅です。 ：だから、 '@media（979px最大幅である）」を開始します。
最後の二つの領域、それぞれ'（分幅：980px @media ）' と'（最小幅：1200px @media ）」を開始、デバイスがスタイルで980ピクセルの最小幅に設定される前に、後者が最も小さいです幅は、デバイス1200ピクセルのスタイルを設定します。
したがって、このスタイルシートの基本的な役割は、最大幅とデバイスの最小の幅に応じて使用されるスタイルを決定するために「分幅'と'のmax-width 'プロパティを使用することです。
説明
レイアウトはより敏感にするために、ブートストラップは、3つのことを実行します。
1.グリッド内の列の幅を変更します。
2.限り、必要があるとして、それはむしろ浮動要素よりも、スタックの要素を使用しています。 あなたはスタック要素が何であるかわからない場合は、w3.orgから以下のフォームはいくつかの助けを提供することができます。
ルート要素（HTML）は、スタックのルートコンテキストを形成するために、他のスタックコンテキストの生成任意の要素の配置によって（相対的に位置付け要素を含むが、代わりに「オート」の値を算出した「Zインデックス」があります）。 ブロックへの相対的なコンテキストスタックは必要ありません含まれています。
3.正しくそのサイズのタイトルとテキストをレンダリングします。
モバイルデバイスフレンドリーなレイアウトのための迅速な開発
ブートストラップクラスは、モバイルフレンドリーなレイアウトの開発のためのいくつかの有用なを持っています。 これらのクラスは、上の「responsive.less」に見ることができます。
デフォルトでデスクトップから隠され.visible電話、視界から隠さ979px 768pxにタブレットに電話で767pxの幅や見えにくいです、、。
.visible-タブレット、767pxの隠された携帯電話の下の幅が979pxプレート上で可視768pxに、デスクトップ上に表示されていないがデフォルトである、非表示にするには、表示されません。
767pxの幅にし、電話の下に隠れ.visible-デスクトップは、目に見える見えない979px 768pxにタブレットに隠され、デフォルトでデスクトップ上で表示されません。
.hidden電話、767pxの幅と、次の携帯電話に非表示がデフォルトになり、デスクトップ上に見える可視979px 768pxにタブレット、上、表示されません。
デフォルトでデスクトップ上に見える見えない隠さ979px 768pxにタブレット、上、電話で、767pxの幅と見えにくく-タブレットを.hidden。
.hidden-デスクトップ、767pxの幅で、デフォルトでデスクトップから隠されて見え979px 768pxにタブレット、上の電話の認知度以下。
すべてのHTML、CSS、JSと画像ファイルを使用するためのチュートリアルをダウンロードするには、ここをクリックしてください。