第一篇博,希望支持。

近期在开发一个项目,项目前端定位于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入门及编译的更多相关文章

  1. BOOTSTRAP定制

    1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1        ~         ...

  2. 第87节:Java中的Bootstrap基础与SQL入门

    第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...

  3. Bootstrap定制开发

    Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...

  4. 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑

     壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...

  5. 手摸手教你bootstrap定制

    老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内 ...

  6. Bootstrap定制(二)less基础语法

    前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. Bootstrap前端框架快速入门专题

    1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...

  9. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...

随机推荐

  1. HTML&CSS基础学习笔记1.20-DIV标签2

    <span>标签 标签div把文档分割为独立的.不同的部分,而在HTML中,<span>标签则被用来组合文档中的行内元素. 看个实例: <!DOCTYPE html> ...

  2. JavaWeb学习笔记--Listener

    JSP中的监听器   Web程序在服务器运行的过程中,程序内部会发生多事件,如Web应用的启动和停止.Session会话的开始和销毁.用户请求的开始和结束等等.有时程序员需要在这些事件发生的时机执行一 ...

  3. 开始3D编程前需注意的十件事

    http://www.csdn.net/article/2013-06-21/2815949-3d-programming 原文作者Vasily Tserekh是名3D编程爱好者,他发表了一篇博文&l ...

  4. ubuntu 下GIT的安装

    linux下软件的安装方式有多种,最简单的莫过于从软件中心直接安装了或者用命令行直接安装 sudo apt-get install git 但是这样的安装却使我们体会不到最新版本的功能,如果我们想要体 ...

  5. Javascript 原型注意事项

    function abc() {} abc.prototype.xx = { name: "keatkeat" } var x = new abc(); x.xx.name = & ...

  6. 用keil怎么像makefile那样选择哪些文件进行编译?

    因为设备有多种不同的型号的硬件,所以就有不同的驱动,我想在编译的时候,像在linux下的makeile那样,自己写一个编译连接的东西,来控制我哪些文件进行编译链接,不知道在keil下有没有这样的方法. ...

  7. 资本助力转型 TCL攻守转换(转型、并购、过冬前一定要保留强大的战略预备队)

    吴侨发 9月份,TCL集团(3.92, 0.00, 0.00%)160多位高管启动四天戈壁行.在戈壁行第三天,30多公里的戈壁,差不多等于平路50公里,最后两只队伍走了13个小时.路途的艰辛几乎超过这 ...

  8. logstash 发送zabbix告警

    <pre name="code" class="html">[elk@dr-mysql01 test]$ cat t1.conf input { s ...

  9. mv,Directory not empty不能目录覆盖

    一.mv /test1/* /test2/test1rm -rf /test1 二. You can however use rsync with the --remove-source-files ...

  10. BZOJ2084: [Poi2010]Antisymmetry

    2084: [Poi2010]Antisymmetry Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 187  Solved: 125[Submit] ...