Bootstrap 响应式框架 第六集

2020-08-17 10:21:15 浏览数 (1)

1、Less 语法

1、变量

@变量名:值;

2、运算符

,-,*,/

3、混合

.border{ border:1px solid #ddd ; }

#main{

.border;

}

带参数的混合

.border(@color){

border-color:@color;

}

#main{

.border(#ddd);

}

#top{

.border(#000);

}

====================================

1、Less 语法

1、嵌套

允许在一个选择器中 嵌入声明 另一个选择器,以便完成后代 或 子代结构的选择器声明

选择器1{

... ...

选择器2{

... ...

}

>选择器3{

... ...

}

}

ex:

#top{

color:red;

border-color:#e4393c;

div.topic{

height:30px;

line-height:1;

span.border{

}

}

>a:hover{

text-decoration:none;

}

}

#top{

color:red;

border-color:#e4393c;

}

#top div.topic{

height:30px;

line-height:1;

}

#top > a:hover{

text-decoration:none;

}

2、函数

函数:在Less中表示的是一段独立的功能

1、lighten()

颜色减淡函数

ex:

color:lighten(#e4393c,30%);

2、darken()

颜色加深函数

ex:

color:darken(#e4393c,50%);

3、img-width("URL")

计算指定图像的真实宽度

4、img-height("URL")

计算指定图像的真实高度

5、ceil(number)

向上取整,得到的是比number大的最小整数

ex:

ceil(58.5); 结果为:59

6、floor(number)

向下取整,得到的是比number小的最大整数

ex:

floor(58.5);结果为:58

3、文件导入

允许将其他的Less文件导入到当前的Less文件中

语法:

@import "xxxx.less";

2、Bootstrap定制

按自己的需求修改bootstrap的源码,以便达成要的效果

Bootstrap的源码结构:

1、Core variables and mixins

整个Bootstrap中要用到的所有的变量的声明 和 混合

2、Reset and dependencies

重写 以及 依赖的 文件

3、Core CSS

核心的CSS内容 - 全局CSS样式声明

4、Components

所有的组件 less

一个 组件 针对一个 less 文件

5、Components & Javascript

插件

6、Utility Classes

工具类

0 人点赞