Bootstrap（4）可以与Angular Material（2）一起集成吗？ [英] Can Bootstrap (4) be integrated along with Angular Material (2)?

问题描述

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

I'd like to use Angular Material 2 library, because of its (growing list of) components. But i'm used to bootstrap and it's goodies like responsive utilities and lightweight UI for typical things. By Bootstrap I mostly mean its CSS part, I almost never need its JS functionality.

例如在Material lilbrary中，列表组几乎没有样式，而Bootstrap给出了用它的CSS。

For example in Material lilbrary there is practically zero styling for list group, while Bootstrap gives that with its css.

我记得读到组合它们并不是一个好主意，主要是因为它们的全局应用程序范围的样式会发生冲突。我找不到那个来源而且我很好玩 - 当前版本是真的吗？如果是这样，究竟什么是冲突的以及它如何解决？

I remember reading that combining them is not a good idea, mainly because their global app-wide styles will collide. I can't find that source and I'm curios - is that true with current versions? If so, exactly what is conflicting and how can it be worked around?

推荐答案

Angular Material 2 是一个仍在积极开发中的新库，所以你不应该期待很多花哨的很好有其中的功能，但从长远来看，你将在角度应用中使用 Material 2 获得很多好处。以下是概述：

Angular Material 2 is a new library still in active development so you should not expect many fancy nice to have features in that, yet, but on the long run you will have a lots of benefits using Material 2 in you angular app. Here is some overview:

在上一版本中材料2 团队介绍 @ angular / cdk 这是 Material 2 的核心，同时也为开发人员提供了支持写出自己的第三方组件的良好基础。 @ angular / cdk 上没有太多文档，但您可以跟踪该问题 https://github.com/angular/material2/issues/2789 以了解最新情况。

In the last releases Material 2 team introduced @angular/cdk which is a core for Material 2 and also gives developers a great ground to write their own thirdparty components. There is no much docs on @angular/cdk yet, but you can track that issue https://github.com/angular/material2/issues/2789 to keep updated on that matter.

Material 2 中没有内置功能，可以为您提供响应式的goddies。对于这个问题你必须使用 @ angular / flex-layout 的东西与<$ c完全分开$ c> Material 2 - 基本上它是 Flexbox CSS 。使用它你不必自己编写一大堆响应式css mediaQueries。

There is no builtin functionality in Material 2 that gives you responsive goddies. For that matter you have to use @angular/flex-layout thing is completely separate from Material 2 - basically it is a nice abstraction on top of Flexbox CSS. Using that you do not have to write whole bunch of responsive css mediaQueries yourself.

材料2 ：IE11 +

Bootstrap 4 IE10 +

Bootstrap 3 IE8 +

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

没有理由你想要在你的应用程序中结合两个框架，如果你考虑到引用两个重型前端框架的捆绑包的总大小。同样在这种情况下，你必须关心在同一个项目中可能发生的冲突。

There is no reason you want to combine both Frameworks in your app if you think about the total size of your bundles having referencing two heavy front end frameworks. Also in that case you have to care about conflicts that may occur using both in the same project.

这篇关于Bootstrap（4）可以与Angular Material（2）一起集成吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！