javascript - 是否可以在不接管整个样式的情况下使用 Bootstrap？

Question

有没有一种在现有元素中使用 Bootstrap 的简单方法？

目前，它为表格等添加样式，这会弄乱页面中的所有内容。

我真的很喜欢模态窗口和一些按钮，但我不想一直寻找 bootstrap css 来将元素切换回默认样式。

Answer 1

Bootstrap 3//Less 1.4.0 编辑:

在 Bootstrap 3 和 Less 1.4.0 出来之后，bootstrap 开始使用 :extend() 伪选择器。这意味着某些事情会在我发布的原始代码中失败(你会得到一些 .bscnt .bscnt form-horizo​​ntal 代码，这意味着你必须在彼此内部嵌套两个 div，这只是哑的)。解决此问题的简单方法是从 bootstrap.less 中删除前两行(@import variables.less 和 @import mixins.less ) 而不是将这些文件导入 .bs-cnt 范围之外:

@import "variables.less";
@import "mixins.less";

.bscnt {
    @import "bootstrap.less";
}

---

您也可以从这里下载 Bootstrap :Bootstrap source然后进入“less”目录并添加一个名为“bootstrap-custom.less”的文件，您将在其中输入以下内容:

.bs-cnt {
    @import "bootstrap.less";
}

BootStrap-ConTainer 的“bs-cnt”。如果你愿意，你可以让它更长，但请记住它会被粘贴在编译后的 CSS 中的很多地方，所以这是为了节省最终文件的空间。

完成此操作后，使用您最喜欢的 less 编译器(SimpLESS 在 Windows 上非常好)简单地编译 bootstrap-custom.less 文件，然后您将拥有一个已编译的 Bootstrap 文件仅当您放置类为“bs-cnt”的容器元素时才有效。

<div class="bs-cnt">
    <button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>