僅將 CSS 樣式應用於某些元素

Question

我有一個現有的網站，其中包含許多舊頁面和表格，我正試圖逐漸過渡到 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'），但這會花費很長時間，而且很容易錯過樣式。

編輯：如果這樣的事情不可能，是否有免費工具可以從文件中提取所有樣式，添加前綴，然后再將它們保存回來？

Answer 1

對於 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.less文件編譯為style.css ：

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

Answer 2

最終的修復是使用SASS （由不在現場的人推薦），因為它允許您嵌套元素，然后自動生成最終的 CSS。 一步一步的過程是：

將兩個 Bootstrap 文件（ bootstrap.css和bootstrap-responsive.css ）連接到bootstrap-all.css中。
創建一個新的 SASS 文件bootstrap-all.scss ，內容div.bootstrap { 。
將bootstrap-all.css附加到bootstrap-all.scss 。
通過將}附加到bootstrap-all.scss來關閉div.bootstrap選擇器。
在bootstrap-all.scss上運行 SASS 以生成最終的 CSS 文件。
在最終文件上運行YUI Compressor以生成最小化版本。
將最小化版本添加到 head 元素，並將我想要應用樣式的所有內容包裝在<div class="bootstrap"></div>中。

Answer 3

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

我使用了這個網站http://www.css-prefix.com/ ，並將 bootstrap.min.css 復制/粘貼到那里。 我設置了 prefix ='.bootstrap' 和 spacer =' '。 除了不完美之外，它會在所有內容前加上 .bootstrap。
如果您對“.bootstrap @media”執行 grep，您會發現左括號右側的第一個類沒有 .bootstrap 作為父類。 Add.bootstrap 到所有這些事件，對我來說大約 68。
然后將所有“.bootstrap @media”替換為“@media”。
最后一步是用“@”替換所有“.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>

Answer 4

我有一個簡單的解決方案。

將 bootstrap css 內容復制到此 ( http://css2sass.herokuapp.com/ ) 在線 css 到 scss/sass 轉換器。
將您的標簽信息（例如div.bootstrap{ ）添加到 scss 內容的開頭，並在末尾關閉標簽。
將整個 scss 內容復制到此 scss 到 css 轉換器 ( https://www.sassmeister.com/ ) 並轉換它:)

Answer 5

我對這些答案中的任何一個都不滿意。 使用 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"來隔離所有 Bootstrap 樣式。

Answer 6

那是艱難的。 您不能為同一網頁的不同部分應用不同的 css 樣式表。

我懷疑這樣做的唯一方法是為您的內容制作一個單獨的文件以采用引導程序樣式，然后將其 i-frame 到頁面中，如下所示：

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

然后在content-to-take-bootstrap-styles.html中引用標題中的引導樣式表。 但是你會遇到 iframe 的所有復雜問題——例如：iframe 元素不會增長以適應你的內容的長度。

Answer 7

您可以為 Bootstrap 4.1（使用 LESS 編譯）使用現成的獨立 css -

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

它有獨立的主題 CSS -

bootstrapcustom.min.css - 默認 bootstrap 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
...

要使用 Bootstrap CSS，只需將 HTML 包裝在一個帶有類 bootstrapiso 的 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

完畢！

僅將 CSS 樣式應用於某些元素

問題描述

7 個解決方案

解決方案1
46 2013-02-27 14:55:15

解決方案2
29 已采納 2012-08-07 08:25:34

解決方案3
15 2015-06-25 20:56:52

解決方案4
6 2017-12-08 10:51:20

解決方案5
4 2016-01-25 21:21:13

解決方案6
3 2012-08-06 15:46:49

解決方案7
1 2018-04-16 17:22:52

僅將 CSS 樣式應用於某些元素

問題描述

7 個解決方案

解決方案1 46 2013-02-27 14:55:15

解決方案2 29 已采納 2012-08-07 08:25:34

解決方案3 15 2015-06-25 20:56:52

解決方案4 6 2017-12-08 10:51:20

解決方案5 4 2016-01-25 21:21:13

解決方案6 3 2012-08-06 15:46:49

解決方案7 1 2018-04-16 17:22:52

解決方案1
46 2013-02-27 14:55:15

解決方案2
29 已采納 2012-08-07 08:25:34

解決方案3
15 2015-06-25 20:56:52

解決方案4
6 2017-12-08 10:51:20

解決方案5
4 2016-01-25 21:21:13

解決方案6
3 2012-08-06 15:46:49

解決方案7
1 2018-04-16 17:22:52