1. 安装 Less
首先，确保你已经安装了 Less。你可以通过 npm 进行安装：
npm install -g less
2. 下载 Bootstrap 源码
从 [Bootstrap 官网](https://getbootstrap.com) 下载 Bootstrap 的源码。解压缩后，你将得到一个包含 Less 文件的 scss 文件夹。
3. 创建一个 Less 文件
在你的项目中创建一个 Less 文件，比如 custom.less，用于存放你的定制样式。
4. 导入 Bootstrap Less 文件
在你的 Less 文件中，通过 @import 导入 Bootstrap 的 Less 文件。一般来说，你只需要导入 bootstrap.less 文件，它会引入所有 Bootstrap 组件的 Less 文件。
@import "path/to/bootstrap.less";
5. 编写自定义样式
在导入 Bootstrap 文件后，你可以开始编写你自己的样式。使用 Less 的特性，比如变量、嵌套和混合，可以更方便地定制样式。
// 定义变量
@my-color: #ff0000;
// 使用变量
body {
background-color: @my-color;
}
// 嵌套规则
.header {
h1 {
font-size: 24px;
}
p {
color: #333;
}
}
// 定义混合
.rounded-corners() {
border-radius: 5px;
}
.button {
.rounded-corners();
background-color: @my-color;
}
6. 编译 Less 文件
使用 Less 编译器将你的 Less 文件编译成 CSS 文件。在命令行中运行：
lessc custom.less > custom.css
7. 在项目中引入样式
在你的 HTML 文件中引入生成的 CSS 文件：
<link rel="stylesheet" href="path/to/custom.css">
8. 实时编译（可选）
为了更方便地开发，你可以使用 Less 提供的实时编译功能。在命令行中运行：
lessc --watch custom.less > custom.css
这样，每当你保存 custom.less 文件时，Less 将自动重新编译成 CSS 文件。
转载请注明出处：http://www.zyzy.cn/article/detail/12645/Bootstrap