如何命名空间Twitter Bootstrap所以样式不冲突
我想使用Twitter Bootstrap，但仅限于特定元素，所以我需要找出一种方法来为所有Twitter Bootstrap类添加前缀，或者使用较less的mixins。 我还没有经验，所以我不太明白如何做到这一点。 下面是我尝试devise的HTML样例：
<div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div> </div> 在这个例子中，Twitter Bootstrap将正常样式都h1 s，但我想更多地select我应用Twitter Bootstrap样式的区域。
这比我想象的要容易得多。 Less和Sass都支持命名空间（甚至使用相同的语法）。 当你包含bootstrap的时候，你可以在select器中这样做命名空间：
.bootstrap-styles { @import 'bootstrap'; }
更新：对于较新版本的LESS，下面是如何做到这一点：
.bootstrap-styles { @import (less) url("bootstrap.css"); }
在这里回答了类似的问题。
@安德鲁很好的回答。 您还需要注意，引导程序会修改主体，主要是添加字体。 所以当你通过LESS / SASS命名空间时，输出的css文件如下所示：（在bootstrap 3中）
.bootstrap-styles body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; }
但显然你的div里面不会有body标签，所以你的引导程序内容将不会有引导字体（因为所有的引导程序都是从父类inheritance的）
要解决，答案应该是：
.bootstrap-styles { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; @import 'bootstrap'; }
把@Andrew，@Kevin和@adamj的答案放在一起（加上一些其他样式），如果你在一个名为“bootstrap-namespaced.less”的文件中包含以下内容，你可以简单地将'bootstrap-namespaced.less'文件：
// bootstrap-namespaced.less // This less file is intended to be imported from other less files. // Example usage: // my-custom-namespace { // import 'bootstrap-namespaced.less'; // } // Import bootstrap.css (but treat it as a less file) to avoid problems // with the way Bootstrap is using the parent operator (&). @import (less) 'bootstrap.css'; // Manually include styles using selectors that will not work when namespaced. @import 'variables.less'; & { // From normalize.less // Previously inside "html {" // font-family: sans-serif; // Overridden below -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; // Previously inside "body {" margin: 0; // From scaffolding.less // Previously inside "html {" // font-size: 10px; // Overridden below -webkit-tap-highlight-color: rgba(0,0,0,0); // Previously inside "body {" font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @body-bg; }
向bootstrap CSS添加一个名称空间将会打破模式的function，因为引导程序直接将“模式背景”类添加到主体。 解决方法是在打开模式之后移动这个元素，例如：
$('#myModal').modal(); var modalHolder = $('<div class="your-namespace"></div>'); $('body').append(modalHolder); $('.modal-backdrop').first().appendTo(modalHolder);
您可以删除“hide.bs.modal”事件的处理程序中的元素。
使用.less版本的文件。 确定你需要哪些文件，然后将这些无文件打包：
.bootstrap-styles { h1 { } }
这会给你输出：
.bootstrap-styles h1 { }
命名空间打破了Modal插件的背景div，因为它总是直接添加到<body>标记中，绕过了具有应用于其中的样式的namespacing元素。
您可以通过在显示背景之前更改插件对$body的引用来解决此问题：
myDialog.modal({ show: false }); myDialog.data("bs.modal").$body = $(myNamespacingElement); myDialog.modal("show");
$body属性决定了背景的添加位置。
为了更好地解释安德鲁在谈论那些不知道什么是less的人的所有步骤。 这里是一个链接，说明如何一步一步完成如何分离Bootstrap或其他CSS库
我在一个名为.bootstrap-wrapper的类中使用了Bootstrap 3做了一个GIST https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
我开始使用这个工具： http : //www.css-prefix.com/并修复其余search和replacePHPstorm。 所有字体@ font-face都在maxcdn上。
第一行例子
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
我面对同样的问题和@安德鲁提出的方法不幸在我的具体情况没有帮助。 引导类与另一个框架中的类相冲突。 这是如何通过https://github.com/sneas/bootstrap-sass-namespace来接收这个项目的。; 随意使用。
