Bootstrap学習ノート

1.Bootstrapで作成したページの先頭にHTML 5のドキュメントタイプ(Doctype)を使用しない場合、ブラウザの表示が一致しない問題に直面したり、特定のシナリオで一致しないことに直面したりして、コードがW 3 C標準の検証を通過できない可能性があります.
2.モバイルデバイス優先はBootstrap 3の最も顕著な変化であり、Bootstrap 3の設計目標はモバイルデバイス優先であり、次いでデスクトップデバイスである.これは、モバイルデバイスを使用するユーザーが増えているため、実際には非常にタイムリーな転換です.Bootstrapが開発したウェブサイトがモバイルデバイスに友好的で、適切な描画とタッチスクリーンのスケールを確保するために、ウェブページのheadにviewport metaラベルを追加する必要があります.以下に示します.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

widthプロパティはデバイスの幅を制御します.Webサイトが異なる画面解像度のデバイスで閲覧されると仮定すると、デバイス-widthに設定すると、異なるデバイスに正しく表示されることを確認できます.
initial-scale=1.0 Webページのロード時に1:1の割合で表示され、スケールが発生しないことを確認します.
3.Bootstrapは、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大12列に分けられる応答型、モバイルデバイス優先のストリーミンググリッドシステムを提供します.
グリッドシステムは、コンテンツを含む一連の行と列によってページレイアウトを作成します.Bootstrapグリッドシステムがどのように動作するかを以下に示します.

行は必ず置かなければならない.container class内で、適切な位置合わせ(alignment)と内マージン(padding)を得る.

行を使用して、列の水平グループを作成します.

コンテンツは、カラム内に配置され、カラムのみが行の直接サブエレメントであってもよい.

で定義メッシュクラス、例えば.rowと.col-xs-4は、グリッドレイアウトを迅速に作成するために使用できます.LESSブレンドクラスは、より多くの意味レイアウトに使用できます.

列は、内部余白によって列内容間のギャップを作成する.この内マージンは通過する.rows上の外側距離(margin)は負で、第1列と最後の列の行オフセットを表します.

グリッドシステムは、横断する12の使用可能な列を指定することによって作成されます.例えば、3つの等しい列を作成するには、3つを使用する.col-xs-4.