http://v3.bootcss.com/css/#less-mixins-utility

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

复制
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   ...
  4. </html>

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

复制
  1. <meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

复制
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

  • 为 body 元素设置 background-color: #fff;
  • 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数
  • 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

复制
  1. <div class="container">
  2.   ...
  3. </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

复制
  1. <div class="container-fluid">
  2.   ...
  3. </div>

栅格系统

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）来创建关键的分界点阈值。

复制
  1. /* 超小屏幕（手机，小于 768px） */
  2. /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
  4. /* 小屏幕（平板，大于等于 768px） */
  5. @media (min-width: @screen-sm-min) { ... }
  7. /* 中等屏幕（桌面显示器，大于等于 992px） */
  8. @media (min-width: @screen-md-min) { ... }
  10. /* 大屏幕（大桌面显示器，大于等于 1200px） */
  11. @media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

复制
  1. @media (max-width: @screen-xs-max) { ... }
  2. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  3. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  4. @media (min-width: @screen-lg-min) { ... }

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

使用单一的一组 .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
复制
  1. <div class="row">
  2.   <div class="col-md-1">.col-md-1</div>
  3.   <div class="col-md-1">.col-md-1</div>
  4.   <div class="col-md-1">.col-md-1</div>
  5.   <div class="col-md-1">.col-md-1</div>
  6.   <div class="col-md-1">.col-md-1</div>
  7.   <div class="col-md-1">.col-md-1</div>
  8.   <div class="col-md-1">.col-md-1</div>
  9.   <div class="col-md-1">.col-md-1</div>
  10.   <div class="col-md-1">.col-md-1</div>
  11.   <div class="col-md-1">.col-md-1</div>
  12.   <div class="col-md-1">.col-md-1</div>
  13.   <div class="col-md-1">.col-md-1</div>
  14. </div>
  15. <div class="row">
  16.   <div class="col-md-8">.col-md-8</div>
  17.   <div class="col-md-4">.col-md-4</div>
  18. </div>
  19. <div class="row">
  20.   <div class="col-md-4">.col-md-4</div>
  21.   <div class="col-md-4">.col-md-4</div>
  22.   <div class="col-md-4">.col-md-4</div>
  23. </div>
  24. <div class="row">
  25.   <div class="col-md-6">.col-md-6</div>
  26.   <div class="col-md-6">.col-md-6</div>
  27. </div>

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

复制
  1. <div class="container-fluid">
  2.   <div class="row">
  3.     ...
  4.   </div>
  5. </div>

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-*和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
复制
  1. <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  2. <div class="row">
  3.   <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  4.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  5. </div>
  7. <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  8. <div class="row">
  9.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  10.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  11.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  12. </div>
  14. <!-- Columns are always 50% wide, on mobile and desktop -->
  15. <div class="row">
  16.   <div class="col-xs-6">.col-xs-6</div>
  17.   <div class="col-xs-6">.col-xs-6</div>
  18. </div>

在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
复制
  1. <div class="row">
  2.   <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <div class="row">
  6.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8.   <!-- Optional: clear the XS cols if their content doesn\'t match in height -->
  9.   <div class="clearfix visible-xs-block"></div>
  10.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
复制
  1. <div class="row">
  2.   <div class="col-xs-9">.col-xs-9</div>
  3.   <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  4.   <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  5. </div>

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

.col-xs-6 .col-sm-3 
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
复制
  1. <div class="row">
  2.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  3.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  5.   <!-- Add the extra clearfix for only the required viewport -->
  6.   <div class="clearfix visible-xs-block"></div>
  8.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  9.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  10. </div>

除了列在分界点清除响应， 您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。

复制
  1. <div class="row">
  2.   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  3.   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
  4. </div>
  6. <div class="row">
  7.   <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  8.   <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
  9. </div>

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
复制
  1. <div class="row">
  2.   <div class="col-md-4">.col-md-4</div>
  3.   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>
  5. <div class="row">
  6.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  7.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  8. </div>
  9. <div class="row">
  10.   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  11. </div>

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
复制
  1. <div class="row">
  2.   <div class="col-sm-9">
  3.     Level 1: .col-sm-9
  4.     <div class="row">
  5.       <div class="col-xs-8 col-sm-6">
  6.         Level 2: .col-xs-8 .col-sm-6
  7.       </div>
  8.       <div class="col-xs-4 col-sm-6">
  9.         Level 2: .col-xs-4 .col-sm-6
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
复制
  1. <div class="row">
  2.   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3.   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。

复制
  1. @grid-columns:              12;
  2. @grid-gutter-width:         30px;
  3. @grid-float-breakpoint:     768px;

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

复制
  1. // Creates a wrapper for a series of columns
  2. .make-row(@gutter: @grid-gutter-width) {
  3.   // Then clear the floated columns
  4.   .clearfix();
  6.   @media (min-width: @screen-sm-min) {
  7.     margin-left:  (@gutter / -2);
  8.     margin-right: (@gutter / -2);
  9.   }
  11.   // Negative margin nested rows out to align the content of columns
  12.   .row {
  13.     margin-left:  (@gutter / -2);
  14.     margin-right: (@gutter / -2);
  15.   }
  16. }
  18. // Generate the extra small columns
  19. .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  20.   position: relative;
  21.   // Prevent columns from collapsing when empty
  22.   min-height: 1px;
  23.   // Inner gutter via padding
  24.   padding-left:  (@gutter / 2);
  25.   padding-right: (@gutter / 2);
  27.   // Calculate width based on number of columns available
  28.   @media (min-width: @grid-float-breakpoint) {
  29.     float: left;
  30.     width: percentage((@columns / @grid-columns));
  31.   }
  32. }
  34. // Generate the small columns
  35. .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  36.   position: relative;
  37.   // Prevent columns from collapsing when empty
  38.   min-height: 1px;
  39.   // Inner gutter via padding
  40.   padding-left:  (@gutter / 2);
  41.   padding-right: (@gutter / 2);
  43.   // Calculate width based on number of columns available
  44.   @media (min-width: @screen-sm-min) {
  45.     float: left;
  46.     width: percentage((@columns / @grid-columns));
  47.   }
  48. }
  50. // Generate the small column offsets
  51. .make-sm-column-offset(@columns) {
  52.   @media (min-width: @screen-sm-min) {
  53.     margin-left: percentage((@columns / @grid-columns));
  54.   }
  55. }
  56. .make-sm-column-push(@columns) {
  57.   @media (min-width: @screen-sm-min) {
  58.     left: percentage((@columns / @grid-columns));
  59.   }
  60. }
  61. .make-sm-column-pull(@columns) {
  62.   @media (min-width: @
版权声明：本文为zkwarrior原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zkwarrior/p/4839697.html