less学习之Bootstrap

widuu 发布于2019-08-30 15:55 / 3354人阅读

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

less学习笔记之bootstrap 目录说明

源代码里面的目录是这样的(只给出部分)：

 .csscomb.json
│  .csslintrc
│  alerts.less
│  badges.less
│  bootstrap.less
│  breadcrumbs.less
│  button-groups.less
│  buttons.less
│  carousel.less
│  close.less
│  ...
│
└─mixins
    alerts.less
    background-variant.less
    border-radius.less
    buttons.less
    center-block.less
    clearfix.less
    forms.less
    gradients.less
    ...

文件 variables.less

顾名思义，为整个Bootstrap定义的全局变量。

知识点一：
Less的作用域和css很相似，变量和混合（mixins）在当前文件无法找到时会继承父级作用，如果任然没有找到则会编译抛出异常。

定义在Bootstrap中使用的灰色和品牌颜色。

@gray-base:  #000;
@gray-darker:lighten(@gray-base, 13.5%);
@gray-dark:  lighten(@gray-base, 20%); 
@gray:   lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); 
@gray-lighter:   lighten(@gray-base, 93.5%); 

// 这部分定义的主要色：成功、失败、警告等等。
@brand-primary:         darken(#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`的基础上，
变得更淡或者更深,加上method后表示在`color * method` 的基础上，变淡/深 amount，
这里先不解释less中色值是怎么计算的。

之后也定义了默认背景色。

定义字体风格

字体大小定义

Bootstrap的基础字体为14px。

知识点3：函数ceil和floor
简单说明：分别为向上取整和向下取整

输入框风格定义

cursor：not-allowed //当button与input处于disabled时，鼠标指针的样式

优先级定义

设置一些默认层级优先级z-index，用于特定的组件，例如：navbar、dropdown、popover、modal-background、tooltip、navbar-fixed。值都为1000+，这也就是有时候我们自己自定义了一些优先级，但是还是达不到效果，可以想一想是不是值不够？

less的坑

在实际的运用less中，遇到的问题。
1、就是使用calc(100% - 50px)，发现有时候通过调试看到不是像自己写的一样，这时候需要使用~进行处理如： calc(~"100% - 50px")(一定要用双引号)。

2、在页面调试的时候，有时候对颜色增加透明度或者其操作，得到的色值不是#六位，而是#八位，对于#八位，在编译后不一定能够正确展示在页面，这个时候就需要使用less的函数fade。fade(#, n%).

私有云专线服务学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

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

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

less学习之Bootstrap（按钮篇）

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

sherlock221 2019-08-30 15:55 评论0 收藏0
php学习之留言板

摘要：用到对数据进行删除，具体请看的编写相关姿势有发送请求字符串模板页面元素内容赋值请求返回到这，整体结构就完成了。前言在对php语法有一定了解之后开始，这是第一个php练手项目，涵盖的知识有公共部分的引用表单的提交请求的接收与响应 interface+implements的使用基于文件的所处理的增删改查 json的格式化与字符串序列化项目地址message boardps...

biaoxiaoduan 2019-06-27 16:18 评论0 收藏0
只会CSS还不够，LESS、SASS、BootStrap、Foundation一网打尽！

摘要：有些人想学，不知如何下手有些人已经学会的各种属性，却不知如何运用有些人会平面设计，不知道如何与网页设计结合有些人会，就是学不会。有些人想学CSS，不知如何下手；有些人已经学会CSS的各种属性，却不知如何运用；有些人会平面设计，不知道如何与网页设计结合；有些人会HTML，就是学不会CSS。试问自己，图中的技术你都会了吗？ showImg(https://segmentfault.co...

tain335 2019-08-21 10:18 评论0 收藏0
【抢先领】《React 学习之道》我们翻译了一本最简单，且最实用的 React 实战教程……

摘要：学习之道简体中文版通往实战大师之旅掌握最简单，且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授，并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅：掌握 React 最简单，且最实用的教程。 showIm...

oneasp 2019-08-22 14:03 评论0 收藏0