Can Bootstrap（4）可与角度材料（2）一起集成吗？

Question

我想使用Angular Material 2库，因为它的（不断增加的）组件列表。但我已经习惯了bootstrap，它的好处就像响应式实用程序和轻量级UI，用于典型的事情。通过引导我主要是指它的CSS部分，我几乎从不需要它的JS功能。

例如在Material lilbrary中，list group几乎没有样式，Bootstrap使用它的css。

我记得读到，将它们结合起来不是一个好主意，主要是因为它们的全局应用程序范围的样式会发生冲突。我无法找到该源，我很好奇 - 在当前版本中是否属实？如果是这样，究竟是什么冲突和如何解决？

Answer 1

Angular Material 2是一个新的图书馆仍然在积极发展，所以你不要指望有很多花哨的功能nice to have在，但是，但是，从长远来看，你将有很多在你使用Material 2角应用的好处。下面是一些概述：

组件开发工具包

在过去的版本中Material 2队引进@angular/cdk这是Material 2一个核心，也给了开发商极大地写自己的第三方组件。 @angular/cdk目前没有太多文档，但您可以跟踪该问题https://github.com/angular/material2/issues/2789以便随时更新此问题。

响应goddies

有一个在Material 2没有内置的功能，让您回应goddies。对于这个问题，你必须使用@angular/flex-layout东西是完全独立于Material 2 - 基本上这是一个很好的抽象Flexbox CSS之上。使用它你不需要自己编写大量的响应式css mediaQueries。

浏览器的支持

Material 2：IE11 +
Bootstrap 4 IE10 +
Bootstrap 3 IE8 +

引导+材料？

如果你想到引用两个重要的前端框架的bundle的总大小，那么你就没有理由在你的应用中结合两个Frameworks。同样在这种情况下，您必须关心在同一个项目中可能发生的冲突。

Answer 2

虽然Kuncevic的答案是正确的，我想我们也应该增加以下内容：

• 角材料是隐式升级/降级的DOM元素
  同时引导不是。这意味着在Bootstrap中，你会看到你看到的东西，而在角度材质中，一些元素会自动被渲染出来。 。所以，我无法真正了解如何将两者结合起来，即使您想要。添加，Angular的view encapsulation在组合中，东西 变得更加混乱。
• 我看到合作空间的唯一部分是在网格中。你可以使用Bootstrap作为网格和其他角度材料，但是使用Angular Flex 布局（正如Kunsevic已经提到的），你并不需要。 那里有一个小型的学习曲线，但如果您使用的是Angular，那么它是值得的。
• Bootstrap的CSS与Angular Material的CSS有冲突。当我一起使用 时，我注意到像 浮动按钮中的图标等某些元素没有正确居中，等等。这不应该是 困难的修复，但是为什么要使用Angular Flex呢？

希望有帮助。