Bootstrap3.x - 源代碼分析

參照http://v3.bootcss.com/css/ 文檔與源代碼

colors

比較全面定義總結有意義的顏色。全部uI要用的顏色，都先從已定義的讀，這樣保證樣式的同一性，並且方便之後開發主題庫。(建議想本身寫css模塊的，能夠參考一下bootstrap裏顏色定義)

• 語義顏色(四鍾顏色)
  有含義的顏色，固然也能夠不止這四種，如：disabled、empty

@brand-success:         #5cb85c; // 成功顏色
@brand-info:            #5bc0de; // 信息顏色
@brand-warning:         #f0ad4e; // 警告顏色
@brand-danger:          #d9534f; // 危險顏色

• 灰度顏色
  主要包含文本、文字、背景色等。

@gray-base:              #000;   // 基本的灰度
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

• 文字、背景色、連接狀態

@body-bg:               #fff;
@text-color:            @gray-dark;
@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);
@link-hover-decoration: underline;

字體

字體大小必須是在已有基礎上，作計算。從h1~h4間隔都是6px;h5~h6分別是14px、12px;而14是基礎字體。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

行高

可是它不只侷限在行高上，能夠推算出高度，已知字體大小與行高時
如：@line-height-computed: floor((@font-size-base * @line-height-base));//20px
一些通用的組件屬性都須要這個值，margin、padding、top、height、line-height...
因此定義好字體大小與行高的重要性不言而喻了吧。

//'line-height' for use in components like buttons.
@line-height-base:        1.428571429; // 20/14

padding與border-radius

bootstrap 有關尺寸命名的格式"-xs-" 有四種尺寸： xs、small、base、large。
而上下、左右的是：-vertical-、-horizontal-

@padding-base-vertical:     6px;
@padding-base-horizontal:   12px;

@padding-large-vertical:    10px;
@padding-large-horizontal:  16px;

@padding-small-vertical:    5px;
@padding-small-horizontal:  10px;

@padding-xs-vertical:       1px;
@padding-xs-horizontal:     5px;

@line-height-large:         1.33;
@line-height-small:         1.5;

@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;

Z-index

有時關於設置z-index時，咱們會亂掉，只要不遮蓋就行，可是有問題時，難修改、難排查；通常咱們uI上有bug，會先從js上排查，最後纔到css；即便找到了，發現須要一層一層的往父級找。所以能夠在最初時寫的時候避免它，先定義好，再使用。

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal:             1040;

操做僞類

有用戶操做動做的，須要定義僞類樣式如:active,hover,focus,disabled。
有些組件有多是多個或者是一個的僞類，最好在定義基礎樣式時，預先定好。
不必定只有僞類定義，也能夠定義相似僞類的類如：.active,.hover,.focus,.disabled。

//buttons
.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  white-space: nowrap;
  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
  .user-select(none);

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }

  &:hover,
  &:focus,
  &.focus {
    color: @btn-default-color;
    text-decoration: none;
  }

  &:active,
  &.active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
    pointer-events: none; // Future-proof disabling of clicks
    .opacity(.65);
    .box-shadow(none);
  }
}

柵格系統

bootstrap最核心的就是柵格系統。

• 創造了.col-xs-1~.col-xs-十二、.col-sm-1~.col-sm-十二、.col-md-1~.col-md-十二、.col-lg-1~.col-lg-12類的樣式

。

.make-grid-columns() {
  // 先循環出.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  //再把.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1，與以後的遞增的類拼接起來造成
  // .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1，.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2，
  //.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1，.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3，
  
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }

 //最後把4*12 = 48 個類的樣式統一設置

  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

• 爲每一個帶col-xs-x, .col-sm-x, .col-md-x, .col-lg-x;添加浮動。

.float-grid-columns(@class) {
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

• 添加列偏移列排序，計算各個的寬度

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

• 最後是調用

@grid-columns:12;
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-grid(@class) {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class, width);
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
  .loop-grid-columns(@grid-columns, @class, offset);
}

.make-grid-columns();

.make-grid(xs);

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}

@media (min-width: @screen-md-min) {
  .make-grid(md);
}

@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

mixins

border-radius

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

backgrounds

.bg-variant(@color) {
  background-color: @color;
  a&:hover {
    background-color: darken(@color, 10%);
  }
}

center-block

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

clearfix

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

hide-text

.hide-text() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

img-responsive、.img-retina

.img-responsive(@display: block) {
  display: @display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

opacity

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

text-overflow

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Vendor Prefixes

在vendor-prefixes.less裏包含了

1. Animations、Backface visibility
2. Box shadow
3. Box sizing
4. Content columns
5. Hyphens
6. Placeholder text
7. Transformations
8. Transitions
9. User Select

以上是看bootstrap源碼的初步理解與感悟，都是本身感受重要與技巧的總結；若有不足之處請多多指教。最後在前端的道路上蹣跚前行着。