一，栅格系统大致有以下：
1，行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，一行有12列
2.“列（column）”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4
通过列设置padding属性，通过为.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding
3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类
二，媒体查询
/* 超小屏幕（手机，小于 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 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container 最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是例子：
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>效果：小屏 中屏 某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix和响应式工具类*如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。 四，响应式工具类通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px).visible-xs-*可见隐藏隐藏隐藏.visible-sm-*隐藏可见隐藏隐藏.visible-md-*隐藏隐藏可见隐藏.visible-lg-*隐藏隐藏隐藏可见.hidden-xs隐藏可见可见可见.hidden-sm可见隐藏可见可见.hidden-md可见可见隐藏可见.hidden-lg可见可见可见隐藏从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
类组CSS display.visible-*-blockdisplay: block;.visible-*-inlinedisplay: inline;.visible-*-inline-blockdisplay: inline-block;因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。
和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
class浏览器打印机.visible-print-block.visible-print-inline.visible-print-inline-block隐藏可见.hidden-print可见隐藏.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了 <table> 相关元素的特殊情况外。
转载于:https://www.cnblogs.com/937522zy/p/5008173.html
