Bootstrap源码之旅-Less-wells.less

Bootstrap使用well给元素插入的效果，在视觉上 好像是嵌入进去的。
来看下它的样式代码：

//// Wells// --------------------------------------------------// Base class.well {  min-height: 20px;  padding: 19px;  margin-bottom: 20px;  background-color: @well-bg;  border: 1px solid @well-border;  border-radius: @border-radius-base;  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));  blockquote {    border-color: #ddd;    border-color: rgba(0,0,0,.15);  }}// Sizes.well-lg {  padding: 24px;  border-radius: @border-radius-large;}.well-sm {  padding: 9px;  border-radius: @bordr-radius-small;}

可以看到真的很简单！well有有三个尺寸：小，正常和大。这三个规格的区别也只是padding和圆角半径的大小不同而已，别的再没有不同了。下面我们详细看下.well
它用到了一些通用的变量，比如@border-radius-base，和well相关的变量，比如@well-bg和@well-border。如下(取自variables.less文件)

//== Wells////##@well-bg:                     #f5f5f5;@well-border:                 darken(@well-bg, 7%);

其中还重新设置了well内部的blockquote的样式，主要是边框的颜色。其实在type.less文件中，已经给blockquote定义了一些基本的样式，给blockquote加上了左边框。我们把type.less中的blockquote拿来一并看了吧

// Blockquotesblockquote {  padding: (@line-height-computed / 2) @line-height-computed;  margin: 0 0 @line-height-computed;  font-size: @blockquote-font-size;  border-left: 5px solid @blockquote-border-color;  p,  ul,  ol {    &:last-child {      margin-bottom: 0;    }  }  // Note: Deprecated small and .small as of v3.1.0  // Context: https://github.com/twbs/bootstrap/issues/11660  footer,  small,  .small {    display: block;    font-size: 80%; // back to default font-size    line-height: @line-height-base;    color: @blockquote-small-color;    &:before {      content: '\2014 \00A0'; // em dash, nbsp    }  }}

• @font-size-base，这是Bootstrap设置的全局字体的大小，是14px。除非另外设置，一般的字体都是14px。
• @line-height-base，行高跟字体大小的比例，1.428571429; // 20/14。。
• @line-height-computed就是根据@font-size-base和@line-height-base计算出来的行高，是它们两个的乘积
• @blockquote-font-size=@font-size-base*1.25，比一般的字体要大点

这样看下来，不论是well还是blockquote，主要就是设置了下盒子模型中的一些属性，让它们看起来更好看。我在想，到底没有必要这样一个一个看下去。感觉看了我也记不住呀！！！

我要的是通过Bootstrap学习设计的一些好的思想，而不是死记硬背它某个元素的padding值。。。那咋办？？哎呀，痛苦呀。。