javascript - Bootstrap (4) 可以与 Angular Material (2) 一起集成吗？

Question

我想使用 Angular Material 2 库，因为它的(不断增加的)组件列表。但我习惯于 Bootstrap ，它是响应式实用程序和典型事物的轻量级 UI 之类的好东西。我所说的 Bootstrap 主要是指它的 CSS 部分，我几乎从不需要它的 JS 功能。

例如，在 Material lilbrary 中，列表组的样式几乎为零，而 Bootstrap 则通过其 css 提供了样式。

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

Answer 1

由于 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";

---

例如，您可能想使用 Bootstrap Reboot为了使所有浏览器更一致地呈现元素并遵循网络标准。

那么你只需要导入:

// Import Roboot
@import "~bootstrap/scss/reboot";

您可能想使用 Bootstrap Grid System同样，在这种情况下，您可以进一步添加:

@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/