Question

我目前已开始尝试使用bootstrap和angularjs进行客户端开发。我已经完成了一项任务，即在我们的网站（一个angularjs应用程序）中创建一个或多或少的独立功能，并一直在努力，但注意到我学到的引导功能不起作用。

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

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

我的问题：是否有一种方法可以让我的隔离视图使用bootstrap 3，而应用程序的其余部分使用bootstrap 2？我真的不想花时间学习弃用的技术，所以我们非常感谢任何建议。

Answer 1

如果您要在自己的网站上创建一个独立的功能，它是否会嵌入其中一个页面中，或者它本身就是一个部分？如果脚本链接仅位于应用页面的标题中而未添加到站点中的其他页面，则您的应用页面可以使用bootstrap 3.x而不会导致其他页面出现问题。该链接不会将bootstrap 3.x泄漏到标头中没有这些脚本标记的先前代码。如果是这种情况，你可以继续使用bootstrap 3.x和angular.js，应该没有问题。

我会将您的应用贴在网站上的单独文件夹中，并使用更新的工具进行设计。

Answer 2

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

Shadow DOM
网络组件
聚合物

Scoped样式是Shadow DOM的众多功能之一。阴影树内定义的样式不会泄漏，页面样式也不会渗入。

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>

您-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>

在Web应用程序上同时运行两个版本的（twitter）引导程序

2 个答案: