我想使用Angular Material 2库，因为它有（越来越多的）组件。但是我习惯了Bootstrap和它的好处，如响应式工具和轻量级UI等常见功能。在Bootstrap中，我主要指的是其CSS部分，我几乎从不需要其JS功能。
例如，在Material库中，列表组件几乎没有样式，而Bootstrap则用其CSS提供了相应的样式。
我记得曾经看过一篇文章，说将它们组合在一起不是一个好主意，主要是因为它们全局的应用程序样式会发生冲突。我找不到那个来源，我很好奇 - 是否与当前版本有关？如果是这样，具体有什么冲突，如何解决？
由于Bootstrap是模块化的，一种替代方法是使用Angular Material，然后只从Bootstrap中选择你真正需要的部分。
注意: 无论您要导入什么内容，都应该先安装Bootstrap:
npm install bootstrap --save
在全局的style.scss文件中引入所需的sass文件：
// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// Import Roboot
@import "~bootstrap/scss/reboot";
如果您想使用Bootstrap网格系统，那么您可以进一步添加以下内容：
@import "~bootstrap/scss/grid"; // add the grid
因此，您将能够在您的HTML模板中使用它：
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
您可能还想使用Bootstrap Utilities，在这种情况下，请添加：
@import "~bootstrap/scss/utilities"; // add css utilities
我的答案基于这里详细解释的内容：https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/
Angular Material 2是一种新的库，仍处于积极开发阶段，因此您不应该期望在其中看到许多花哨的功能，但从长远来看，在您的angular应用程序中使用Material 2将带来许多好处。以下是一些概述：
在最近的版本中，Material 2团队引入了@angular/cdk，这是Material 2的核心，也为开发人员编写自己的第三方组件提供了良好的基础。目前还没有关于@angular/cdk的文档，但您可以跟踪该问题https://github.com/angular/material2/issues/2789以保持更新。
Material 2中没有内置的功能可提供响应式设计。对于此问题，您必须使用@angular/flex-layout，这与Material 2完全分离 - 基本上它是在Flexbox CSS之上的一个不错的抽象。使用它，您无需自己编写大量响应式css mediaQueries。
Material 2: IE11+
Bootstrap 4 IE10+
Bootstrap 3 IE8+
如果您想在应用程序中同时使用这两个框架，则可以自行决定。如果这样做，请检查捆绑包大小以确保其不会过大。