bootstrap学习之路2

时间 2019-12-11

原文原文链接

上一次简单介绍了一下bootstrap这个开源框架，此次继续bootstrap深刻之路，从Less提及。。。。javascript

关于less

less是一门预处理语言，是对css的扩展，它使得css语言了动态语言的一些特性，如变量，继承，运算，函数等，使得css更加灵活强大，less的语言很简单，学习了css的朋友对于less的语法，上手基本没有难度。如今来看看less的如下特性：css

　　less中这样定义变量：@fontsize：14px；使用变量，h3{font-size:@fontsize}，编译后的css就是h3{font-size：14px;}java

　　利用less能够将一个定义好的类A引入类B中，从而实现类B对类A的继承git

　　.A{font-size=15px;border:1px 0px;padding:15px;10px;}github

　　#header{ color：red;.A;}bootstrap

　　less能够建立一个函数，从而实现css更大的灵活性框架

　　.A(@color:#fffff){font-size=15px;border:1px 0px;padding:15px;10px;color：@color}less

　　#header{.A(#ccccc)}编辑器

　　编译后#header{font-size=15px;border:1px 0px;padding:15px;10px;color：#cccccc}函数

　　在less中能够对属性进行四则运算

　　@my-border:1px;

　　@my-color:#cccccc；

　　#header{border：（@my-border * 2）;

　　　　　　　font-color：（@my-color+#acbcfc）；

　　　　　　}

LESSCSS的使用是很容易的，首先，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面便可。

　客户端的less使用，先在页面中引入.less样式表----<link rel="stylesheet/less" type="text/css" href="styles.less" />（注意：rel是"stylesheet/less"）

　　而后下载less.js并引入到页面<head> </head>之中，<script src="less.js" type="text/javascript"></script>(注意：要先加载样式表)

　　关于less的更多语言细节及使用能够访问http://less.bootcss.com/features/或者上github上去fork一个看一下， github地址：https://github.com/less/less.js