傳統CSS與Bootstrap衝突 - 如何解決？

Question

我是Bootstrap的新手，所以這可能是一個天真的問題。但我相信其他人有或將會有類似的問題，所以在這裏。

我對一個已經存在了一段時間並經過多年演化的站點實施引導。只要我將自舉CSS和JS添加到我的HTML中，許多元素就會混亂起來。據我所知，這歸因於我使用與bootstrap相同的類名稱。例如，我有一個叫做'btn'的類，bootstrap也是。我的所有按鈕看起來都很醜陋和/或形狀奇特。該名單繼續下去。

當人們首先在現有網站上實施Bootstrap時，這與這門課程相當相似嗎？這只是通過舊的CSS文件和重命名的事情？那裏有優雅的解決方案嗎？

Answer 1

我認爲最簡單的方法是使用css預處理器來命名空間中的所有bootstraps css組件。

如果你有他們的github回購：https://github.com/twbs/bootstrap/你會看到他們有一個很少的代碼分佈。從那裏，你可以通過將庫包裝在某種類中來命名空間，例如上面提到的millimoose。

從它們可以將引導程序名稱空間添加到某些html元素，並且該庫只會影響該dom節點及其子節點。

Answer 2

Paul和Millimoose都提供了適合我的解決方案。然而，對於新手來說，解決方案需要一點挖掘，所以這裏是一步一步描述對我有用的東西（以及我相信他們推薦的東西）。

1. 基本上，你必須修改bootstrap css文件。基本上包住整個引導css文件裏面這樣的：

   .bootstrap {// 整個自舉css文件放在這裏 }

2. 使用http://winless.org/online-less-compiler產生新的CSS代碼。在上面的鏈接中，您需要將上面的代碼放到表單的左側。

3. 將以上鍊接的輸出複製並轉移到一個css文件中。在你的html中包含這個CSS文件。

4. 當需要使用boostrap時，只需放置要引導的元素即可應用。

非常感謝所有幫助確定此解決方案。效果很好。

Answer 3

我與引導3 GIST所有一類名爲.bootstrap-包裝 https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

我開始用這個工具裏面：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%}