我们先来给不同的价目表的表头和 Sign up Now! 按钮添加预期的颜色。在客户给我们的设计图中，Basic 是蓝色，Premium 是绿色，Pro 是红色。下面我们将选择好的颜色值指定给三级品牌色：
@brand-primary: #428bca; @brand-secondary: #5cb85c; @brand-tertiary: #d9534f;
设置完颜色变量，就可以将它们应用给适当的表头和按钮：
(1) 在这里我们先给 .package-basic 表应用主品牌色 @brand-primary：
#signup .package-basic table{ thead th { background-color: @brand-primary; } } ...
(2) 然后再把主品牌色应用给表格里的按钮。这里，我们使用 bootstrap/mixins.less 中定义的 .button-variant() 混入给 :hover 和 .active 状态应用样式。这个混入函数接受三个参数：颜色、背景颜色和边框颜色。代码如下：
#signup .package-basic table{ ... .btn { .button-variant(#fff; @brand-primary; darken(@brand-primary, 5%)); } }
编译后，这个简洁的混入函数就会给按钮及其悬停、活动状态生成对应的样式了。
(3) 接着，我们对其它两个表格重复上述过程：
#signup .package-premium table { thead th { background-color: @brand-secondary; } .btn { .button-variant(#fff; @brand-secondary; darken(@brand-secondary, 5%)); } } #signup .package-pro table { thead th { background-color: @brand-tertiary; } .btn { .button-variant(#fff; @brand-tertiary; darken(@brand-tertiary, 5%)); } }
现在表格的效果如下：
9.5 适配小视口
由于 Bootstrap 3 对响应式设计的重视，我们的表格在视口断点时都表现得很好。前面已经看到在中级宽度视口中表格的表现了，下面在看看各种视口的显示效果，发现显示很好，但是在大约 480~992px 之间的时候，表格会扩展到与屏幕一样宽。很明显，这个时候就太宽了，如下图所示：
因为只有三个表格，所以不可能考虑两栏布局的方案。只能限制表格宽度，并使用自动的左、右外边距使它们居中。我们使用 max-width 为 @screen-sm-max 的媒体查询，把表格的最大宽度设置为400px，再使用 .center-block() 让表格居中：
@media (max-width: @screen-sm-max) { #signup .package { max-width: 400px; .center-block(); } }
这样就可以宽度受限的表格在窗口居中了，如下：
此时，三个表格有了差异，而且具备了响应性。可是，我们希望在中、大视口，我们希望 Premium 方案能够突出。
9.6 突出重要的表格
我们要在针对中大视口的媒体查询中添加样式：
// Visually enhance the premium plan @media(min-width: @screen-md-min){ }
在这个媒体查询中，我们首先减少 Basic 和 Pro 表的宽度，再给它们添加一些上外边距，将它们向下推一下：
//Size down the basic and pro #signup .package-basic table, #signup .package-pro table { width: 90%; margin-top: 36px; }
接下来增大 Premium表的字号，并为其按钮添加内边距：
//Size up the premium #signup .package-premium table { thead th { font-size: 1.5em; h2 { font-size: 1.5em; } } a.btn { font-size: 2em; padding-top: 24px; padding-bottom: 24px; } }
这样得到的结果跟预期目标已经接近了，如下图所示：
下一个目标就是让三个表格靠近一些。为此，就要对外边距进行一些调整，在用一用 z-index 属性：
//Squeeze tables together #signup .package-basic { margin-top: -58px; margin-left: 58px; z-index: 1; } #signup .package-premium { z-index: 1000; } #signup .package-pro { margin-right: -30px; z-index: 1; }
解释下上面的规则：
□ 使用负的右外边距把（左侧的）BASIC PLAN 表向右推，同时用等量的左外边距抵消它，以保持三个表格的相对位置不变；
□ 使用负的左外边距把（右侧的）PRO PLAN 表向左推。
□ 调整所有表格的 z-index 值，让左、右两个表位于中间的表地下。
PS:关于 z-index，可以参考这篇文章：https://css-tricks.com/almanac/properties/z/z-index/
下面的屏幕截图显示了在中等宽度视口中的效果：
接下来只需要再对 Basic 表在下一个更大的断点作一调整。在上一个媒体查询后面写一个新的媒体查询：
@media (min-width: @screen-lg-min) { #signup .package-basic { margin-right: -65px; margin-left: 65px; } }
我们可以看到在1200px 及更大的视口中的效果如下：
现在，我们需要从整体上做一些修饰和调整的工作。
10.最后的调整