第一篇博,希望支持。

近期在开发一个项目,项目前端定位于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. php目录分隔符DIRECTORY_SEPARATOR

    在windows我们习惯性的使用“\”作为文件分隔符,但是在linux上系统不认识这个标识,于是就要引入这个php内置变量了:DIRECTORY_SEPARATOR 路径分隔符 windows \ o ...

  2. iOS学习之导航条NavigationControl的一些属性设置

    /** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationContr ...

  3. DataTables给表格绑定事件

    $(document).ready(function() { $('#example').dataTable(); $('#example tbody').on('click', 'tr', func ...

  4. 最近用的几个sql语句

    都在sqlserver数据库下操作,注意sqlserver与mysql和oracle的语法区别 用惯了mysql 和oracle,突然改用sqlserver,有诸多的不习惯,诸多的坑爹,好多的坑,一一 ...

  5. DatePickerDialog 控制只选择年月或年或月

    etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...

  6. MyBatis映射文件的resultMap如何做表关联

    MyBatis的核心是其映射文件,SqlMap文件,里面配置了项目中用到了什么SQL语句,和数据库相关的逻辑都在这个映射文件里.顾名思义,映射文件就是对Java对象和SQL的映射.这里简单介绍一下映射 ...

  7. ext3中xtype属性汇总

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...

  8. pager-taglib 使用说明2

    传两个值进去:1.pm.totles总记录数 2.pagesize 每页显示页数 3.<pg:param name="parentId"/>传给后台的变量值对(查询条件 ...

  9. Javascript:重用之道

    近期写了大量的js,愈发觉得自己的代码过于冗余,所以,利用周末的时间研习代码重用之道,有了这篇博文所得: 重用代码: 1.尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2.把核心主程序实现 ...

  10. StretchDIBits使用方法

    转自:http://blog.csdn.net/giantchen547792075/article/details/6996011 StretchDIBits 函数把DIB.JPEG.PNG图像中一 ...