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
    }
  • 相关阅读:
    改进昨天的电梯电梯问题
    电梯调度
    结对开发四---实现环状二维数组求最大子数组的和
    结对开发五--对一千个数long型的一维数组求最大子数组的和
    结对开发四------求一维无头数组最大子数组的和
    结对开发3--电梯调度问题需求分析
    SQL基础题
    类和对象(课后题)
    再战文件(小甲鱼课后题)python超级入门
    快来集合!python超级入门笔记
  • 原文地址:https://www.cnblogs.com/gggwf/p/9220329.html
Copyright © 2011-2022 走看看