Bootstrap定制(一)less入门及编译
第一篇博,希望支持。
近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享。
bootstrap官方的定制,功能还算完善,但是基于web的,随便刷新下网页之前弄得就白费了。同样类似的也有很多其他定制的网站,形式功能大同小异。
果断放弃了web端的定制了,下面是bootstrap源码,bootstrap是基于less预处理语言开发完成的,但是为了便利sass用户,移植了sass版本。
less和sass的区别,大家可以去了解了解。
本文以less为例,好的,下载less源码。
解压源码包。
目录结构如下。
docs-bootstrap文档,里面有bootstrap的一些实例。
fonts-字体文件,图标文件。
js-bootstrap 各个插件封装的js。
dist-发行包。
好的,我们今天要讲的就是less的定制了。
打开less目录,目录结构如下。
列举几个重要的less文件。
varibles.less-bootstrap所有的变量。
themes.less-bootstrap主题。
bootstarp.less-引入所有其他less文件,最后编译这个文件即可形成最终的css。
mixins.less-引入mixins文件夹里面的less文件(mixins文件里文件基于组件分文件,里面写的是所有组件的less函数,主目录下组件less引用函数都在mixins下对应的文件里)
其他less文件是对应于bootstrap官网的组件,多看看,定制起来就得心应手了。
好的,到这里,之前没深入研究过less的是不是该去研究研究less的基本语法和编译呢?
less官网:http://www.lesscss.net/features/
有过其他编程经验的开发者学起来应该不难,花点时间都可以熟练掌握。
接下来得编译这些less文件了,在线编译的网站很多,但是没有本地编译赞。同样本地编译的软件很多,这里以顶顶大名的kola为例。
官方下载地址:http://koala-app.com/index-zh.html
编辑less文件后,使用koala编译bootstrap文件,kola的使用过程可以百度下。
编译后的文件,这就是我们最终要的文件了。引入项目开发即可。
下一篇:less基本语法,敬请期待。
Bootstrap定制(一)less入门及编译的更多相关文章
- BOOTSTRAP定制
1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1 ~ ...
- 第87节:Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...
- Bootstrap定制开发
Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...
- 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...
- 手摸手教你bootstrap定制
老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内 ...
- Bootstrap定制(二)less基础语法
前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap前端框架快速入门专题
1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
随机推荐
- HTML&CSS基础学习笔记1.20-DIV标签2
<span>标签 标签div把文档分割为独立的.不同的部分,而在HTML中,<span>标签则被用来组合文档中的行内元素. 看个实例: <!DOCTYPE html> ...
- JavaWeb学习笔记--Listener
JSP中的监听器 Web程序在服务器运行的过程中,程序内部会发生多事件,如Web应用的启动和停止.Session会话的开始和销毁.用户请求的开始和结束等等.有时程序员需要在这些事件发生的时机执行一 ...
- 开始3D编程前需注意的十件事
http://www.csdn.net/article/2013-06-21/2815949-3d-programming 原文作者Vasily Tserekh是名3D编程爱好者,他发表了一篇博文&l ...
- ubuntu 下GIT的安装
linux下软件的安装方式有多种,最简单的莫过于从软件中心直接安装了或者用命令行直接安装 sudo apt-get install git 但是这样的安装却使我们体会不到最新版本的功能,如果我们想要体 ...
- Javascript 原型注意事项
function abc() {} abc.prototype.xx = { name: "keatkeat" } var x = new abc(); x.xx.name = & ...
- 用keil怎么像makefile那样选择哪些文件进行编译?
因为设备有多种不同的型号的硬件,所以就有不同的驱动,我想在编译的时候,像在linux下的makeile那样,自己写一个编译连接的东西,来控制我哪些文件进行编译链接,不知道在keil下有没有这样的方法. ...
- 资本助力转型 TCL攻守转换(转型、并购、过冬前一定要保留强大的战略预备队)
吴侨发 9月份,TCL集团(3.92, 0.00, 0.00%)160多位高管启动四天戈壁行.在戈壁行第三天,30多公里的戈壁,差不多等于平路50公里,最后两只队伍走了13个小时.路途的艰辛几乎超过这 ...
- logstash 发送zabbix告警
<pre name="code" class="html">[elk@dr-mysql01 test]$ cat t1.conf input { s ...
- mv,Directory not empty不能目录覆盖
一.mv /test1/* /test2/test1rm -rf /test1 二. You can however use rsync with the --remove-source-files ...
- BZOJ2084: [Poi2010]Antisymmetry
2084: [Poi2010]Antisymmetry Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 187 Solved: 125[Submit] ...