less学习之Bootstrap

栏目: CSS · 发布时间: 5年前

内容简介:文件顾名思义,为整个Bootstrap定义的全局变量。具体体现:

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;

具体体现:

less学习之Bootstrap

知识点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学习之Bootstrap》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C语言深度解剖

C语言深度解剖

陈正冲 / 北京航空航天大学出版社 / 2010-7 / 29.00元

《C语言深度解剖:解开程序员面试笔试的秘密》由作者结合自身多年嵌入式c语言开发经验和平时讲解C语言的心得体会整理而成,其中有很多作者独特的见解或看法。由于并不是从头到尾讲解C语言的基础知识,所以《C语言深度解剖:解开程序员面试笔试的秘密》并不适用于C语言零基础的读者,其内容要比一般的C语言图书深得多、细致得多,其中有很多问题是各大公司的面试或笔试题。 《C语言深度解剖:解开程序员面试笔试的秘......一起来看看 《C语言深度解剖》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器