jquery ui:具有现有样式表的应用程序的CSS框架

Update 2: 这是@ GFoley83

Update: 下面加入的pastebin是Twitter Bootstrap version 2.0.4

您应该最终使用最新版本并自己进行编译。

这是我对引导程序较少的文件所做的操作：

.tw-bs {
    @import "less/bootstrap.less";
}

这是结果：http://pastebin.com/vXgRNDSz

演示（jsfiddle）

如果您不类似 tw-bs 您可以轻松地进行查找/替换，不应该有任何冲突。

我使用了@Sherbrow解决方案，但也必须添加响应文件。

.my-bootstrap-container {
     @import "less/bootstrap.less";
     @import "less/responsive.less";
}

然后运行

node_modules/less/bin/lessc demo.less -x > demo.css

如果有人需要完整的分步教程，如何为自己的命名空间容器编译引导程序，那么我在博客上发表了一篇有关它的文章http://joomla.digital-peak.com/blog/151-how-to-add- 引导到您的joomla-2-5-扩展名

最后一部分是针对Joomla的，但开头可以全局使用.它还具有一个指向最新编译的引导程序版本2.3.2的链接.只需搜索并替换.dp-container。

2016更新：减轻此问题（而不是重新编译引导程序）的未来方法是利用 web组件，特别是影子DOM.这样一来，您的应用即可独立运行（几乎像iFrame），而无需网络浏览器打开单独的页面/丧失页面之间的通讯能力。

说您的组件包含在 <div id='plugin'>...</div>中

您可以将div内的内容移动到头部的标签中，例如。

<template id="template"><!--Your Code Here--></template>

您的模板可以包含所有所需的引导链接标签和js.然后，您可以在javascript / bookmarklet中编写

var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);

您可以在此处了解有关web组件（以及Shadow DOM）的更多信息：http://webcomponents.org/articles/introduction-to-shadow-dom/

我开始使用 jquery ui-http://jqueryui.com/，因为它有自己的css类，不会与gmail冲突. yUI是我发现的另一个这样的框架.但是Sherbrow展示了如何使用具有自己独特的CSS样式名称的bootstrap css。

当前接受的答案无法正确呈现表单（使用SASS和bootstrap 4 beta）.以下对我有用：

.bootstrap {
    @import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
    box-sizing: border-box;
}

框的大小很重要，因为在编译SASS样式表时，将生成以下内容。

.bootstrap html {
  box-sizing: border-box;
  ...
}

即 box-sizing 财产将放置在 html上 用 class="bootstrap"内的元素 -当然不存在. html上可能还有其他样式 和 body 您可能想要手动添加到样式中。

现在您可以将使用引导程序样式化的内容放置在 bootstrap中 Class：

<div class="bootstrap">
  <div class="container">
    ...
  </div>
</div>