適応：いいえ、ありませんラップにしてみてくださいどのように大画面の問題が、唯一の水平方向のスケーリング。
応答：;大画面、行と同じ列の同じ行に存在する元素小さく、同じ行の要素は、明示的な右エレメント列ラップを押された後の画面。
これは、最初にインストールし使用して、jqueryのjqueryのブートストラップに依存しています。
適応機能のブートストラップの基礎は「フェンス」モード、フォームのランク分割するブラウザである：12の合計、カスタム行の数は、表示したい素子によれば、必要とされる表示素子の各行のサイズを決定しますそれが範囲を超えた場合の数は、それが自動的に切り替わります。各カラムのサイズはブートストラップは、自動的に現在のブラウザの平均サイズに応じて割り当てられます。
<DIV CLASS = "COL-SM-4 COL-MD-1"> </ div>
<DIV CLASS = "COL-SM-4 COL-MD-1"> </ div>
</ div>
モバイルデバイスの優先順位
ブートストラップ2では、我々は、フレームワークの特定のキーパーツのモバイルデバイスに優しいスタイルに加えます。ブートストラップ3では、我々はそのため、モバイルの起動デバイスに優しい、フレーム全体を書き直しました。これは単に、モバイルデバイス用の代替スタイルの数を増やしますが、直接コアフレームワークに統合されていません。換言すれば、ブートストラップは、モバイルデバイスの優先順位です。代わりに余分なファイルを追加したフレームの隅々に変換するモバイルデバイス統合のスタイルのために。
組版とリンク
ブートストラップのレイアウト、スタイル設定は、基本的なグローバルスタイルをリンクします。彼らは以下のとおりです。
- するために、
body要素を設定 - 使用
@font-family-base、@font-size-baseおよび@line-height-base基本的なパラメータ組版などの変数 - すべてのリンクのための基本的な色を設定し
@link-colorて、リンクがあるとき:hoverにのみ下線状態
これらのスタイルはにすることができ scaffolding.less 、対応するソースファイルを見つけること。
レイアウトコンテナ
ページコンテンツとのためのグリッドシステムをラップするためにブートストラップの必要性 .container の容器。私たちは、このクラスの便利な2を提供します。以降、なお padding 他の理由のプロパティ、二つの容器が互いに入れ子にすることができます。
.container レイアウトに応じて、容器を固定して支持するためのクラス幅。
<のdivクラス= "コンテナ"> ... </ div>
.container-fluid クラスの幅の100％は、容器の全体のビューポート（ビューポート）を占めます。
<のdivクラス=「コンテナ流体」> ... </ div>
グリッドシステム
ブートストラップは、スクリーンまたはビューポート（ビューポート）サイズの増加に応答して、モバイルデバイスの優先ストリーミンググリッドシステムを提供する、システムは自動的に12の最大に分割されます。それは、使いやすい含まあらかじめ定義されたクラスだけでなく、強力な、より意味的なレイアウトを生成するためのミックスインを。
簡単な紹介
グリッド・システムは、一連の行（行）とカラム（列）を組み合わせることにより、ページレイアウトを作成するために使用され、これらの内容は良いレイアウトを作成置くことができます。ここでは、ブートストラップグリッドシステムの作品を紹介します：
- 「行（行）」に含まれなければならない
.container（固定幅）または.container-fluid（幅の100％）（aligment）に適した構成を付与するために、補体（パディング）。 - 「ライン（行）」水平方向のグループ「の欄（カラム）」を作成することによって。
- コンテンツは、「カラム（欄）」、及び線としてのみ「の列（カラム）」（行）「直接の子要素に格納されるべきです。
- 同様に
.rowして.col-xs-4、この事前に定義されたクラスはすぐにグリッドレイアウトを作成するために使用することができます。ソースで定義されたミックスインのブートストラップは、意味的なレイアウトを作成するために使用することができます。 - 「カラム（欄）」によって設定
paddingカラムとカラムの間の間隔（樋）を作成し、プロパティを。それによってある.row負要素設定margin相殺するために、.container要素のセットをpadding、それが間接的に「ライン（行）」に含まれる「カラム（欄）」を相殺しますpadding。 - 負のマージンは、以下の例では、外側に突出している理由です。行のグリッド列のコンテンツ。
- カラムグリッドシステムは1から12までの範囲で、指定値によって表されます。例えば、等しい幅の3つの列は、3つを使用することができる
.col-xs-4作成します。 - 「カラム（欄）」に含まれる「行（行）が」12より大きい場合、要素の過剰「の列（カラム）」は、他の行配列から全体的に配置されます。
- クラスは、よりラスタ幅より大きいために使用されるか、ポイントカットオフデバイスの画面サイズに等しく、小画面装置用グリッド型を覆っています。従って、内の任意の要素のアプリケーション
.col-md-*グリッドカテゴリ以上のカットオフデバイスのポイントの大きさに等しい幅の画面に適用され、小画面用のグリッドベースのデバイスをカバーします。したがって、素子上の任意のアプリケーションが.col-lg-*存在しないだけでなく、大画面デバイスに影響を与えます。
背後からのケーススタディでは、これらの原則は、あなたのコードに適用することができます。
報道関係お問い合わせ先
グリッドシステムでは、我々はより少ないファイルに次のメディアクエリー（メディアクエリ）を使用して、重要な境界点のしきい値を作成します。
/ *超小型スクリーン（携帯電話、未満768px）* /
/ *これは（ブートストラップが好まモバイルデバイスであることを覚えている？）デフォルトのブートストラップですので、コードを関連するあらゆるメディアからの問い合わせをお持ちでません* /
/ *小さな画面（フラット、以上768px）* /
@media（最小幅：画面-SM-分@）{...}
/ *中画面（デスクトップモニタ、以上で992px）* /
@media（最小幅：画面MD-分@）{...}
/ *画面（大デスクトップモニター、以上で1200px）* /
@media（最小幅：画面-LG-分@）{...}
私たちは時折、メディアクエリコードに含まれる max-width の小さな画面サイズの範囲内でCSSの影響を制限するため。
@media（最大幅：@画面-XS-MAX）{...}
@media（最小幅：@画面-SM-分）および（最大幅：@画面-SM-MAX）{...}
@media（最小幅：@画面MD-分）および（最大幅：@画面MD-MAX）{...}
@media（最小幅：画面-LG-分@）{...}
グリッドパラメータ
どのように次の表はブートストラップグリッドシステムの詳細図は、画面のさまざまなデバイス上で動作することができます。
| 超小型画面 の携帯電話（<768px） | 小さなスクリーン タブレット（≥768px） | ミディアムスクリーン デスクトップモニタ（≥992px） | 大画面 の大きなデスクトップモニタ（≥1200px） | |
|---|---|---|---|---|
| グリッド・システムの挙動 | 常には、水平に配置され | 最初に複数の閾値Cよりも水平配置になったときに、積層 | ||
.container 最大幅 |
なし（自動） | 750px | 970px | 1170px |
| クラス接頭辞 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| カラム（列）数 | 12 | |||
| 最大カラム（列）幅 | オートマチック | 〜62px | 〜81px | 〜97px |
| 溝（樋）ワイド | 30px（各列は15ピクセルの周りにあります） | |||
| ネスト可能 | それはあります | |||
| オフセット（オフセット） | それはあります | |||
| 列の並べ替え | それはあります | |||
例：スタックから水平配列に
単一セットの使用 .col-md-* （この範囲は、小さな画面に、超小型スクリーン）のグリッドクラスを、あなたは基本的なグリッドシステムを作成することができ、携帯電話やタブレットデバイスに始まる一緒に積層され、デスクトップ（中）画面これは、デバイス上に水平配置になります。すべての「列（列）が上でなければなりません」 .row 内部。
列オフセット
使用 .col-md-offset-* クラスは、右の列にシフトすることができます。これらのクラスは、実際によって使用される * 現在の要素の選択が増加左マージン（余白）。例えば、.col-md-offset-4 クラス .col-md-4 構成要素4は、右の列（カラム）の幅をシフト。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>あなたはまたと下部グリッド階層からのオフセットを上書きすることができます .col-*-offset-0 クラス。
<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>ネストコラム
再度、ネストされたコンテンツになります内蔵のグリッドシステムを使用するためには、新たに追加することができます .row 要素と、一連の .col-sm-* 既存の要素に .col-sm-* 要素内を。カラム（列）の数は、（実際には、あなたが12を埋めるために持っている必要はありません）、ネストされた行（行）が12以上含めることはできませんです。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>列の並べ替え
使用することにより .col-md-push-* 、および .col-md-pull-* クラスは簡単に列の順序を変更することができます（列）があります。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>