61

我有一个现有的网站，其中有很多旧页面和表格，我正试图逐步过渡到 CSS。我想使用 Twitter Bootstrap 样式表——尤其是表单的样式——但仅限于我明确要求它们的页面部分。例如，我可能将整个表单包围在一个 div 中，如下所示：

<div class="bootstrap">
 <!-- everything in here should have the Bootstrap CSS applied -->
 <form>
   <p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
 </form>
</div>

我希望所有其他形式保持与现在相同，因为我无法同时更改它们。有没有一种简单的方法可以做到这一点？我可以检查 Bootstrap CSS 中的每一个样式并添加一个父选择器（例如，'p' 会变成'div.bootstrap p'），但这需要很长时间，而且很容易错过样式。

编辑：如果这样的事情是不可能的，是否有一个免费工具可以从文件中提取所有样式，添加前缀然后再次保存它们？

4

7 回答 7

46

对于 Bootstrap 3，如果你使用它会更容易less：

下载 Bootstrap 源代码并制作style.less如下文件：

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

最后，你必须编译less文件；有很多选择

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js

或使用npm安装然后将文件less编译为：style.lessstyle.css

npm install -g less
lessc style.less style.css
于 2013-02-27T14:55:15.343 回答
28

最后的解决方法是使用SASS（由场外人员推荐），因为它允许您嵌套元素，然后自动生成最终的 CSS。一步一步的过程是：

  1. 将两个 Bootstrap 文件（bootstrap.css和bootstrap-responsive.css）连接到bootstrap-all.css.
  2. 创建一个新的 SASS 文件，bootstrap-all.scss，内容为div.bootstrap {.
  3. 附加bootstrap-all.css到bootstrap-all.scss.
  4. div.bootstrap通过附加}到关闭选择器bootstrap-all.scss。
  5. 运行 SASSbootstrap-all.scss以生成最终的 CSS 文件。
  6. 在最终文件上运行YUI Compressor以生成最小化版本。
  7. 将最小化版本添加到 head 元素并将我希望样式应用于的所有内容都包含在<div class="bootstrap"></div>.
于 2012-08-07T08:25:34.640 回答
15

如果你因为工作/其他原因不能使用 LESS/SASS，我想出了一个 CSS 解决方案。

  1. 我使用了这个网站http://www.css-prefix.com/，并将 bootstrap.min.css 复制/粘贴到那里。我设置前缀='.bootstrap'和间隔=''。除了不完美之外，它将在所有内容前面加上 .bootstrap。
  2. 如果你对 '.bootstrap @media' 执行 grep，你会发现左括号右边的第一个类没有 .bootstrap 作为父类。将 .bootstrap 添加到所有这些事件中，对我来说大约是 68 个。
  3. 然后用“@media”替换所有“.bootstrap @media”。
  4. 最后一步是将所有 '.bootstrap @' 替换为 '@' （应该大约出现 5 次）。

例子：

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

需要更换为 

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

一种蛮力方法，所以一定要先尝试上面的 LESS/SASS 方法。

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>
于 2015-06-25T20:56:52.773 回答
6

我有一个简单的解决方案。

  1. 将引导 css 内容复制到此 ( http://css2sass.herokuapp.com/ ) 在线 css 到 scss/sass 转换器。

  2. 将您的标签信息（例如div.bootstrap{）添加到 scss 内容的开头并在末尾关闭标签。

  3. 将整个 scss 内容复制到这个 scss 到 css 转换器 ( https://www.sassmeister.com/ ) 并转换它:)

于 2017-12-08T10:51:20.610 回答
4

我对这些答案中的任何一个都不满意。使用 Less 来确定规则的范围会产生各种缺陷。例如，Clearfix 就一团糟。像这样的规则button.close变成button.bootstrap close了我真正想要的：.bootstrap button.close.

我采取了不同的方法。我正在使用PostCSS处理随 Bootstrap 提供的开箱即用的 CSS。我正在使用Scopify插件来使用.bootstrap.

这主要到达那里。当然，有些html规则body变得.bootstrap html毫无.bootstrap body意义。不用担心...我可以编写一个 PostCSS 转换来清理它们：

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

class="bootstrap"现在，我可以通过在顶层添加 a 来隔离所有 Bootstrap 样式。

于 2016-01-25T21:21:13.933 回答
3

这很难。您不能为同一网页的不同部分应用不同的 css 样式表。

我怀疑这样做的唯一方法是为您的内容制作一个单独的文件以采用引导样式，并将其 i-frame 放入页面中，如下所示：

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

然后在content-to-take-bootstrap-styles.html 标题中引用引导样式表。但是你有 iframe 的所有复杂性——例如：iframe 元素不会增长以适应你的内容的长度。

于 2012-08-06T15:46:49.257 回答
1

您可以使用现成的用于 Bootstrap 4.1 的隔离 css（使用 LESS 编译）-

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

它为主题提供了独立的 css -

要使用 Bootstrap CSS，只需使用类 bootstrapiso 将 HTML 包装在一个 div 中，如下所示：

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

并使用文件夹 css4.1 中的任何 css 样式，如下所示：

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

完毕！

于 2018-04-16T17:22:52.290 回答