Question

我想使用less制作我自己的按钮类，而不必将btn btn-large btn-red等添加到所有元素中。

如何更少地完成这项工作？我尝试过的各种事情只会使较少的文件无法解析。

类似的东西：

.my-button {
    .btn;
    .btn-large;
}

我似乎遇到了各种风格的问题，我尝试自定义并组合到新类中。

Answer 1

这是一个老线程，但今天有更好的方法可以做到这一点，所以我想留给其他人记录。

LESS 1.5引入了引用导入，所以今天你可以引用整个引导源并使用你想要的任何东西而不需要bootstrap本身的任何输出。

@import (reference) 'less/bootstrap.less';

.my-button {
    .btn;
    .btn-lg;
}

仅输出“.my-button”，因此您仍然可以从CDN引用引导程序，并让您的CSS仅包含您的自定义。

Answer 2

我通过添加

来仔细检查您的代码

.my-button {
.btn;
.btn-large;
}

到我的buttons.less文件，用less编译，并上传新的CSS文件。然后我添加了一个测试链接

<a class="my-button" href="#">test button</a>

一切看起来都不错。我知道直接编辑默认的bootstrap less文件不一定是个好主意，但它有助于快速排除一些问题。

您如何在更少的时间内自定义设置？

Answer 3

您可以按原样定义自定义按钮类。所以，这里有一些提示错误可能是：

自举类在自定义类之后编译。因此，请检查较少的导入层次结构。
引导类定义不属于你的较少的Universe，即，它们无法导入到较少的编译器作为参数传递给less less文件。

第二步，简要概述如何设置。

styles.less（这是你的主文件）。

// bootstrap base imports (v2.2.2)
@import "plugins/bootstrap/reset.less";
@import "plugins/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "plugins/bootstrap/mixins.less";
// [...]

@import "layouts.less";

请注意[...]代表所有其他引导程序导入（请参阅https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less处的主要引导程序文件）。

您的layouts.less定义了您已经写过的自定义按钮类：

.my-button {
    .btn;
    .btn-large;
}

在较少的编译器中，最终会执行

lessc styles.less > styles.css

另请注意，您需要文件夹plugins/bootstrap/中实际较少的引导程序文件。

希望这有帮助。

制作我自己的bootstrap btn类

3 个答案: