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的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
随机推荐
- php目录分隔符DIRECTORY_SEPARATOR
在windows我们习惯性的使用“\”作为文件分隔符,但是在linux上系统不认识这个标识,于是就要引入这个php内置变量了:DIRECTORY_SEPARATOR 路径分隔符 windows \ o ...
- iOS学习之导航条NavigationControl的一些属性设置
/** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationContr ...
- DataTables给表格绑定事件
$(document).ready(function() { $('#example').dataTable(); $('#example tbody').on('click', 'tr', func ...
- 最近用的几个sql语句
都在sqlserver数据库下操作,注意sqlserver与mysql和oracle的语法区别 用惯了mysql 和oracle,突然改用sqlserver,有诸多的不习惯,诸多的坑爹,好多的坑,一一 ...
- DatePickerDialog 控制只选择年月或年或月
etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...
- MyBatis映射文件的resultMap如何做表关联
MyBatis的核心是其映射文件,SqlMap文件,里面配置了项目中用到了什么SQL语句,和数据库相关的逻辑都在这个映射文件里.顾名思义,映射文件就是对Java对象和SQL的映射.这里简单介绍一下映射 ...
- ext3中xtype属性汇总
基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...
- pager-taglib 使用说明2
传两个值进去:1.pm.totles总记录数 2.pagesize 每页显示页数 3.<pg:param name="parentId"/>传给后台的变量值对(查询条件 ...
- Javascript:重用之道
近期写了大量的js,愈发觉得自己的代码过于冗余,所以,利用周末的时间研习代码重用之道,有了这篇博文所得: 重用代码: 1.尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2.把核心主程序实现 ...
- StretchDIBits使用方法
转自:http://blog.csdn.net/giantchen547792075/article/details/6996011 StretchDIBits 函数把DIB.JPEG.PNG图像中一 ...