Bootstrap源码之旅-Less-wells.less

最新推荐文章于 2023-07-11 12:15:00 发布

nothing_more_than

最新推荐文章于 2023-07-11 12:15:00 发布

阅读量582

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 源码

本文链接：https://blog.csdn.net/txyzqc/article/details/76451534

版权

Bootstrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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拿来一并看了吧

// Blockquotes
blockquote {
  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
    }
  }
}