18

我是 Bootstrap 的新手，所以这对你们来说可能是一个天真的问题。但我敢肯定，其他人也有或将有类似的问题，所以就这样吧。

我正在为一个已经存在了很长一段时间并经过多年发展的网站实施引导程序。一旦我将引导 css 和 js 添加到我的 html 中，许多元素就会变得混乱。据我所知，这归因于我使用与引导程序相同的类名。例如，我有一个名为“btn”的类，bootstrap 也是如此。我所有的按钮看起来都很丑和/或形状很奇怪。名单还在继续。

当人们第一次在现有网站上实施 Bootstrap 时，这是否与课程相当？是否只是浏览旧的 css 文件并重命名的问题？有什么优雅的解决方案吗？

4

5 回答 5

30

Paul and Millimoose both provided the solution that worked for me. However, for newbies, the solution took a bit of digging, so here's a step by step description of what worked for me (and what I believe they were recommending).

  1. Basically, you have to modify the bootstrap css file. Basically wrap the entire bootstrap css file inside this:

    .bootstrap{ //entire boostrap css file goes here }

  2. Use http://winless.org/online-less-compiler to generate new css code. You'll need to past the code above into the left hand side of form in the above link.

  3. Copy and past the output from the above link into a css file. Include this css file in your html.

  4. When needing to use boostrap, simply place around the elements you want bootstrap to apply to.

Big thanks for all the help in figuring out this solution. Works well.

于 2013-08-07T03:45:01.407 回答
3

我认为最简单的方法是使用 css 预处理器来命名所有引导 css 组件。

如果您访问他们的 github 存储库：https ://github.com/twbs/bootstrap/ ，您会看到他们的代码分布较少。从那里，您可以通过将库包装在某种类中来命名它们的所有样式，例如提到的 millimoose。

从它们中，您可以将引导命名空间添加到某些 html 元素，并且该库只会影响该 dom 节点及其子节点。

于 2013-08-06T23:52:21.957 回答
1

我在一个名为 .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e的类中使用 Bootstrap 3 做了一个 GIST

我从这个工具开始：http ://www.css-prefix.com/ 并通过 PHPstorm 中的搜索和替换来修复其余部分。所有字体@font-face 都托管在 maxcdn 上。

第一行示例

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
于 2015-12-28T20:23:18.860 回答
0

当 HTML 文档识别其中一种样式的两个参数时，会出现此问题。

删除或评论或修改导致项目混乱的参数。 bootstrap.css文件或任何其他参考，除了您的自定义 css文件。

注意bootstrap.min.css：当您使用文件格式时，您无法执行此操作。使用bootstrap.css而min不可编辑。

于 2020-01-27T13:30:53.687 回答
-1

一种解决方案是复制 Bootstrap.css 文件并将其包装在任何包装器中

.wrapper{
//bootstrap code
}

并将文件保存为 scss，例如 styles.scss

之后打开命令提示符或终端并键入以下命令

npx sass styles.scss destination.css

这将创建一个包含 wrapper 作为顶级样式的目标 CSS 文件，因此要使用这些样式，您必须使用

<div class="wrapper">
//your elements that will use bootstrap
</div>
于 2021-06-21T11:25:31.560 回答