ブートストラップ学習ノート ブートストラップ レイアウト Method_html/css_WEB-ITnose

Bootstrap 3 は、Bootstrap コードが小さな画面デバイス (モバイル、タブレットなど) で開始され、その後、グリッド上で大きな画面デバイス (ラップトップ、デスクトップなど) にスケールされるという意味でモバイルファーストです。 。

モバイルファースト戦略

• コンテンツ
  • 何が最も重要かを決定します。
• レイアウト
  • 幅が小さいことを優先します。
  • 基本的な CSS はモバイルファーストであり、メディア クエリはタブレットとデスクトップ コンピューター用です。
• 段階的な拡張
  • 画面サイズの増加に応じて要素を追加します。

レスポンシブ グリッド システム 画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。以下に示すように:

ブートストラップ グリッド システムの仕組み

グリッド システムは、コンテンツを含む一連の行と列を通じてページ レイアウトを作成します。 Bootstrap グリッド システムの仕組みは次のとおりです。適切な配置とパディング (パディング) を得るには、

• 行を .container クラス内に配置する必要があります。
• 行を使用して、水平方向の列のグループを作成します。
• コンテンツは列内に配置する必要があり、行の直接の子要素にできるのは列のみです。
• .row や .col-xs-4 などの事前定義されたグリッド クラスを使用して、グリッド レイアウトをすばやく作成できます。よりセマンティックなレイアウトには、LESS mixin クラスを使用できます。
• 列ではパディングを使用して列の内容間にギャップを作成します。パディングは、.rows のマージンをマイナスすることによって取得され、最初と最後の列の行オフセットを表します。
• グリッド システムは、分割する 12 個の使用可能な列を指定することによって作成されます。たとえば、3 つの等しい列を作成するには、3 つの .col-xs-4 を使用します。

メディア クエリ

メディア クエリは非常に豪華な「条件付き CSS ルール」です。特定の指定された条件に基づいて一部の CSS でのみ機能します。これらの条件が満たされる場合、対応するスタイルが適用されます。

Bootstrap のメディア クエリを使用すると、ビューポート サイズに基づいてコンテンツを移動、表示、非表示にすることができます。次のメディア クエリは、ブートストラップ グリッド システムで主要なブレークポイントしきい値を作成するために LESS ファイルで使用されます。

/* 超小设备（手机，小于 768px） *//* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

CSS の影響をより狭い範囲の画面サイズに制限するために、メディア クエリ コードに max-width を含めることもあります。

@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }

メディア クエリには 2 つの部分があり、最初はデバイス仕様、次にサイズ ルールです。上記の場合、次のルールが設定されています:

次のコード行を見てみましょう:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

min-width を持つすべての場合: @screen-sm-min デバイスの場合, 画面の幅が @screen-sm-max より小さい場合、何らかの処理が行われます。

グリッド オプション

次の表は、Bootstrap グリッド システムが複数のデバイス間でどのように動作するかをまとめたものです。

	Super Small デバイスモバイル (	小型デバイスのタブレット (≥768px)	中型デバイスのデスクトップ (≥992px)	大型デバイスのデスクトップ (≥1200px) th>
グリッドの動作	常に水平	折り畳んで開始、ブレークポイントの上で水平 td>	折り畳んで開始、およびブレークポイントの上で水平になります	折り目から開始し、ブレークポイントの上で水平になります
コンテナの最大幅 /td>	なし (自動)	750px	970px	1170px
クラスプレフィックス

超小设备手机（07dedc72e3378b4ceae0efff51aae56a..16b28748ea4df4d9c2150843fecfba68，我们将使用 .col-md-offset-3 class 来居中这个 div。 <div class="container"> <div class="row"> <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;"> <p> 测试偏移列---此处往右偏移了3列 </p> </div> </div> <div class="row"> <div class="col-xs-1" style="background: #f00">1</div> <div class="col-xs-1" style="background: #b2b0b0">2</div> <div class="col-xs-1" style="background: #ff6a00">3</div> <div class="col-xs-1" style="background: #ffd800">4</div> <div class="col-xs-1" style="background: #4cff00">5</div> <div class="col-xs-1" style="background: #0ff">6</div> <div class="col-xs-1" style="background: #0094ff">7</div> <div class="col-xs-1" style="background: #b200ff">8</div> <div class="col-xs-1" style="background: #ff00dc">9</div> <div class="col-xs-1" style="background: #ff006e">10</div> <div class="col-xs-1" style="background: #ac5050">11</div> <div class="col-xs-1" style="background: #54bd4f">12</div> </div> </div> 显示效果： 嵌套列 为了在内容中嵌套默认的网格，请添加一个新的 .row ，并在一个已有的  .col-md-* 列内添加一组  .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。 在下面的实例中，布局有两个列，第二列被分为两行四个盒子。 <div class="container"> <div class="row"> <div class="col-xs-4" style="background: #b2b0b0">第一列</div> <div class="col-xs-8" style="background: #dedef8">第二列--里面嵌套了四个DIV <div class="row"> <div class="col-xs-6" style="background: #0094ff">我是内容一<br /><br /><br /></div> <div class="col-xs-6" style="background: #b200ff">我是内容二</div> </div> <div class="row"> <div class="col-xs-6" style="background: #ff00dc">我是内容三<br /><br /><br /></div> <div class="col-xs-6" style="background: #ff006e">我是内容四</div> </div> </div> </div> </div> 显示效果： 列排序 Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。 您可以很轻易地改变带有 .col-md-push-* 和  .col-md-pull-* 类的内置网格列的顺序，其中  * 范围是从  1 到  11 。 在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和  .col-md-pull-* 类来互换这两列的顺序。 <div class="container"> <div class="row"> <div class="col-xs-4 col-md-push-8" style="background: #ff00dc">左边</div> <div class="col-xs-8 col-md-pull-4" style="background: #ff006e">右边</div> </div> </div> 显示效果：