Can Bootstrap（4）可與角度材料（2）一起集成嗎？

Question

我想使用Angular Material 2庫，因爲它的（不斷增加的）組件列表。但我已經習慣了bootstrap，它的好處就像響應式實用程序和輕量級UI，用於典型的事情。通過引導我主要是指它的CSS部分，我幾乎從不需要它的JS功能。

例如在Material lilbrary中，list group幾乎沒有樣式，Bootstrap使用它的css。

我記得讀到，將它們結合起來不是一個好主意，主要是因爲它們的全局應用程序範圍的樣式會發生衝突。我無法找到該源，我很好奇 - 在當前版本中是否屬實？如果是這樣，究竟是什麼衝突和如何解決？

Answer 1

Angular Material 2是一個新的圖書館仍然在積極發展，所以你不要指望有很多花哨的功能nice to have在，但是，但是，從長遠來看，你將有很多在你使用Material 2角應用的好處。下面是一些概述：

組件開發工具包

在過去的版本中Material 2隊引進@angular/cdk這是Material 2一個核心，也給了開發商極大地寫自己的第三方組件。 @angular/cdk目前沒有太多文檔，但您可以跟蹤該問題https://github.com/angular/material2/issues/2789以便隨時更新此問題。

響應goddies

有一個在Material 2沒有內置的功能，讓您迴應goddies。對於這個問題，你必須使用@angular/flex-layout東西是完全獨立於Material 2 - 基本上這是一個很好的抽象Flexbox CSS之上。使用它你不需要自己編寫大量的響應式css mediaQueries。

瀏覽器的支持

Material 2：IE11 +
Bootstrap 4 IE10 +
Bootstrap 3 IE8 +

引導+材料？

如果你想到引用兩個重要的前端框架的bundle的總大小，那麼你就沒有理由在你的應用中結合兩個Frameworks。同樣在這種情況下，您必須關心在同一個項目中可能發生的衝突。

Answer 2

雖然Kuncevic的答案是正確的，我想我們也應該增加以下內容：

• 角材料是隱式升級/降級的DOM元素
  同時引導不是。這意味着在Bootstrap中，你會看到你看到的東西，而在角度材質中，一些元素會自動被渲染出來。 。所以，我無法真正瞭解如何將兩者結合起來，即使您想要。添加，Angular的view encapsulation在組合中，東西 變得更加混亂。
• 我看到合作空間的唯一部分是在網格中。你可以使用Bootstrap作爲網格和其他角度材料，但是使用Angular Flex 佈局（正如Kunsevic已經提到的），你並不需要。 那裏有一個小型的學習曲線，但如果您使用的是Angular，那麼它是值得的。
• Bootstrap的CSS與Angular Material的CSS有衝突。當我一起使用 時，我注意到像 浮動按鈕中的圖標等某些元素沒有正確居中，等等。這不應該是 困難的修復，但是爲什麼要使用Angular Flex呢？

希望有幫助。