当前位置: 首页 > Web前端 > CSS

LessLearningBootstrap

时间:2023-03-31 13:12:06 CSS

Les学习笔记Bootstrap目录说明源码中的目录是这样的(只给出了部分):.csscomb.json│.csslintrc│alerts.less│badges.less│bootstrap.less│breadcrumbs。less│button-groups.less│buttons.less│carousel.less│close.less│...└└─mixinsalerts.lessbackground-variant.lessborder-radius.lessbuttons.lesscenter-block.lessclearfix。lessforms.lessgradients.less...文件variables.less,顾名思义,是为整个Bootstrap定义的全局变量。知识点1:Less的作用域和CSS非常相似。当找不到当前文件时,变量和混合将继承父级的角色。如果仍然找不到,它们将编译并抛出异常。定义Bootstrap中使用的灰色和品牌颜色。@gray-base:#000;@gray-darker:lighten(@gray-base,13.5%);@gray-dark:lighten(@gray-base,20%);@gray:变亮(@gray-base,33.5%);//#555@gray-light:变亮(@gray-base,46.7%);@gray-lighter:变亮(@gray-base,93.5%);//本节定义的主要颜色:成功、失败、警告等。@brand-primary:变暗(#428bca,6.5%);//#337ab7@brand-success:#5cb85c;@brand-info:#5bc0de;@brand-warning:#f0ad4e;@brand-danger:#d9534f;具体实施:知识点2:函数lighten和darken说明:参数:`color,amount,method`函数:`color+amount`表示在`color`的基础上变浅或变深,表示后添加方法在`颜色*方法`的基础上,减淡/加深量。这里就不解释less中的颜色值是怎么计算的了。之后还定义了默认背景颜色。定义字体样式和字体大小,将Bootstrap的基本字体定义为14px。知识点3:ceil和floor函数简述:分别定义向上舍入和向下舍入输入框的样式cursor:not-allowed//禁用按钮和输入时,鼠标指针的样式优先级定义为特定组件设置一些默认层次结构优先级z-index,例如:navbar、dropdown、popover、modal-background、tooltip、navbar-fixed。数值都是1000+,也就是说有时候我们自己自定义了一些优先级,但是还是达不到效果。能不能想想是不是价值不够?less的坑就是less在实际应用中遇到的问题。1、使用calc(100%-50px),调试发现有时候不是自己写的那样。这时候就需要用~来进行处理,比如:calc(~"100%-50px")(一定要用双引号)。2.页面调试时,有时给颜色添加透明度或其操作,得到的颜色值不是#6位,而是#8位。对于#8位,编译后可能无法在页面上正确显示。这个时候就需要用到less的函数fade了。淡入淡出(#,n%)。