在网络应用程序上同时拥有两个版本的 (twitter) bootstrap 运行

Question

我目前已经开始尝试使用 bootstrap 和 angularjs 进行客户端开发。我接到了一项任务，要为我们的网站（一个 angularjs 应用程序）制作一个或多或少的孤立功能，并且一直在努力，但发现我学到的 bootstrap 功能不起作用。

经检查，我发现我们的应用程序正在使用 bootstrap 2.3.x，我想使用 bootstrap 3.0

的功能

因为 bootstrap 在其新版本中进行了相当大的更改，主要的网络应用程序编码人员不想切换，所以这不是一个选项。（至少现在还没有）。

我的问题：有没有办法让我的独立视图使用 bootstrap 3 而应用程序的其余部分使用 bootstrap 2？我真的不想花时间学习过时的技术，所以任何建议将不胜感激。

Answer 1

我会在这里使用一些流行语：

阴影DOM
网络组件
聚合物

Scoped styling is one of the many features of Shadow DOM. Styles defined inside the shadow tree don’t leak out and page styles don’t bleed in.

https://www.polymer-project.org/articles/styling-elements.html

http://plnkr.co/edit/hypZyjc4yFxIubfOn31N?p=preview

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
    <link rel="import" href="your-component.html">
  </head>

  <body>
    <h1>Bootstrap 3.3.1</h1>
    <your-component></your-component>
  </body>
</html>

your-component.html

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="your-component">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">

    <template>
        <h1>Bootstrap 2.3.2</h1>
    </template>

    <script>
        Polymer({});
    </script>

</polymer-element>

Answer 2

如果您要在网站上创建一个独立的功能，它会嵌入到其中一个页面中还是它本身就是一个部分？如果脚本 link 仅在应用程序页面的 header 中且未添加到其他页面，则您的应用程序页面可以使用 bootstrap 3.x 而不会在其他页面上引起问题在网站上。 link 不会将 bootstrap 3.x 泄漏到 header 中没有这些脚本标记的先前代码。如果是这种情况，您可以继续使用 bootstrap 3.x 和 angular.js，应该没有问题。

我会将您的应用程序放在网站上的单独文件夹中，并使用更多 up-to-date 工具进行设计。

在网络应用程序上同时拥有两个版本的 (twitter) bootstrap 运行

having two versions of (twitter) bootstrap running simultaneously on a web application

twitter-bootstrap

angularjs