最近在写一个新闻站的模板,为了快速完成,用了bootstrap,但是bootstrap默认的样式填了不少麻烦。于是打算顺便定制化一下bootstrap,就研究起了less。要说明的是bootstrap提供了Less跟Sass的源码,这里我选择用less来修改。(PS:别问我为什么用Less,我也不知道)

英语渣,先看了下bootstrap.less的加载顺序。

// 核心变量和混入
@import “variables.less”;//变量
@import “mixins.less”;/混入

// 复位和依赖关系
@import “normalize.less”;//正常化
@import “print.less”;//打印
@import “glyphicons.less”;

// 核心CSS
@import “scaffolding.less”;//脚手架
@import “type.less”;//类型
@import “code.less”;//码?
@import “grid.less”;//栅格
@import “tables.less”;//表格
@import “forms.less”;//表单
@import “buttons.less”;//按钮

// 组件
@import “component-animations.less”;//组件动画
@import “dropdowns.less”;/下拉菜单
@import “button-groups.less”;//按钮组
@import “input-groups.less”;//输入组
@import “navs.less”;//导航
@import “navbar.less”;//导航栏
@import “breadcrumbs.less”;//面包屑导航
@import “pagination.less”;//分页
@import “pager.less”;//页面
@import “labels.less”;//标签
@import “badges.less”;//徽章
@import “jumbotron.less”;//超大屏幕
@import “thumbnails.less”;//缩略图
@import “alerts.less”;//警报
@import “progress-bars.less”;//进度条
@import “media.less”;//多媒体
@import “list-group.less”;//列表组
@import “panels.less”;//面板组
@import “responsive-embed.less”;//响应式嵌入
@import “wells.less”;//井?
@import “close.less”;//开关

// 组件W / JavaScript
@import “modals.less”;
@import “tooltip.less”;//提示
@import “popovers.less”;
@import “carousel.less”;

// 工具类
@import “utilities.less”;//公共工具
@import “responsive-utilities.less”;//响应式公共工具

说明:没有翻译的是谷歌翻译没有,还没查看,所以没有备注,翻译带“?”的是觉得意思不准确,后面会有更新。