twitter-bootstrap - 制作我自己的引导 btn 类

Question

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

这是如何做到的？我尝试过的各种方法只是让 less 文件根本无法解析。

就像是：

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

我尝试和自定义并组合到新类的各种样式似乎都有这个问题。

Answer 1

这是一个旧线程，但今天有更好的方法可以做到这一点，所以我想将它记录下来供其他人使用。

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

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

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

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

Answer 2

我通过添加仔细检查了您的代码

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

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

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

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

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

Answer 3

您按照应有的方式定义自定义按钮类。因此，这里有一些提示可能出现错误：

• 引导类在自定义类之后编译。因此，请检查您的较少导入层次结构。
• 引导类定义不是您的 less universum 的一部分，即它们不会导入到您作为参数传递给 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;
}

在您的 less 编译器中，您最终会执行

lessc styles.less > styles.css

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

希望这可以帮助。