仅将 CSS 样式应用于某些元素

Question

提问by pwaring

I have an existing website with lots of old pages and forms laid out with tables which I am trying to gradually transition to CSS. I want to use the Twitter Bootstrap stylesheets - particularly the styles for forms - but only on sections of pages where I have explicitly requested them. For example, I might surround the whole form in a div like so:

我有一个现有的网站，里面有很多旧页面和表格，表格中布置了表格，我正试图逐渐过渡到 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>

I want all other forms to remain the same as they are now, because I won't be able to change them all at the same time. Is there a simple way to do this? I could go through every single style in the Bootstrap CSS and add a parent selector (e.g. 'p' would become 'div.bootstrap p'), but that would take a long time and it would be easy to miss styles.

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

Edit: If such a thing isn't possible, is there a free tool which can extract all the styles from a file, add a prefix and then save them back again?

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

Answer 1

采纳答案by pwaring

The final fix was to use SASS(recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:

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

Concatenate the two Bootstrap files (bootstrap.cssand bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.cssto bootstrap-all.scss.
Close the div.bootstrapselector by appending }to bootstrap-all.scss.
Run SASS on bootstrap-all.scssto produce a final CSS file.
Run YUI Compressoron the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.

将两个 Bootstrap 文件（bootstrap.css和bootstrap-responsive.css）连接到bootstrap-all.css.
创建一个新的 SASS 文件，bootstrap-all.scss内容为div.bootstrap {.
附加bootstrap-all.css到bootstrap-all.scss.
div.bootstrap通过附加}到来关闭选择器bootstrap-all.scss。
运行 SASSbootstrap-all.scss以生成最终的 CSS 文件。
对最终文件运行YUI Compressor以生成最小化版本。
将最小化版本添加到 head 元素并包装我希望样式应用于的所有内容 in <div class="bootstrap"></div>。

Answer 2

回答by inzurrekt

For Bootstrap 3, it's easier if you use less:

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

Download the Bootstrap source code and make a style.lessfile like this:

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

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

Finally, you have to compile the less file; there are many alternatives

最后，你必须编译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

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

Or use npmto install lessthen compile the style.lessfile to style.css:

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

npm install -g less
lessc style.less style.css

Answer 3

回答by postelrich

I came up with a CSS solution if you can't use LESS/SASS because of work/other reasons.

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

I used this site, http://www.css-prefix.com/, and copy/pasted bootstrap.min.css into there. I set prefix ='.bootstrap' and spacer =' '. It will prefix everything with .bootstrap except not perfectly.
If you do a grep for '.bootstrap @media', you will find that the first class to the right of the opening bracket doesn't have .bootstrap as the parent. Add .bootstrap to all these occurrences, about 68 for me.
Then replace all '.bootstrap @media' with '@media'.
Final step is to replace all '.bootstrap @' with '@' (should be about 5 occurrences).

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

Example:

例子：

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

needs to be replaced to

需要更换为

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

Kind of a brute force method, so definitely try the LESS/SASS method above first.

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

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

Answer 4

回答by Chaitanya Nekkalapudi

I have an easy solution.

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

Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.
Add your tag information (e.g. div.bootstrap{) to the start of scss content and close the tag at the end.
Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)

将 bootstrap css 内容复制到这个 ( http://css2sass.herokuapp.com/) 在线 css 到 scss/sass 转换器。
将您的标签信息（例如div.bootstrap{）添加到 scss 内容的开头并在末尾关闭标签。
将整个 scss 内容复制到此 scss 到 css 转换器（https://www.sassmeister.com/）并进行转换:)

Answer 5

回答by Brian Genisio

I wasn't satisfied with any of these answers. Using Less to scope the rules created all sorts of defects. Clearfix, for example was all messed up. And rules like button.closebecame button.bootstrap closeinstead of what I really wanted: .bootstrap button.close.

我对这些答案中的任何一个都不满意。使用 Less 来限定规则会产生各种缺陷。例如，Clearfix 就被搞砸了。规则button.close变成了button.bootstrap close而不是我真正想要的：.bootstrap button.close.

I took a different approach. I'm using PostCSSto process the out-of-the-box CSS that is delivered with Bootstrap. I'm using the Scopifyplugin to scope every rule with .bootstrap.

我采取了不同的方法。我正在使用PostCSS处理随 Bootstrap 提供的现成 CSS。我正在使用Scopeify插件将每个规则的范围限定为.bootstrap.

This mostlygets there. Of course, there are the htmland bodyrules that become .bootstrap htmland .bootstrap bodywhich become non-sensical. No worries... I can just write a PostCSS transform to clean them up:

这主要是到达那里。当然，也有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');
        });
    }
});

Now, I can isolate all Bootstrap styling by adding a class="bootstrap"at the top level.

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

Answer 6

回答by Faust

That's tough. You can't Apply different css stylesheet for different parts of the same web page.

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

I suspect the only way to do this is to make a separate file for your content to take the bootstrap styles, and i-frame it into the page like this:

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

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

then in content-to-take-bootstrap-styles.htmlreference the bootstrap style-sheet in the header. But then you have all the complications of iframes -- e.g.: the iframe element won't grow to accommodate the length of your content.

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

Answer 7

回答by Jeff

You can use ready to use isolated css for Bootstrap 4.1 (compiled with LESS) -

您可以为 Bootstrap 4.1（使用 LESS 编译）使用随时可用的隔离 css -

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

It have isolated css for themes -

它为主题隔离了 css -

bootstrapcustom.min.css - default bootstrap 4.1 isolated style
https://bootswatch.com/cerulean/darkly.min.css - isolated css
https://bootswatch.com/darkly/flatly.min.css - isolated css
https://bootswatch.com/flatly/litera.min.css - isolated css
https://bootswatch.com/litera/lux.min.css - isolated css
https://bootswatch.com/lux/minty.min.css - isolated css
...

bootstrapcustom.min.css - 默认引导程序 4.1 独立样式
https://bootswatch.com/cerulean/darkly.min.css- 独立的 css
https://bootswatch.com/darkly/flatly.min.css - 独立的 css
https://bootswatch.com/flatly/litera.min.css- 独立的 css
https://bootswatch.com/litera/lux.min.css- 独立的 css
https://bootswatch.com/lux/minty.min.css- 独立的 css
...

To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:

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

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

And use any css style from folder css4.1 like so:

并使用文件夹 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

Done!

完毕！

仅将 CSS 样式应用于某些元素

提问by pwaring

采纳答案by pwaring

回答by inzurrekt

回答by postelrich

回答by Chaitanya Nekkalapudi

回答by Brian Genisio

回答by Faust

回答by Jeff

相关推荐

最近更新

标签

仅将 CSS 样式应用于某些元素

提问by pwaring

采纳答案by pwaring

回答by inzurrekt

回答by postelrich

回答by Chaitanya Nekkalapudi

回答by Brian Genisio

回答by Faust

回答by Jeff

相关推荐

CSS 如何在图像的一个角的图像“上”添加按钮？

CSS 过渡 - 仅在悬停时淡化元素

CSS 在视口调整大小时调整图像大小而不会切断边

CSS Chrome 和 Safari 浏览器中的线性渐变

相关推荐

最近更新

标签