关于bootstrap:Bootstrap的栅格参数

Bootstrap 提供了一套响应式、挪动设施优先的流式栅格零碎，随着屏幕或视口（viewport）尺寸的减少，零碎会主动分为最多 12 列。它蕴含了易于应用的预约义类，还有弱小的 mixin 用于生成更具语义的布局

简介

栅格零碎用于通过一系列的行（row）与列（column）的组合来创立页面布局，你的内容就能够放入这些创立好的布局中。上面就介绍一下 Bootstrap 栅格零碎的工作原理：

• “行（row）”必须蕴含在 .container（固定宽度）或 .container-fluid（100% 宽度）中，以便为其赋予适合的排列（aligment）和内补（padding）。
• 通过“行（row）”在程度方向创立一组“列（column）”。
• 你的内容该当搁置于“列（column）”内，并且，只有“列（column）”能够作为行（row）”的间接子元素。
• 相似 .row 和 .col-xs-4 这种预约义的类，能够用来疾速创立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来创立语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创立列与列之间的距离（gutter）。通过为 .row 元素设置负值 margin 从而对消掉为 .container 元素设置的 padding，也就间接为“行（row）”所蕴含的“列（column）”对消掉了 padding。
• 负值的 margin 就是上面的示例为什么是向外突出的起因。在栅格列中的内容排成一行。
• 栅格零碎中的列是通过指定 1 到 12 的值来示意其逾越的范畴。例如，三个等宽的列能够应用三个 .col-xs-4 来创立。
• 如果一“行（row）”中蕴含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类实用于与屏幕宽度大于或等于分界点大小的设施，并且针对小屏幕设施笼罩栅格类。因而，在元素上利用任何 .col-md-* 栅格类实用于与屏幕宽度大于或等于分界点大小的设施，并且针对小屏幕设施笼罩栅格类。因而，在元素上利用任何 .col-lg-* 不存在，也影响大屏幕设施。

通过钻研前面的实例，能够将这些原理利用到你的代码中。

媒体查问

在栅格零碎中，咱们在 Less 文件中应用以下媒体查问（media query）来创立要害的分界点阈值。

复制

/* 超小屏幕（手机，小于 768px）*//* 没有任何媒体查问相干的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是挪动设施优先的吗？）*/ /* 小屏幕（平板，大于等于 768px）*/@media (min-width: @screen-sm-min) {...} /* 中等屏幕（桌面显示器，大于等于 992px）*/@media (min-width: @screen-md-min) {...} /* 大屏幕（大桌面显示器，大于等于 1200px）*/@media (min-width: @screen-lg-min) {...}

咱们偶然也会在媒体查问代码中蕴含 max-width 从而将 CSS 的影响限度在更小范畴的屏幕大小之内。

复制

@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) {...}

栅格参数

通过下表能够具体查看 Bootstrap 的栅格零碎是如何在多种屏幕设施上工作的。

实例：从重叠到程度排列

应用繁多的一组 .col-md-* 栅格类，就能够创立一个根本的栅格零碎，在手机和平板设施上一开始是重叠在一起的（超小屏幕到小屏幕这一范畴），在桌面（中等）屏幕设施上变为程度排列。所有“列（column）必须放在”.row 内。

col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
.col-md-8 .col-md-4
.col-md-4 .col-md-4 .col-md-4
.col-md-6 .col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>