有没有可能在不占据整个风格的情况下使用Bootstrap

Is it possible to use Bootstrap without it taking over the entire style?

本文关键字：风格 情况下 Bootstrap 有可能      更新时间：2023-09-26

在现有项目中使用Bootstrap有一种简单的方法吗？

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

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

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";
}

你也可以从这里下载引导程序：引导源，然后进入"less"目录，并添加一个名为"bootstrap-custom.less"的文件，在那里你将输入以下内容：

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

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

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

您可以在引导程序网站上使用"自定义"功能，只获得您想要的功能：Twitter引导程序下载页面。引导程序的大多数规则都是明确的。您可能只想忽略默认情况下隐含的重置规则。

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

自定义并下载-GetBootstrap

使用IFrame

只需制作一个包含bootstrap的html文档，在该页面上有您想要的bootstrap元素，然后使用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中导入一个引导样式表，也不需要进行自定义的引导，这可能很乏味。

您可以标记不想被特殊标记覆盖的样式。只要把！重要标签。在每一行代码后粘贴它可能需要很长时间，但这是值得的。或者，您可以使用bootstrap.css文件而不是引导程序链接，并删除所有覆盖您的样式的样式。你可以在这里下载引导css文件

相关文章：