只将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）编译较少的文件。