bootstrap和css沖突嗎

本篇內(nèi)容介紹了“bootstrap和css沖突嗎”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Bootstrap 是Web上最流行的CSS框架。它使創(chuàng)建漂亮，響應(yīng)迅速的設(shè)計(jì)非常容易。但是，有時候并不希望在整個網(wǎng)站上使用 Bootstrap，您只需要使用Bootstrap CSS的一部分。如果只是將 Bootstrap CSS 直接添加到 head 中，就有可能會與其他的 CSS 產(chǎn)生沖突，從而產(chǎn)生混亂的樣式。

如果我們可以將 Bootstrap CSS 與特定類隔離，問題就解決了！只需要使用 LESS 為所有 Bootstrap CSS 添加一個類名稱。

LESS是一個 CSS 處理器，允許您在編譯到CSS之前更改變量。這允許您更改一個變量（例如基本字體大小），LESS 將自動調(diào)整所有依賴于它的樣式（例如行高，標(biāo)題等）。

以下展示如何使用LESS自定義bootstrap CSS，然后使用類bootstrap-iso為所有Bootstrap樣式添加前綴。

處理步驟：

1. 將導(dǎo)入 head 標(biāo)簽中的 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>

“bootstrap和css沖突嗎”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！