處理 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