Bootstrap按钮篇学习less）在我之前的文章Bootstrapforlesslearning中介绍了Bootstrap的目录结构，并说明了主题颜色定义在variables.less文件中，其中还包括按钮的主题颜色。接下来，看看buttons.less和mixins/buttons.less。文件buttons.less和mixins/buttons.less没有很多内容。总结就是：1.“.btn”的基本样式定义。2、按钮各种状态含义的样式定义，例如：btn-primary、btn-success等。3、伪连接，按钮的样式显示为连接的样式。4.按钮大小的类别：lg、sm、xs。5.输入类型按钮定义。基本样式定义代码：.btn{display:inline-block;......&,&:active,&.active{&:focus,&.focus{.tab-focus();}}......//剩下的就是hover和disabled的样式}说明：知识点1：less和scss语法中的`&`，表示同一个parent。在前面的例子中，编译后是`&`会被`.btn`代替，如果是多层也是同理。技巧一：使用函数tab-focus。这个函数定义在mixins/tab-focus.less中，代码很短。tab-focus(){outline:5pxauto-webkit-focus-ring-color;outline-offset:-2px;}修改浏览器的默认轮廓样式：显示在按钮、表单等原生组件上。提示2：使用函数user-select。这个函数在mixins/vendor-prefixes中定义。.user-select(@select){-webkit-user-select:@select;-moz-用户选择：@select；-ms-用户选择：@select；//IE10+user-select:@select;}函数，文本是否可以被选中。技巧3：使用函数opacity。这个函数在mixins/opacity中定义。.opacity(@opacity){不透明度:@opacity;@opacity-ie:(@opacity*100);filter:~"alpha(opacity=@{opacity-ie})";}IE兼容IE，IE的透明度使用filter:alpha(opacity=value)，其中0<=value&&value<=100。符号“~”在JavaScript中可以表示evel，可以将字符串转换为表达式。所以一些复杂的选择器也可以定义为变量。特别是从函数button-variantBootstrap中抽象出来的函数作用于按钮在不同状态下的颜色变化。例如：hover、focus、active等状态。函数描述参数：@color；@背景;@border//字体颜色、背景颜色、边框颜色结构如下：.button-variant(@color;@background;@border){color:@color;背景颜色：@background；边框颜色：@border；&:focus,&.focus{颜色:@color;背景颜色：变暗（@背景，10%）；边框颜色：变暗（@border，25%）；}......//剩下的就是hover和disabled.badge的样式了{color:@background;背景色：@color；}}从上面两个文件可以得出的结论是：在.less中写的是选择器定义和变量定义，而mixins/.less中写的是函数。本文总结了我所听说的有关Bootstrap的信息，包括好的和坏的。我周围有人说这个框架很垃圾。但是Bootstrap的框架怎么样，我就不评论了，但是Bootstrap非常适合做学习资料，Less的语法糖都知道，那么如何让Less用起来得心应手呢？无疑，源码是一种方式。接下来的安排，我会贯彻自己写的文章，对Less的学习不会停止。
