一、LESS是什么？

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

中文介绍：http://lesscss.cn/

有JS基础的同学应该很快就能掌握LESS

二、准备工作，在一个bootstrap项目中使用LESS。

　　上面的网站介绍了LESS的多种入门方法，这里主要以npm+webstorm 为例：在本地项目中使用LESS生成CSS 通过LESS的语言特性减少编写和维护的难度；

　　　解压npm 得到如下文件：

　　

　　在webstrom中需要使用LESS的项目里做如下设置： （地址为 lessc.cmd 的绝对路径）

　　

　　打开bootstarp的 LESS文件夹 将所有文件复制到webstorm： 如下

　　我们需要注意的是bootstrap.less 和 variables.less 这两个文件

　　

三、合并所有样式：

　　HTML部分仅仅剩下一个 CSS LINK

　　index.css文件 由index.less文件直接编译生成

  1. <head>
  2.     <meta charset="utf-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5.     <title>Bootstrap 101 Template</title>
  6.     <link rel="icon" href="img/favicon.ico">
  7.     <!--<link href="css/bootstrap.css" rel="stylesheet">-->
  8.     <link rel="stylesheet" href="css/index.css">
  9.     <!--[if lt IE 9]>
  10.     <script src="js/html5shiv.min.js"></script>
  11.     <script src="js/respond.min.js"></script>
  12.     <![endif]-->
  13.  
  14. </head>

　　index.less部分如下：

  1. @import "bootstrap.less";   //*************在自定义less文件中引入 bootstrap.less文件
  2.  
  3. body {
  4.   font-family: 'SimHei';
  5.   margin-top: 60px;
  6. }
  7.  
  8. .logo {
  9.   display: inline-block;
  10.   width: 63px;
  11.   height: 42px;
  12.   background-image: url("../img/hdr-spr.png");
  13.   background-position: 0 -512px;
  14.   background-repeat: no-repeat;
  15.   margin-top: -12px;
  16. }

我们通过一个index.less文件 生成了一个本地的indes.css文件

 四、给bootstrap瘦身，删除在项目中没有使用的的bootstrap样式。

通过上面的观察 我们发现bootstrap的CSS是有无数个less文件组合编译而成的，观察如下bootstrap.less文件：

  1. /*!
  2.  * Bootstrap v3.3.5 (http://getbootstrap.com)
  3.  * Copyright 2011-2015 Twitter, Inc.
  4.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  5.  */
  6.  
  7. // Core variables and mixins           //*******************用双斜杠注释掉不需要的样式************************//
  8. @import "variables.less";
  9. @import "mixins.less";
  10.  
  11. // Reset and dependencies
  12. @import "normalize.less";
  13. @import "print.less";
  14. @import "glyphicons.less";
  15.  
  16. // Core CSS
  17. @import "scaffolding.less";  //脚手架
  18. @import "type.less";
  19. @import "code.less";
  20. @import "grid.less";
  21. //@import "tables.less";  //表格
  22. @import "forms.less";
  23. @import "buttons.less";
  24.  
  25. // Components
  26. @import "component-animations.less";
  27. @import "dropdowns.less";
  28. //@import "button-groups.less";
  29. //@import "input-groups.less";
  30. @import "navs.less";
  31. @import "navbar.less";
  32. //@import "breadcrumbs.less";
  33. //@import "pagination.less";
  34. //@import "pager.less";
  35. //@import "labels.less";
  36. //@import "badges.less";
  37. //@import "jumbotron.less";
  38. //@import "thumbnails.less";
  39. //@import "alerts.less";
  40. //@import "progress-bars.less";
  41. @import "media.less";
  42. //@import "list-group.less";
  43. //@import "panels.less";
  44. @import "responsive-embed.less";
  45. //@import "wells.less";
  46. @import "close.less";
  47.  
  48. // Components w/ JavaScript
  49. @import "modals.less";
  50. //@import "tooltip.less";
  51. //@import "popovers.less";
  52. //@import "carousel.less";
  53.  
  54. // Utility classes
  55. @import "utilities.less";
  56. @import "responsive-utilities.less";

