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
    }
  • 相关阅读:
    1091 Acute Stroke
    1092 To Buy or Not to Buy
    1093 Count PAT's
    1094 The Largest Generation
    1095 Cars on Campus
    1096 Consecutive Factors
    1097 Deduplication on a Linked List
    2.掌握Python基本数据类型,从python陌路人到熟人!
    Python基础语法,他其实很贵!
    某外企软件测试面试题整理(更新中)
  • 原文地址:https://www.cnblogs.com/gggwf/p/9220329.html
Copyright © 2011-2022 走看看