zoukankan      html  css  js  c++  java
  • 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();
    }

    就好像less需要输入一个border-radius:~“100px/200px”

    看下面领悟

    .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
    }
  • 相关阅读:
    洛谷P3796
    cf1291c-Mind Control
    莫比乌斯函数
    C. Mixing Water(三分)
    E. Modular Stability(思维构造)
    【美团杯2020】平行四边形
    原根定义
    E. Are You Fired?(思维)
    102606C. Coronavirus Battle time limit per test4 seconds(三维拓扑序)
    E
  • 原文地址:https://www.cnblogs.com/gggwf/p/9220329.html
Copyright © 2011-2022 走看看