码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 栅格化源码

时间:2018-06-24 14:03:29      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:idt   start   styles   make   mon   general   mina   字符串   bootstrap   

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .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}");
  }
  .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:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

  

难点1: 

时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

 

编译后:
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

看下面领悟

.make-grid-columns() {
    // Common styles for all sizes of grid columns, widths 1-12
    .col(@index) {
        // initial
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col2((@index + 1), @item);
    }
    .col2(@index, @list) when (@index =< @grid-columns) {
        // general; "=<" isn‘t a typo
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col2((@index + 1), ~"@{list}, @{item}");
    }
    .col2(@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: ceil((@grid-gutter-width / 2));
            padding-right: floor((@grid-gutter-width / 2));
            item:~"@{item}";
            list:~"@{list}"
        }
    }
    .col(1); // kickstart it
}

 

bootstrap 栅格化源码

标签:idt   start   styles   make   mon   general   mina   字符串   bootstrap   

原文地址:https://www.cnblogs.com/gggwf/p/9220329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!