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

问题描述

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

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

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

解决方案

由于 Bootstrap 是模块化的，一种替代方法可能是使用 Angular Material，然后只从 Bootstrap 中挑选您真正需要的部分.

<小时>

注意:无论您要导入什么，都应该先安装引导程序:

npm install bootstrap --save

并在全局 style.scss 中导入所需的 sass 文件:

//导入其他 Bootstrap 文件需要的函数、变量和 mixin@import "~bootstrap/scss/functions";@import "~bootstrap/scss/variables";@import "~bootstrap/scss/mixins";

<小时>

例如，您可能希望使用 Bootstrap Reboot 以使所有浏览器更一致地呈现元素并遵循网络标准.

那么你只需要导入:

//导入Roboot@import "~bootstrap/scss/reboot";

您可能还想使用 Bootstrap Grid System，在这种情况你可以进一步补充:

@import "~bootstrap/scss/grid";//添加网格

所以你可以在你的 html 模板中使用它:

<div class="row"><div class="col">三列之一
<div class="col">三列之一

<div class="col">三列之一

您可能还想使用 Bootstrap Utilities，在这种情况下还添加:

@import "~bootstrap/scss/utilities";//添加css工具

<小时>

我的回答基于这里详细解释的内容:https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-项目/

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.

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?

解决方案

Since Bootstrap is modular, one alternative approach could be using Angular Material and then just picking from Bootstrap only the parts that you really need.

---

Note: whatever you're going to import, you should install bootstrap first:

npm install bootstrap --save

And import the required sass file inside your global style.scss:

 // Imports functions, variables, and mixins that are needed by other Bootstrap files
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

---

For example, you might want to use Bootstrap Reboot in order to make all browsers render the elements more consistently and following the web standards.

Then you only need to import:

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

You probably want to make use of the Bootstrap Grid System as well, in such case you can further add:

@import "~bootstrap/scss/grid"; // add the grid

So you would be able to use it in your html templates:

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

You may also want to use the Bootstrap Utilities, in such case add also:

@import "~bootstrap/scss/utilities"; // add css utilities

---

My answer is based on what's explained here in details: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

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