處理 Bootstrap CSS 衝突

問題：

Bootstrap 是Web上最流行的CSS框架。它使建立漂亮，響應迅速的設計很是容易。

可是，有時候並不但願在整個網站上使用 Bootstrap，您只須要使用Bootstrap CSS的一部分。

若是隻是將 Bootstrap CSS 直接添加到 head 中，就有可能會與其餘的 CSS 產生衝突，從而產生混亂的樣式。 

若是咱們能夠將 Bootstrap CSS 與特定類隔離，問題就解決了！

只須要使用 LESS 爲全部 Bootstrap CSS 添加一個類名稱。

 

LESS是一個 CSS 處理器，容許您在編譯到CSS以前更改變量。這容許您更改一個變量（例如基本字體大小），LESS 將自動調整全部依賴於它的樣式（例如行高，標題等）。

如下展現如何使用LESS自定義bootstrap CSS，而後使用類bootstrap-iso爲全部Bootstrap樣式添加前綴。

處理步驟：

 

1. 將導入 head 標籤中的 bootstrap css 文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

 

 

替換爲

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

 

2. 而後將HTML包裝在帶有類bootstrap-iso的div中，以下所示：

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

 

資料參考：

https://formden.com/blog/isolate-bootstrap