less学习之Bootstrap（按钮篇）

sherlock221 发布于2019-08-30 15:55 / 1808人阅读

摘要：学习之按钮篇如我上一篇学习之里面，介绍了的目录结构，说明了在这个文件里面，定义了主题色，也包括了按钮的主题色。伪连接，按钮的样式显示为连接的样式。接下来的安排，自己写的文章自己也会去实现它，另外关于的学习也不会停止。

less学习之Bootstrap按钮篇）

如我上一篇less学习之Bootstrap里面，介绍了Bootstrap的目录结构，说明了在variables.less这个文件里面，定义了主题色，也包括了按钮的主题色。接下来看一看 buttons.less与 mixins/buttons.less.

文件 buttons.less 与 mixins/buttons.less

内容不是很多，总结下来就是：

1、“.btn”的基础样式定义。

2、按钮的各种状态含义的样式定义，例如：btn-primary、btn-success等。

3、伪连接，按钮的样式显示为连接的样式。

4、按钮尺寸的class：lg、sm、xs。

5、input类型的按钮定义。

基础样式定义 代码：

.btn {
  display: inline-block;
  ...
  ...

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }

 ...
 ...// 余下的为hover、disabled时的样式
}

说明：

知识点1：`&`在less与scss的语法中，表示同父级，就上一个例子来说，就是编译之后`&`将会被`.btn`替换，如果是多层时也是相同的道理。

提示1：运用了函数tab-focus。此函数定义在mixins/tab-focus.less中，代码很短

.tab-focus() {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

修改浏览器默认的大纲样式：表现在按钮、form表单等原生组件上。

提示2：    运用了函数user-select。此函数定义在mixins/vendor-prefixes中。

.user-select(@select) {
  -webkit-user-select: @select;
 -moz-user-select: @select;
  -ms-user-select: @select; // IE10+
      user-select: @select;
}

作用，让文本是否能够选择。

提示3： 运用了函数opacity。此函数定义在mixins/opacity中。

.opacity(@opacity) {
  opacity: @opacity;
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

此处做了IE的兼容IE，IE的透明度采用 filtger:alpha(opacity=value),其中 0 <= value && value <= 100.
符号“~”，可以意为JavaScript里面的 evel ，可以将字符串转化为表达式。所以说一些复杂的选择器也能够作为变量定义。

特别说明

函数button-variant

Bootstrap里面抽象出来的函数，作用于按钮不同状态下的颜色变化。例如：hover、focus、active等状态。

函数说明

参数：@color; @background; @border // 分别时字体颜色、背景颜色、边框颜色

结构如下：

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:focus,
  &.focus {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 25%);
  }
  
 ...
 ...// 余下的为hover、disabled时的样式

  .badge {
    color: @background;
    background-color: @color;
  }
}

由上面两个文件可以总结出的结论是：.less里面写的是选择器定义、变量定义，而mixins/.less里面写的是函数。

本篇总结

关于Bootstrap听到过不少的见闻，有好有坏，我有身边也有人说这个框架很垃圾。但是对于Bootstrap这个框架怎么样，我不做评价，但是Bootstrap用来作为学习的资料时非常合适的，Less的语法糖都了知道，那么如何才能让Less用起来得心应手？无疑，源码是一种途径。

接下来的安排，自己写的文章自己也会去实现它，另外关于Less的学习也不会停止。

idc机房托管混合云学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117270.html

less学习之Bootstrap

摘要：学习笔记之目录说明源代码里面的目录是这样的只给出部分文件顾名思义，为整个定义的全局变量。定义在中使用的灰色和品牌颜色。这部分定义的主要色成功失败警告等等。之后也定义了默认背景色。 less学习笔记之bootstrap 目录说明源代码里面的目录是这样的(只给出部分)： .csscomb.json │ .csslintrc │ alerts.less │ badges.less ...

widuu 2019-08-30 15:55 评论0 收藏0
HTML5学习之语义化标签（一）

摘要：下面是一个使用标签的网站头部实例信息科技有限公司需要注意的是，一个文档中可以包含一对或者一对以上的标签。示例如下版权所有信息科技有限公司五表示包含于一个文档页面应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。一、为什么HTML5要引入新语义标签在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，...

flyer_dev 2019-08-05 17:53 评论0 收藏0
前端知识点总结—-响应式

摘要：前端知识点总结响应式响应式网页自适应的网页年提出一个网页，会自动根据用户浏览设备不同，自动必变布局可以被正常浏览响应式网页必备流式布局可以改变尺寸图片文字响应式布局不足代码更加复杂，不适合大型网页如何测试网页使用真实物理设备使用第三方模前端知识点总结—-响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页，会自动根据用户浏览设备不同...

NicolasHe 2019-08-05 18:00 评论0 收藏0
前端知识点总结—-响应式

摘要：前端知识点总结响应式响应式网页自适应的网页年提出一个网页，会自动根据用户浏览设备不同，自动必变布局可以被正常浏览响应式网页必备流式布局可以改变尺寸图片文字响应式布局不足代码更加复杂，不适合大型网页如何测试网页使用真实物理设备使用第三方模前端知识点总结—-响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页，会自动根据用户浏览设备不同...

leo108 2019-06-25 16:39 评论0 收藏0
Zepto.js源码学习之二

摘要：本次主要分享关于上一篇区域的学习。区域为的核心部分，它的结构如下为了便于梳理思路，以上代码省略了细节，只保留了轮廓脉络。最终暴露给开发者的如下图所示这里只分析了区域的结构，下一次会深入到函数语句粒度。本次主要分享关于上一篇区域2的学习。区域2为Zepto的核心部分，它的结构如下 var Zepto = (function() { var $, zepto = {}; fu...

kel 2019-08-20 13:31 评论0 收藏0