一、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文件直接编译生成

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <link rel="icon" href="img/favicon.ico">

    <!--<link href="css/bootstrap.css" rel="stylesheet">-->

    <link rel="stylesheet" href="css/index.css">

    <!--[if lt IE 9]>

    <script src="js/html5shiv.min.js"></script>

    <script src="js/respond.min.js"></script>

    <![endif]-->

</head>

　　index.less部分如下：

@import "bootstrap.less";   //*************在自定义less文件中引入 bootstrap.less文件

body {

  font-family: 'SimHei';

  margin-top: 60px;

}

.logo {

  display: inline-block;

  width: 63px;

  height: 42px;

  background-image: url("../img/hdr-spr.png");

  background-position: 0 -512px;

  background-repeat: no-repeat;

  margin-top: -12px;

}

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

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

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

/*!

 * Bootstrap v3.3.5 (http://getbootstrap.com)

 * Copyright 2011-2015 Twitter, Inc.

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 */

// Core variables and mixins           //*******************用双斜杠注释掉不需要的样式************************//

@import "variables.less";

@import "mixins.less";

// Reset and dependencies

@import "normalize.less";

@import "print.less";

@import "glyphicons.less";

// Core CSS

@import "scaffolding.less";  //脚手架

@import "type.less";

@import "code.less";

@import "grid.less";

//@import "tables.less";  //表格

@import "forms.less";

@import "buttons.less";

// Components

@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";

// Components w/ JavaScript

@import "modals.less";

//@import "tooltip.less";

//@import "popovers.less";

//@import "carousel.less";

// Utility classes

@import "utilities.less";

@import "responsive-utilities.less";

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

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

　　

//== Colors

//

//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;

@gray-darker:            lighten(@gray-base, 13.5%); // #222

@gray-dark:              lighten(@gray-base, 20%);   // #333

@gray:                   lighten(@gray-base, 33.5%); // #555

@gray-light:             lighten(@gray-base, 46.7%); // #777

@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%); // #337ab7

@brand-success:         #5cb85c;

@brand-info:            #5bc0de;

@brand-warning:         #f0ad4e;

@brand-danger:          #d9534f;

@intel-blue:            #0071c5;

@blue-light:            #0082d6;

@blue-lighter:          #00adef;

@blue-std:              @intel-blue;

@blue-dark:             #0062a9;

@blue-darker:           #015291; //阴影

　　

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

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

//== Dropdowns　　　　　　　　　　　　　　　　　　　　　　　　　　

//　　

//## Dropdown menu container and contents.

//** Background for the dropdown menu.

@dropdown-bg:                    @blue-std;//#fff;

//** Dropdown menu `border-color`.

@dropdown-border:                rgba(0,0,0,.15);

//** Dropdown menu `border-color` **for IE8**.

@dropdown-fallback-border:       #ccc;

//** Divider color for between dropdown items.

@dropdown-divider-bg:            #fff;//#e5e5e5;

//** Dropdown link text color.

@dropdown-link-color:            #fff;//@gray-dark;

//** Hover color for dropdown links.

@dropdown-link-hover-color:      @blue-lighter;//darken(@gray-dark, 5%);

//** Hover background for dropdown links.

@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. ThinkPHP利用数据库字段做栏目的无限分类

    一直以来对cms后台的栏目管理不太理解,尤其是子栏目顶级栏目这种关系,通过网上的搜索与自己的摸索,实现方法如下(原理是利用数据库的path字段): 1.建立简单的栏目表: CREATE TABLE ` ...

  2. Redis C语言操作封装

    #ifndef BOYAA_FOURLANDLORD_REDISCLASS_H_20130217 #define BOYAA_FOURLANDLORD_REDISCLASS_H_20130217 #i ...

  3. Educational Codeforces Round 2 C. Make Palindrome —— 贪心 + 回文串

    题目链接:http://codeforces.com/contest/600/problem/C C. Make Palindrome time limit per test 2 seconds me ...

  4. 【mysql】mysql innodb 配置详解

    MySQL innodb 配置详解 innodb_buffer_pool_size:这是InnoDB最重要的设置,对InnoDB性能有决定性的影响.默认的设置只有8M,所以默认的数据库设置下面Inno ...

  5. 10个常见的 Android 新手误区

    在过去十年的移动开发平台中,作为资深的移动开发人员,我们认为Android平台是一个新手最广为人知的平台.它不仅是一个廉价的工具,而且有着良好的开发社区,以及从所周知的编程语言(Java),使得开发A ...

  6. Python: PS 图像调整--饱和度调整

    本文用 Python 实现 PS 图像调整中的饱和度调整算法,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/detail ...

  7. linux文件查找（find,locate）

    文件查找: locate:       非实时,模糊匹配,查找是根据全系统文件数据库进行的: # updatedb, 手动生成文件数据库 速度快   find:       实时       精确   ...

  8. Exception in thread “main” java.sql.SQLException: The server time zone value ‘�й���׼ʱ��’ is unrecognized or represents more than one time zone.

    Exception in thread “main” java.sql.SQLException: The server time zone value ‘�й���׼ʱ��’ is unrecogn ...

  9. gsoap开发webservice

    gSOAP编译工具提供了一个SOAP/XML 关于C/C++ 语言的实现,从而让C/C++语言开发web服务或客户端程序的工作变得轻松了很多.绝大多数的C++web服务工具包提供一组API函数类库来处 ...

  10. CS231n 2016 通关 第五、六章 Batch Normalization 作业

    BN层在实际中应用广泛. 上一次总结了使得训练变得简单的方法,比如SGD+momentum RMSProp Adam,BN是另外的方法. cell 1 依旧是初始化设置 cell 2 读取cifar- ...