专栏首页李才哥Bootstrap 响应式框架 第六集
原创

Bootstrap 响应式框架 第六集

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

工具类

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 趣图:会 JS 了不起啊!

    简单大概的说出来就可以了,不要详细到你哪年进入公司,哪年离开公司,负责项目做什么的,说一大通。这个对我们面试官来说,想让你自我简单介绍,其实考察点有两方面:

    李才哥
  • css应知应会 第二集

    h-shadow v-shadow blur spread color inset

    李才哥
  • 前端面试题库系列(4)

    defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺...

    李才哥
  • 开始使用MySQL

    mwangblog
  • 在IBM Cloud中运行Fabric

    上篇文章我们讲了怎么使用IBM blockchain platform extension在VS Code编辑器中创建本地运行的智能合约。

    程序那些事
  • JDK1.9-JDBC连接池

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • Android程序员的Java后台学习建议

    Android 开发作为“安身立命”的资本,在面对如今“移动要凉”的氛围,我们在沉住气“纵向进修”的同时,有时也希望横向拓展自身的能力,而 Android 开发...

    恋猫
  • Height transition

    -transition:max-height:0.5s使用默认的ease时间函数在0.5秒内过渡max-height的值。

    公众号@魔术师卡颂
  • Kubernetes Dashboard 终结者:KubeSphere

    2018 年 7 月份,青云在 Cloud Insight 云计算峰会上推出了一款全新的容器平台——KubeSphere,旨在帮助企业快速低成本管理容器。并且 ...

    米开朗基杨
  • 2015年,网友眼中的流氓软件都有哪些?

    有一些软件总会被我们记住,而原因却是它们出身时所带的“邪恶属性”,它们被冠以“流氓”的恶名,是安全行业的有着巨大破坏性的搅局者,而在2015年,谁又会是它们之中...

    FB客服

扫码关注云+社区

领取腾讯云代金券