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

Question

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

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

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

原文由 Titan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 Bootstrap 是模块化的，一种替代方法可能是使用 Angular Material，然后仅从 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 以使所有浏览器更一致地呈现元素并遵循 Web 标准。

那么你只需要导入：

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

原文由 Francesco Borzi 发布，翻译遵循 CC BY-SA 4.0 许可协议