4.20　洼地

源码文件：wells.less

CSS文件：bootstrap.css 5046行之后

洼地（Well）样式的效果和大屏幕展播Jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。源码如下：

  1. // 源码5046行
  2. .well {
  3.   min-height: 20px;             /*最小高度设置为20像素*/
  4.   padding: 19px;                        /*内边距设置*/
  5.   margin-bottom: 20px;          /*底部外边距为20像素*/
  6.   background-color: #f5f5f5;    /*背景色为灰色*/
  7.   border: 1px solid #e3e3e3;    /*设置边框*/
  8.   border-radius: 4px;           /*设置圆角*/
  9.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);  /*阴影*/
  10.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  11. }
  12. .well blockquote {
  13.   border-color: #ddd;           /*如果有引用的话，加深引用的边框颜色*/
  14.   border-color: rgba(0, 0, 0, .15);
  15. }

well样式的使用方法也非常简单。示例代码如下：

  1. <div class="well">
  2.     <p>Some default panel. </p>
  3.     <blockquote>注意，这里是引用内容！</blockquote>
  4. </div>

上述示例的运行效果如图4-97所示。

4.20　洼地 - 图1 图4-97　well运行效果

另外，well样式也提供了不同大小的样式（主要是panding和圆角大小），分别是：well-lg和well-sm。使用时，直接和well一起应用在同一个元素上即可。

  1. // 源码5060行
  2. .well-lg {
  3.   padding: 24px;                        /*加大内边距*/
  4.   border-radius: 6px;           /*加大圆角设置*/
  5. }
  6. .well-sm {
  7.   padding: 9px;                 /*减少内边距*/
  8.   border-radius: 3px;           /*减少圆角设置*/
  9. }

类似的，读者也可以改造well，让well支持不同颜色的显示（比如边框和背景色的变化），样式如well-success、well-info一样，请读者自行练习。