用Less 的 js方式替代 bootStrap 里 [class*=”span”]
Bootstrap 里的 grid system 里面 (源代码) 有这么一段,
[class*="span"] {
float: left;
margin-left: @gridGutterWidth;
}
Universal selectors should be avoided
。这个既可以说是 selector 的问题,也可以说是 RECESS 的问题,但可以在运行的时候加个参数忽略掉。自己去写扩展时也会写到类似的规则,比如需要兼容某浏览器,如果不这样写,就会需要像Bootstrap-IE6 那样写
.span1, .span2, .span3, .span4, .span5, .span6,
.span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
display: inline;
}
但这样太丑陋僵化了,而且经不起变化,当我使用 16 栅格或者其它非 12 栅格时,就非常被动。
如果不使用 [attr*=val],不知道 LESS 是否有现成的东西来简化。我设想会不会有类似于".span" + [1..@{gridColumns}]
的特性支持。嗯,是有点过于美好了。
但是 LESS 支持运行 JavaScript,这里没有太复杂的运算,只是字符串迭代拼接,感觉可行,于是有了下面这个。
// Modify this for custom colors, font-sizes, etc
@import "variables.less"; // equals [class*="span"]
(~`(function(pf,c){var a=[];while(c>0){a.push(pf+c);c--;}return a.join(',');})('.span',parseInt("@{gridColumns}"))`) {
float: left;
margin: 0 @gridGutterWidth 0 0;
}
//Js如下:
(function(pf,c){
var a=[];
while(c>0){
a.push(pf+c);
c--;
}
return a.join(',');
})('.span',parseInt("@{gridColumns}"))
由于只有一行,尽量简化了。pf
是前缀 prefix 的意思,c
是迭代项,入参值为parseInt("@{gridColumns}")
,这样变化就由 variables.less 控制了。看起来不是很直观,加个注释声明了一下。
用Less 的 js方式替代 bootStrap 里 [class*=”span”]的更多相关文章
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- Bootstrap里的文件分别代表什么意思及其引用方法
关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下: bootstrap/ <!--主目录--> ├── css/ < ...
- 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js
Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...
- JS中的柯里化及精巧的自动柯里化实现
一.什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 C ...
- JS中的柯里化(currying) 转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
JS中的柯里化(currying) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpr ...
随机推荐
- 创建项目文件(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 按照张同学和董同学的说法,创建项目文件首选是利用可以参照的项目计划模板,如果找不到,那就利用现有的项目文件,实在这些都没有 ...
- Vs code配置Go语言环境-Mac
背景:最近受朋友介绍,学习Go语言.那么开始吧,首先从配置环境开始. 电脑:Mac Air,Vs code已经安装 一.Go下载和安装 下载地址:https://golang.google.cn/dl ...
- 如何完成符合ISO 26262要求的基于模型设计(MBD)的测试
背景介绍 随着汽车行业的迅速发展,汽车的复杂程度不断增加,越来越多的汽车电子控制系统具有与安全相关的功能,因此对ECU的安全要求也越来越高.复杂的软件功能,将会带来大量的软件风险问题,如何保证软件的安 ...
- linux下记录入站请求
将内网机器通过frp映射到公网后,内网主机受到大量ssh爆破攻击,攻击来源为frp的服务端,仅在内网机器上无法追踪到真实的攻击来源的ip.下面记录了在frp服务端监控指定端口的入站数据,找到真正的攻击 ...
- 安装选择msi格式还是zip(windows下Nodejs zip版下载安装及环境变量配置)
安装选择msi格式还是zip((windows下Nodejs zip版下载安装及环境变量配置)) -----以node.js 安装为例: 1,外观对比: ✿ 简单介绍一下node的作用: • node ...
- Tomcat高级特性及性能调优
Tomcat对Https的支持 HTTPS简介 Https,是以安全为目标的Http通道,在Http的基础上通过传输加密和身份认证保证了传输的安全性.HTTPS在HTTP的基础上加入SSL层,HTTP ...
- vc mfc listctrl使用虚拟列表 虚拟列表用法
note 虚拟列表可有效加载大量数据 需要处理listctrl的 LVN_GETDISPINFO 消息 使用虚拟列表 不能 使用 insert的方法插入数据,而是告诉listctrl 当前要显示多少行 ...
- 【LeetCode】169. Majority Element 解题报告(Java & Python & C+)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 思路 hashmap统计次数 摩尔投票法 Moore ...
- 【LeetCode】173. Binary Search Tree Iterator 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 保存全部节点 只保留左节点 日期 题目地址:http ...
- Codeforces Round #327 (Div. 1), problem: (A) Median Smoothing
http://codeforces.com/problemset/problem/590/A: 在CF时没做出来,当时直接模拟,然后就超时喽. 题意是给你一个0 1串然后首位和末位固定不变,从第二项开 ...