　最后 我们通过一个index.less文件 生成了一个本地的indes.css文件　 原本近7000行的bootstrap.css代码在与本地css代码合并后 只有不到5000行

五、添加或修改variables.less中的预定义变量，对bootstrap进行粗粒度的修改

　　

  1. //== Colors
  2. //
  3. //## Gray and brand colors for use across Bootstrap.
  4.  
  5. @gray-base:              #000;
  6. @gray-darker:            lighten(@gray-base, 13.5%); // #222
  7. @gray-dark:              lighten(@gray-base, 20%);   // #333
  8. @gray:                   lighten(@gray-base, 33.5%); // #555
  9. @gray-light:             lighten(@gray-base, 46.7%); // #777
  10. @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
  11.  
  12. @brand-primary:         darken(#428bca, 6.5%); // #337ab7
  13. @brand-success:         #5cb85c;
  14. @brand-info:            #5bc0de;
  15. @brand-warning:         #f0ad4e;
  16. @brand-danger:          #d9534f;
  17.  
  18. @intel-blue:            #0071c5;
  19. @blue-light:            #0082d6;
  20. @blue-lighter:          #00adef;
  21. @blue-std:              @intel-blue;
  22. @blue-dark:             #0062a9;
  23. @blue-darker:           #015291; //阴影

　　

比如在colors:模块中定义了 项目所需要的几种颜色   “@变量名”

并作出如下修改：  修改了dropdown的几个预定义颜色 使用“//”注释的方法  这里不推荐直接删除

  1. //== Dropdowns　　　　　　　　　　　　　　　　　　　　　　　　　　
  2. //　　
  3. //## Dropdown menu container and contents.
  4.  
  5. //** Background for the dropdown menu.
  6. @dropdown-bg:                    @blue-std;//#fff;
  7. //** Dropdown menu `border-color`.
  8. @dropdown-border:                rgba(0,0,0,.15);
  9. //** Dropdown menu `border-color` **for IE8**.
  10. @dropdown-fallback-border:       #ccc;
  11. //** Divider color for between dropdown items.
  12. @dropdown-divider-bg:            #fff;//#e5e5e5;
  13.  
  14. //** Dropdown link text color.
  15. @dropdown-link-color:            #fff;//@gray-dark;
  16. //** Hover color for dropdown links.
  17. @dropdown-link-hover-color:      @blue-lighter;//darken(@gray-dark, 5%);
  18. //** Hover background for dropdown links.
  19. @dropdown-link-hover-bg:         @blue-std;//#f5f5f5;

　　仅仅是一些简单的变量修改，就让你的bootstrap更加契合你的项目。

六、深度定制 bootstrap

　  bootstrap中的每个组件都是独立不受影响的

　　深度定制即修改各组件的LESS文件

　　每个LESS都是可以修改的

　　尽量通过“@”方法来声明并储存的预定义样式（颜色 尺寸...）

　　然后通过修改预定义变量值来改变整个样式 。

　　最终通过LESS +BOOTSTARP的部分组（比如栅格系统）件来实现任何页面的编写

如何使用LESS 深度定制Bootstrap的更多相关文章

  1. 定制Bootstrap遇到无法下载的解决——Blob下载注意事项

    今天定制bootstrap(在这里),全部的勾都选过了,于是兴高采烈地点击“编译并下载”.等了一会儿,迅雷7跳出来了“新建下载任务”,但是它居然说这个url不合法! url像这样: blob:http ...

  2. 网易云基于 Kubernetes 的深度定制化实践

    本文由  网易云发布. 2017 年,Kubernetes 超越 Mesos 和 Docker Swarm成为最受欢迎的容器编排技术.网易云从 2015 下半年开始向 Kubernetes 社区贡献代 ...

  3. 阿里内部分享：我们是如何?深度定制高性能MySQL的

    阿里云资深数据库工程师赵建伟在“云栖大会上海峰会”的分享.核心是阿里云的数据库服务和MySQL分支的深度定制实践分享. 阿里巴巴MySQL在全球都是有名的.不仅是因为其性能,还因为其是全世界少数拥有M ...

  4. WinCE系统深度定制汇总

    WinCE应用程序崩溃提示框的处理 WinCE6.0多国语言软键盘 定制WinCE6.0标准界面的一种方法 如何禁用WinCE下的沙漏图标 Silent RNAApp.exe for WinCE6.0 ...

  5. 修改原代码定制bootstrap

    1.下载对应的Bootstarap和node.js 注:less文件夹中包含了bootstrap中所有样式组件的less源代码: dist保存编译后的css和js等文件 2.命令行输入npm inst ...

  6. vue init深度定制团队自己的Vue template

    大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方 ...

  7. C#快递跟踪（基于快递100深度定制）

    本文主要介绍快递跟踪的相关信息.如根据快递单号预测所属快递公司,判断快递是否已被签收,以及改良官方model后可在不用申请授权的情况下实现json,html,xml及text等多种格式以及单行多行,降 ...

  8. 如何更高效地定制你的bootstrap

    bootstrap已经作为前端开发必不可少的框架之一,应用bootstrap使得我们对布局.样式的设定变得非常简单.但bootstrap提供的默认样式往往不能满足我们的需求,从而定制化bootstra ...

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

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

随机推荐

  1. delphi2010\delphi XE7 开发及调试WebService 实例

    使用delphi已经10多年了,一直搞桌面程序开发,对Webservice一直很陌生,近来因工作需要,学习delphi开发WebService,担心遗忘,作此笔记. 特别感谢 中塑在线技术总监 大犇  ...

  2. CentOS（Linux） - 安装软件笔记（一） - VPSMate（服务器可视化管理工具）安装

    更多详情点击参考官网说明 vpsmate官方推荐centos版本为6.2 64位 使用 SSH 连接工具,如 PuTTY.XShell.SecureCRT 等,连接到您的 Linux 服务器. 执行以 ...

  3. 人生苦短之Python的urllib urllib2 requests

    在Python中涉及到URL请求相关的操作涉及到模块有urllib,urllib2,requests,其中urllib和urllib2是Python自带的HTTP访问标准库,requsets是第三方库 ...

  4. __FILE__,__LINE__,__func__ 真好用，DEBUG利器啊！

    我是不喜欢用类似VC下的F5,F10.曾经很喜欢用.被代码逻辑逼的没招了.所以不喜欢用了. 比如,错误是根据动态数据,产生的行为错误,无论是该写的未写,还是不该写的写了.指针跑飞什么等等,无非就是上述 ...

  5. php函数的参数引用变量

    在php.ini中将allow_call_time_pass_reference的值改为'on'.

  6. Mongodb 官网驱动2.2.4.26版本 增，删 改，查，mongodb2.2.4.26

    Mongodb是3.2.7版本 最近在学习mongodb数据库在网上找到的都不是2.X版本以下的,因为驱动从2.X以后修改了很多,以前不支持linq现2.X也支持了, Mongodb 启动服务就不说了 ...

  7. 《UML和模式应用》读书笔记（一）

    一.绪论 1. 面向对象分析和设计 1.1 什么是分析和设计 分析(analysis)强调的是对问题和需求的调查研究,而不是解决方案. 设计(design)强调的是满足需求的概念上的解决方案,而不是其 ...

  8. 002 - 配置Pycharm的背景颜色为豆沙绿护眼

    本文记录的是Pycharm2017年1月版本 Pycharm有自带的主题可供选择, 好多小伙伴喜欢使用Monoka的风格 但是也有不是很喜欢黑底风格的小伙伴可以使用默认主题+豆沙绿来替代 默认主题是白 ...

  9. 可移植的配置visual studio工程第三方库

    现在编程有太多的好用的第三方库,例如 计算机视觉方面的opencv c++的扩充库boost 特殊的第三方库,相机库,通讯库等 使用这些库给我们带来了极大的便利,同时也有很多困扰.这个工程在我电脑上明 ...

  10. 1 python----pycharm本地部署spark

    下图相关工具连接 链接:https://pan.baidu.com/s/115XWf_Fc1yMiJytKJQXnFQ   密码:3jvr 好了,加油哟!