Question

在现有项目中是否有一种简单的方法可以使用Bootstrap？

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

我真的很喜欢模态窗口，一些按钮，但我不想一直追捕bootstrap css将项目切换回默认样式。

Answer 1

Bootstrap 3 //更少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 source然后输入“less”目录并添加名为“bootstrap-custom.less”的文件，您将在其中输入以下内容：

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

“bs-cnt”用于BootStrap-CoNTainer。如果你愿意，你可以把它做得更久，但要记住，它会被粘贴在编译好的CSS中的很多地方，所以它是为了节省结束文件中的空间。

完成此操作后，使用您最喜欢的编译器编译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>

Answer 2

您可以使用bootstrap网站上的“自定义”功能来获取您想要的功能：Twitter Bootstrap Download Page。大多数bootstrap规则都是明确的。您可能只想省略默认情况下隐式的重置规则。

Answer 3

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

Customize and download - GetBootstrap

Answer 4

使用 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 中导入单个引导样式表，也不需要制作自定义引导程序，这可能很乏味。

Answer 5

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

是否有可能使用Bootstrap而不接管整个风格？

5 个答案:

Bootstrap 3 //更少1.4.0编辑：