是否可以在不接管整个风格的情况下使用 Bootstrap？答案

【问题标题】：Is it possible to use Bootstrap without it taking over the entire style?是否可以在不接管整个风格的情况下使用 Bootstrap？
【发布时间】：2012-04-17 05:53:08
【问题描述】：

有没有在现有项目中使用 Bootstrap 的简单方法？

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

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

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

您可以标记不希望被特殊标记覆盖的样式。只需输入!important tag。在每一行代码之后粘贴它可能需要很长时间，但值得花时间。或者您可以使用 bootstrap.css 文件而不是 bootstrap 链接并删除所有覆盖您的样式的样式。可以下载bootstrap css文件here

【讨论】：

“是否值得”值得商榷。

【解决方案2】：

使用 IFrame

只需制作一个包含引导程序的 html 文档，在该页面上添加您想要的引导程序元素，然后使用 iframe 在另一个页面上获取它..

element_name.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Element</title>
</head>
<body>
    <!--Code for the actual element-->
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
  border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>

element.html 中的元素将像它自己的元素一样集成到 index.html 中，甚至不需要在 index.html 中导入单个引导样式表，也不需要制作自定义引导，这可能很乏味。

【讨论】：

【解决方案3】：

我认为已回答部分中的链接尚未更新。在这里，您可以直接在 GetBootstrap 网站上自定义您的 Bootstrap：

Customize and download - GetBootstrap

【讨论】：

但是你必须自己提供它并且不能从CDN加载它

【解决方案4】：

Bootstrap 3 // Less 1.4.0 编辑：

在 Bootstrap 3 和 Less 1.4.0 发布后，bootstrap 开始使用 :extend() 伪选择器。这意味着在我发布的原始代码中某些事情会失败（你会得到一些.bscnt .bscnt form-horizontal 代码，这意味着你必须在彼此之间嵌套两个 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";
}

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

完成此操作后，使用您最喜欢的 less 编译器简单地编译 bootstrap-custom.less 文件（SimpLESS 如果您在 Windows 上非常好），然后您将获得一个已编译的引导文件仅当您放置具有“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>

【讨论】：

很好的解决方案！谢谢！
@sureshvv 你能检查一下你编译的 CSS 文件，看看前面是否有 .bs-cnt 吗？
是的.. 在 chrome 上效果很好.. 模式对话框不会在 firefox 上弹出
@sureshvv 然后好像firefox有bug，但好像不太可能。你能把你的 CSS 文件上传到某个地方吗？
我发现了问题。我还在使用 jquery.jqtransform.js，它让 firefox 窒息。摆脱它。

【解决方案5】：

您可以使用引导网站上的“自定义”功能来仅获取您想要的那些功能：Twitter Bootstrap Download Page。大多数引导程序的规则都是明确的。您可能只想忽略默认情况下隐含的重置规则。

【讨论】：

非常感谢这个想法，我不知道为什么我没有想到我的判断一定是模糊的，你知道该列表中的哪些项目需要勾选才能达到我想要的？我可能会在早上的第一件事上详尽地测试不同的可能性，我想我应该勾选所有 Base CSS 项目
正如我所说，您可能希望删除“规范化和重置”选项以及“正文类型和链接”、“代码和前置”、“标题、正文等”、“标签”、“表格”和“表格”。这应该会处理大多数侵入性规则。
更新到新的自定义链接。
当前的自定义工具 (getbootstrap.com/customize) 不提供这些选项。我取消选中了所有内容，但仍然得到了混淆所有元素的 CSS 文件。
但是你不能再从 CDN 加载引导程序，你必须从你自己的服务器上提供它......