bootstrap 3.0 LESS源代码浅析(一)
我一直以为Bootstrap的LESS源代码精髓在mixins.less,所以这个系列主要也是讲解mixins.less的。
什么是mixins?
混入,或者翻译成混合。官网的说法是:我们可以定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性。
看起来非常难理解,没事,我们来看例子,比如有这样一个class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
那如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中像下面这样调用就可以了:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
编译后,.bordered
class 里面的属性样式都会在 #menu a
和 .post a
中体现出来:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
在 LESS 中,我们还可以还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他 class 中像这样调用它:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
如果想详细了解混入,请查看官方文档:http://www.lesscss.net/article/document.html
举个栗子
Bootstrap 3.0中有许多有用的混入函数,第一个无疑是clearfix函数。clearfix是用来清除浮动的。
但是,为什么要清除浮动呢?
如果父元素只包含浮动元素,那么它的高度就会塌缩为零。 形象的说,既然是浮动元素,那么其父级元素就觉得他们都是飘在我上面的玩意,没有占据我的空间,所以高度就塌陷为零了。这时候我们清除浮动,告诉父级元素,你需要包含这些浮动的元素,然后他就被撑开了。
常见的清除浮动技术是这样的:
.clearfix:after {
content: ".";
display: block;
height:;
visibility: hidden;
clear: both;
}
.clearxi {
*zoom:;
}
不过Boostrap的更容易记:
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
如果要兼容IE6和IE7则加上:
.clearfix {
*zoom:;
}
值得注意Bootstrap使用的技术不支持Firefox 3.5以下版本。
clearfix基本原理
远古时代,我们使用一个隐藏的元素进行清除浮动。但自从伪类选择器:after和:before出现后,我们可以通过content来悄悄的在子元素后端,或者前端插入元素,并将其设为clear: both。
:after
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
:before
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
怎么混入?
我们来看看Bootstrap中的例子:
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
为了防止panel塌陷,Bootstrap使用.clearfix()混入函数对.panel-body处理,编译后如下:
.panel-body {
padding: 15px;
} .panel-body:before,
.panel-body:after {
display: table;
content: " ";
} .panel-body:after {
clear: both;
}
完成收工!
该方案原作者的解释
这种clearfix方案,生成了两个伪元素,并将其display设置成table。这将创建一个匿名的table-cell和一个新的块状区域,这意味着::before伪元素阻止了顶部边缘塌陷。而:after伪元素清除了浮动。其结果是,没有必要隐藏任何生成的内容,并减少所需的代码量。
bootstrap 3.0 LESS源代码浅析(一)的更多相关文章
- bootstrap 3.0 LESS源代码浅析(二)
border-radius是最常见的CSS3属性,但你知道他多少东西呢? 比如: border-radius:2em; 相当于什么? border-top-left-radius:2em; borde ...
- 【Spark】Stage生成和Stage源代码浅析
引入 上一篇文章<DAGScheduler源代码浅析>中,介绍了handleJobSubmitted函数,它作为生成finalStage的重要函数存在.这一篇文章中,我将就DAGSched ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理
这是本人第一次写,写的不好的地方还忘包含.写这个的主要原因是想通过这个来学习下EF的CodeFirst模式,本来也想用AngularJs来玩玩的,但是自己只会普通的绑定,对指令这些不是很熟悉,所以就基 ...
- Bootstrap 3.0正式版发布!
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,包含了丰富的Web组件.根据这些组件,开发者可以快速的搭建一个漂亮.功能完备的网站.在经过Bootstrap 3 RC版的测试和 ...
- 10款最好的 Bootstrap 3.0 免费主题和模板
Twitter Bootstrap 框架已经广为人知,用于加快网站,应用程序或主题的界面开发,并被公认为是迄今对于Web开发的最有实质性帮助的工具之一.在此之前的,各种各样的界面库伴随着高昂的维护成本 ...
- Bootstrap v4.0.0-alpha.5 发布,大量更新
Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...
- 30款最好的 Bootstrap 3.0 免费主题和模板
Twitter Bootstrap 框架已经广为人知,用于加快网站,应用程序或主题的界面开发,并被公认为是迄今对于 Web 开发的最有实质性帮助的工具之一.在此之前的,各种各样的界面库伴随着高昂的维护 ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
- [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package
本文转自:http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms In my earlier ...
随机推荐
- C++雾中风景番外篇2:Gtest 与 Gmock,聊聊C++的单元测试
正式工作之后,公司对于单元测试要求比较严格.(笔者之前比较懒,一般很少写完整的单测~~).作为一个合格的开发工程师,需要为所编写代码编写适量的单元测试是十分必要的,在实际进行的开发工作之中,TDD(T ...
- 磁盘修复工具TestDisk
磁盘修复工具TestDisk TestDisk一款免费的数据的恢复工具,可以用于还原丢失的磁盘分区,恢复磁盘驱动引导功能.它还能检测磁盘损坏的原因,如病毒感染.人为损坏.恶意软件等.该工具采用文本菜单 ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- Scratch儿童项目式编程—捉迷藏游戏 Scratch children project programming - hide-and-seek game
Scratch儿童项目式编程—捉迷藏游戏 Scratch children project programming - hide-and-seek game 作者:韩梦飞沙 Author:han_me ...
- BZOJ.5120.[清华集训2017]无限之环(费用流zkw 黑白染色)
题目链接 LOJ 洛谷 容易想到最小费用最大流分配度数. 因为水管形态固定,每个点还是要拆成4个点,分别当前格子表示向上右下左方向. 然后能比较容易地得到每种状态向其它状态转移的费用(比如原向上的可以 ...
- BZOJ.2639.矩形计算(二维莫队)
题目链接 二维莫队,按x,y坐标一起分块.(x,y)的所属的块为 x/sq(n)*sq(m) + y/sq(m) 排序时按照(左下点所在块,右上点的标号)排序 排序后 先得出一个询问的答案,然后利用上 ...
- jsp下载word
<%@ page language="java" contentType="application/msword;charset=utf-8"%> ...
- BZOJ4714 : 旋转排列
对于每个$k$,问题等价于求有多少置换满足: 1.存在一个循环长度为$k$ 2.任意一个循环长度$\geq 2$ 枚举这种环的个数$t$: 设$g_t$表示至少有$kt$个人分成$t$个长度为$k$的 ...
- 2018年web最新面试知识点总结
00.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 行内元素:a b span img input select strong 块级元素:div ul ol li ...
- Windows平台交叉编译Arm Linux平台的QT5.7库
1.准备交叉编译环境 环境说明:Windows 7 64位 此过程需要: (1)Qt库开源代码,我使用的是5.7.0版本: (2)Perl语言环境5.12版本以上: (3)Python语言环境 2.7 ...