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

Posted 2023-02-22

【中文标题】Bootstrap (4) 可以与 Angular Material (2) 一起集成吗？

【英文标题】：Can Bootstrap (4) be integrated along with Angular Material (2)?

【发布时间】：2018-01-11 20:17:52

【问题描述】：

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

例如，在 Material 图书馆中，列表组的样式几乎为零，而 Bootstrap 则通过其 css 提供了这一点。

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

【问题讨论】：

如果你想使用 Angular 和 Bootstrap 元素，像 angular-ui.github.io/bootstrap 这样的东西存在

【参考方案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 以使所有浏览器更一致地呈现元素并遵循网络标准。

那么你只需要导入：

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

【讨论】：

实际上，您可能希望跳过重新启动或在其上方添加您自己的与 MD 兼容的“修复”。例如，我发现Reboot在按钮处于焦点状态时通过添加边框与MD按钮发生冲突，而clean MD没有边框。

@JustAMartin 我遇到了这个问题，我尝试只从引导程序中导入网格，因为这是我需要的，并且在我进行导入时得到了一些未定义的变量

【参考方案2】：

Angular Material 2 是一个仍在积极开发中的新库，所以你不应该期望有很多花哨的nice to have 功能，但从长远来看，在你的 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 4IE10+Bootstrap 3IE8+

引导 + 材质？

如果你想在你的应用程序中结合这两个框架，这取决于你。如果您这样做，请检查包大小以确保它没有膨胀。

【讨论】：

如果你把 Material 和 Bootstrap 中的所有东西都扔进去，那么是的，你会有很大的负担。但是不管怎样，你只需要你需要的东西，从而保持实际的捆绑很小。引导实用程序类，例如使用起来非常好，并且不会以任何方式与 Material 发生冲突。

@seBaka28 是的，你说得对，我会根据你的评论更新答案

【参考方案3】：

虽然昆切维奇的回答是对的，但我认为我们还应该添加以下内容：

Angular Material 正在隐式升级/降级 DOM 元素 而引导程序不是。这意味着在 Bootstrap 中，您会得到什么 你看，在 Angular Material 中，一些元素是自动 呈现。所以，我真的看不出如何将两者结合起来，即使 你想要。添加，Angular 的 view encapsulation 混合，东西 变得更加混乱。 我看到合作空间的唯一部分是网格。你 可以将 Bootstrap 用于网格，将 Angular Material 用于其余部分，但使用 Angular Flex 布局（正如 Kunsevic 已经提到的）你真的不需要。 那里有一个小的学习曲线，但它是值得的，如果你使用 角度。 Bootstrap 的 CSS 确实与 Angular Material 的 CSS 冲突。使用时 我一起注意到某些元素，比如里面的图标 浮动按钮未正确居中等。这不应该是 很难解决，但既然可以使用 Angular Flex 又何必费心呢？

希望对您有所帮助。

【讨论】：

Angular Flex Layout 的唯一问题是它仍处于测试阶段，似乎没有任何进展。

这是不久前写的。事实上，Angular Flex Layout 看起来已经被抛弃了。从那时起，我一直在使用 Bootstrap，只是网格，用于布局（我的答案中的选项 2）。

【参考方案4】：

在 2019 年 Angular 会议上，他们解释了是否可以结合 bootstrap 和 Angular 材料。 https://www.youtube.com/watch?v=xLj1qw82oAo&feature=youtu.be