只將CSS樣式表應用到一個Div

Question

我有一個導航欄，我使用引導CSS。我想將它添加到已經有CSS樣式表的我的網站上，並且當我附上兩個樣式表時，它會衝突並混淆我的所有樣式。有沒有一種方法可以輕鬆地添加CSS樣式表，並讓它只適用於一個特定的div？

例如，有沒有一種方法我只能加載在該ID的CSS？

Bootstrap CSS非常大，所以我希望有一種方法不需要在數百個CSS規則中的每一條之前添加#myid。

編輯看起來這是在錯誤的方向進行解釋。問題不在於我如何才能獲得導航欄CSS，因爲這仍然會弄亂其他樣式。

有沒有一種方法可以在引導樣式表（例如#mydiv {#header {CSS規則} #content {CSS規則}}中放置一個#mydiv，以便該規則僅適用於一個格或做類似的效果？我知道這個例子不起作用，但有什麼可以做類似的效果來解決我的問題嗎？

Answer 1

這是一種做法：

1. 您可以從GetBootstrap.c中獲得適當的css OM的定製 頁面

2. 的ID =「mynav」添加到導航欄的父母，如果有一個或包裹導航與ID =「mynav」

3. 打開引導一個div。你下載的CSS，刪除任何不必要的CSS（也許標準化，如果它是你有什麼重複）。

4. 找到所有導航欄相關聯的樣式，並把#mynavbar（空間）.navbar

5. 然後，您將開闢自己的CSS和把#mynav在受影響的樣式前面。

6. 由於導航和Bootstrap的所有工作與邊界框大小，你必須改變你的CSS的數學。

HTML - 僅僅是示例：

<div id="mynav"><header class="navbar navbar-static-top"> 
    ... 
    </header></div> 

CSS例子，還有很多的這個，所以你以前所有

#mynavbar .navbar {styles} 

---

添加#mynav您可以從GetBoo獲取navbar和相關的css和js tstrap。COM的自定義頁面：

http://getbootstrap.com/customize/

切換如下：

向下滾動，當你需要的顏色和這樣的導航欄進行其他調整：

然後再次向下滾動並單擊下載。

下載將包含您選擇的CSS。然後你會打開你得到的bootstrap.css文件，你會看到規範化的CSS和其他基本設置和導航欄，沒有其他樣式。如果有衝突的類，請重命名並將它們應用於您的html。

你沒有提到什麼衝突，但通常是.container類是Bootstrap使用的相同或全局 - 必要 - 框尺寸：邊框。如果你看到混亂，回到你自己的CSS - 不是Bootstrap的，並調整數學（包括所有邊界和填充）。閱讀框尺寸：邊框以瞭解更多信息。

Answer 2

你也可以使用less css來開發你的主題。 download less master from github

並使用較少的編譯器，例如winLess for windows，simpLess和Koala（支持windows，mac和linux）編譯較少的文件。