Czy Bootstrap (4) może być zintegrowany z materiałem kątowym (2)?

Question

Chciałbym użyć biblioteki Angular Material 2 ze względu na jej (rosnącą listę) komponentów. Ale jestem przyzwyczajony do bootstrapu i to jest gadżet jak responsywne narzędzia i lekki interfejs dla typowych rzeczy. Przez Bootstrap mam na myśli głównie jego część CSS, prawie nigdy nie potrzebuję jej funkcjonalności JS.

Na przykład w Material lilbrary praktycznie nie ma stylów dla grupy list, a Bootstrap daje to z jego css.

Pamiętam, że lektura ich łączenia nie jest dobrym pomysłem, głównie ze względu na zderzenia ich globalnych stylów aplikacji. Nie mogę znaleźć tego źródła i jestem ciekawostką - czy to prawda w aktualnych wersjach? Jeśli tak, to dokładnie, co jest sprzeczne i jak można je obejść?

Answer 1

Angular Material 2 jest nowa biblioteka nadal w aktywnego rozwoju, więc nie należy się spodziewać wiele fantazyjnych nice to have funkcje, że jeszcze, ale na dłuższą metę będzie mieć wiele korzyści z wykorzystaniem Material 2 w was kątową aplikację. Oto przegląd:

Komponent Development Kit

W ostatnich wydaniach Material 2 zespół wprowadzonych @angular/cdk który jest rdzeń dla Material 2 a także daje programistom świetny grunt do tworzenia własnych komponentów thirdparty. Nie ma zbyt wiele dokumentów na temat @angular/cdk, ale możesz śledzić ten numer https://github.com/angular/material2/issues/2789, aby być na bieżąco.

Responsive goddies

Nie ma wbudowane funkcje w Material 2 który daje reagujących goddies. W tym przypadku musisz użyć @angular/flex-layout rzecz jest całkowicie oddzielna od Material 2 - w zasadzie jest to ładna abstrakcja na szczycie Flexbox CSS. Dzięki temu nie musisz samodzielnie pisać całej gamy responsywnych css mediówQueries.

przeglądarki obsługują

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

Bootstrap + Materiał?

Nie ma powodu, dla którego chcesz połączyć oba moduły w swojej aplikacji, jeśli myślisz o łącznym rozmiarze pakietów, które zawierają dwa silne interfejsy. Również w tym przypadku musisz zadbać o konflikty, które mogą wystąpić przy użyciu obu projektów w tym samym projekcie.

Answer 2

Chociaż odpowiedź Kuncevic jest w porządku, myślę, że powinniśmy również dodać następujące:

• kątowy Materiał jest niejawnie uaktualniania/obniżenie DOM elementy
  podczas Bootstrap nie jest. Oznacza to, że w Bootstrap masz to, co widzisz, podczas gdy w Kątowym materiale, niektóre elementy są automatycznie renderowane jako . Tak więc, nie mogę naprawdę zobaczyć, jak możesz połączyć te dwa elementy, nawet jeśli chcesz. Dodając, Angular's view encapsulation w miksie, rzeczy stają się jeszcze bardziej nieprzyjemne.
• Jedyną częścią, w której widzę miejsce do współpracy, jest sieć.Możesz
  użyć reszty Bootstrap dla siatki i materiału kątowego, ale z układem Angular Flex Układ (jak już wspomniano Kunsevic) tak naprawdę nie musisz. Jest tam mała krzywa uczenia się, ale warto, jeśli używasz Angular.
• Kod CSS Bootstrapa powoduje konflikt z CSS materiału kątowego. Po użyciu zauważyłem, że niektóre elementy, takie jak ikony wewnątrz przycisków pływających, nie są prawidłowo wyśrodkowane itp. Nie powinno to być trudne, ale po co zawracać sobie głowę, kiedy można używać Angular Flex?

Nadzieję, że pomaga.