Có thể Bootstrap (4) được tích hợp cùng với Vật liệu góc (2) không?

Question

Tôi muốn sử dụng thư viện Angular Material 2, vì các thành phần (danh sách ngày càng tăng) của nó. Nhưng tôi đang sử dụng để bootstrap và đó là goodies như tiện ích đáp ứng và giao diện người dùng nhẹ cho những điều điển hình. Bởi Bootstrap Tôi chủ yếu có nghĩa là phần CSS của nó, tôi hầu như không bao giờ cần chức năng JS của nó.

Ví dụ trong Material lilbrary thực tế là không có kiểu dáng cho nhóm danh sách, trong khi Bootstrap cho rằng với css của nó.

Tôi nhớ đọc rằng kết hợp chúng không phải là một ý tưởng hay, chủ yếu là do các kiểu ứng dụng toàn cầu của chúng sẽ va chạm. Tôi không thể tìm thấy nguồn và tôi là curios - đó là sự thật với các phiên bản hiện tại? Nếu vậy, chính xác những gì đang xung đột và làm thế nào nó có thể được làm việc xung quanh?

Answer 1

Angular Material 2 là thư viện mới vẫn đang trong quá trình phát triển tích cực, vì vậy bạn không nên mong đợi nhiều tính năng ưa thích trong đó, nhưng về lâu dài bạn sẽ có rất nhiều lợi ích khi sử dụng Material 2 trong ứng dụng góc cạnh. Dưới đây là một số tổng quan:

Component Development Kit

Trong các phiên bản mới nhất Material 2 đội giới thiệu @angular/cdk mà là một cốt lõi cho Material 2 và cũng cung cấp cho các nhà phát triển một nền tảng tuyệt vời để viết các thành phần thirdparty riêng của họ. Chưa có nhiều tài liệu trên @angular/cdk nhưng bạn có thể theo dõi vấn đề đó https://github.com/angular/material2/issues/2789 để tiếp tục cập nhật về vấn đề đó.

goddies Responsive

Không có chức năng dựng sẵn trong Material 2 cung cấp cho bạn goddies đáp ứng. Đối với vấn đề đó bạn phải sử dụng điều @angular/flex-layout hoàn toàn tách biệt với Material 2 - về cơ bản nó là một trừu tượng tốt đẹp trên đầu trang của Flexbox CSS. Sử dụng đó bạn không phải viết toàn bộ bó của css mediaQueries đáp ứng chính mình.

Các trình duyệt hỗ trợ

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

Bootstrap + Chất liệu?

Không có lý do nào bạn muốn kết hợp cả hai Khung trong ứng dụng của mình nếu bạn nghĩ về tổng kích thước của các gói có tham chiếu hai khung kết thúc trước nặng. Cũng trong trường hợp đó, bạn phải quan tâm đến các xung đột có thể xảy ra khi sử dụng cả hai trong cùng một dự án.

Answer 2

Trong khi câu trả lời Kuncevic là chính xác, tôi nghĩ chúng ta cũng nên thêm như sau:

• góc Chất liệu được ngầm nâng cấp/hạ DOM yếu tố
  khi Bootstrap thì không. Điều đó có nghĩa là trong Bootstrap, bạn nhận được những gì
  bạn thấy, trong khi ở Góc vật liệu, một số thành phần được tự động hiển thị . Vì vậy, tôi không thể thực sự thấy cách bạn có thể kết hợp cả hai, ngay cả khi bạn muốn. Thêm vào, Angular's view encapsulation trong hỗn hợp, mọi thứ thậm chí còn lộn xộn hơn.
• Phần duy nhất tôi thấy phòng hợp tác nằm trong lưới.Bạn
  có thể sử dụng Bootstrap cho lưới và Vật liệu góc cho phần còn lại, nhưng với Angular Flex Bố trí (như Kunsevic đã đề cập), bạn không thực sự cần. Có một đường cong học tập nhỏ ở đó, nhưng nó là giá trị nó, nếu bạn sử dụng Góc.
• CSS của Bootstrap không xung đột với CSS của Angular Material. Khi sử dụng cùng nhau, tôi đã nhận thấy rằng một số yếu tố như biểu tượng bên trong các nút nổi không được căn giữa, v.v. Đây không phải là một sửa lỗi khó khăn , nhưng tại sao bạn phải sử dụng Angular Flex?

Hy vọng điều đó sẽ hữu ích.