我一直以为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: 0; visibility: hidden; clear: both; } .clearxi { *zoom: 1; }
不过Boostrap的更容易记:
.clearfix() { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } }
如果要兼容IE6和IE7则加上:
.clearfix { *zoom: 1; }
值得注意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伪元素清除了浮动。其结果是,没有必要隐藏任何生成的内容,并减少所需 的代码量。
相关推荐
一套最新版本的Bootstrap3.0后台管理模板,支持所有浏览器
bootstrap 3.0 完整版带帮助文档
Unify template bootstrap 3.0网页模板,一共有四十多个页面!不错的学习资料
Metronic v1.5.2 –基于 Bootstrap3.0 的响应式后台管理模板 里面包含教材和文档
前端流行框架bootstrap3.0,适合各种前端大气页面设置,对于不擅长css+html设计的开发人员,非常适合。
将整个网站扒下来的可以离线查看 比较好的一个版本 预定义样式 Bootstrap3.0
bootstrap3.0
响应式网页开发基础教程(jQuery+Bootstrap)-源代码.rar
下载可以直接运行,一个完整的例子中包含bootstrap3.0里所有的组件和样式,真的非常实用, bootstrap2.x和3有一定的区别,而且现在网上好多教程都是bootstrap2.x的,下载前先看下你bootstrap的版本
非常不错的bootstrap3.0模板,可以参考。 http://iarouse.com/dist-flatify/v1.0.1/index.html#/dashboard
ace admin template 1.3 bootstrap3.0 完整版 优秀的后台管理web框架; 基于bootstrap,jquery; 还带了些文档
LLBootstrapButton - Bootstrap 3.0扁平化风格按钮,自带图标,一句代码直接调用!
UIButton-Bootstrap, 带有 Bootstrap 3.0样式的UIButton 正在查找用于 macOS的平面 NSButtons? 查看 FlatButton uibutton引导程序简单的UIButton类别,可以添加漂亮和平坦的Bootstrap 3.0按钮样式。无子类,无图像...
本文是Bootstrap3.0学习笔记的第一篇,主要介绍一些Bootstrap3.0的基础知识以及在网页中如何使用Bootstrap,并成功运行第一个hello world!
bootstrap-additions, Twitter Bootstrap 3.0 的CSS扩展工具包 BootstrapAdditions BootstrapAdditions是 TwitterBootstrap 3.0 的CSS扩展工具包。它是 AngularStrap v2发布工作的一个 spin 。文档和示
bootstrap-3.0是著名的前端框架,使用它可以快速制作出漂亮的响应式布局页面,压缩包中还附带有中文手册,方便查看
ThinkPHP 3.2.3+Bootstrap 3.0进销存系统 数据库文件在 \Public\Data目录下,安装配置就参考THINKPHP,技术小白不要下
一款轻量级基于bootstrap3.0的后台管理前端框架模板,界面美观、简洁,支持多种主题切换,日期时间、图表、select2、多级菜单、表格等组件可以根据自己需要,自定义添加,方便简洁。
今天我们整理了blacktie网站分享的高品质Bootstrap 3.0框架制作的主题模板,适合不同需求的网站,有虚拟名片、个人简历、个人网站、作品集展示等类型,我想这些会是设计师、插画师、自由职业者或者想要一个个人主页...
bootstrap的中文手册,内容跟bootstrap中文网3.0的差不多,只保留主要内容和部分其它内容,可以离线使用。解压后直接用浏览器打开“v3.bootcss.com”文件夹即可。 声明:下载前请先看文档说明,不会可留言。