当前位置: 首页 >前端技术 > Bootstrap定制(一)less入门及编译

Bootstrap定制(一)less入门及编译

第一篇博,希望支持。

 

近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享。

 

bootstrap官方的定制,功能还算完善,但是基于web的,随便刷新下网页之前弄得就白费了。同样类似的也有很多其他定制的网站,形式功能大同小异。

 

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

 

果断放弃了web端的定制了,下面是bootstrap源码,bootstrap是基于less预处理语言开发完成的,但是为了便利sass用户,移植了sass版本。

less和sass的区别,大家可以去了解了解。

 

本文以less为例,好的,下载less源码。

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

解压源码包。

目录结构如下。

docs-bootstrap文档,里面有bootstrap的一些实例。

fonts-字体文件,图标文件。

js-bootstrap 各个插件封装的js。

dist-发行包。

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

好的,我们今天要讲的就是less的定制了。

打开less目录,目录结构如下。

 

列举几个重要的less文件。

varibles.less-bootstrap所有的变量。

themes.less-bootstrap主题。

bootstarp.less-引入所有其他less文件,最后编译这个文件即可形成最终的css。

mixins.less-引入mixins文件夹里面的less文件(mixins文件里文件基于组件分文件,里面写的是所有组件的less函数,主目录下组件less引用函数都在mixins下对应的文件里)

其他less文件是对应于bootstrap官网的组件,多看看,定制起来就得心应手了。

 

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

好的,到这里,之前没深入研究过less的是不是该去研究研究less的基本语法和编译呢?

 

less官网:http://www.lesscss.net/features/

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

有过其他编程经验的开发者学起来应该不难,花点时间都可以熟练掌握。

接下来得编译这些less文件了,在线编译的网站很多,但是没有本地编译赞。同样本地编译的软件很多,这里以顶顶大名的kola为例。

官方下载地址:http://koala-app.com/index-zh.html

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

编辑less文件后,使用koala编译bootstrap文件,kola的使用过程可以百度下。

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

编译后的文件,这就是我们最终要的文件了。引入项目开发即可。

Bootstrap定制(一)less入门及编译 _ JavaClub全栈架构师技术笔记

 

下一篇:less基本语法,敬请期待。

作者:香柠绿茶~
来源链接:https://www.cnblogs.com/xnlc/p/3836697.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/117468.html

标签:Bootstrap
分享给朋友:

“Bootstrap定制(一)less入门及编译” 的相关文章