Может ли Bootstrap (4) быть интегрирован вместе с Angular Материалом (2)?

Я бы хотел использовать библиотеку Angular Material 2 из-за ее (растущего списка) компонентов. Но я привык к загрузке, и это хорошо, как отзывчивые утилиты и легкий пользовательский интерфейс для типичных вещей. By Bootstrap Я в основном имею в виду его часть CSS, мне почти никогда не нужна ее функциональность JS.

Например, в Material lilbrary существует практически нулевой стиль для группы списков, а Bootstrap дает это с помощью css.

Я помню, как читал, что объединение их - не очень хорошая идея, главным образом потому, что их глобальные стили приложения будут сталкиваться. Я не могу найти этот источник, и я любопытство - это правда с текущими версиями? Если это так, то, что конфликтует и как его можно обойти?

Ответы

Ответ 1

Angular Material 2 - это новая библиотека, которая все еще находится в активной разработке, поэтому вам пока не стоит ожидать от нее многих интересных функций nice to have, но в долгосрочной перспективе вы получите множество преимуществ, используя 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 4 IE10+
Bootstrap 3 IE8+

Bootstrap + Материал?

Нет причин, по которым вы хотите объединить обе Frameworks в своем приложении, если вы думаете об общем размере ваших пакетов, имеющих ссылки на две мощные интерфейсные среды. Также в этом случае вы должны заботиться о конфликтах, которые могут возникнуть при использовании обоих в одном проекте.

Ответ 2

Поскольку Bootstrap является модульным, одним из альтернативных подходов может быть использование Angular Material, а затем просто выбрать из Bootstrap только те части, которые вам действительно нужны.

Примечание: что бы вы ни собирались импортировать, вы должны сначала установить загрузчик:

npm install bootstrap --save

И импортируйте требуемый файл sass в свой глобальный 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";

Например, вы можете использовать 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/

Ответ 3

Хотя ответ Кунцевича прав, я думаю, мы также должны добавить следующее:

  • Angular Материал неявно обновляет/понижает уровни элементов DOM
    а Bootstrap - нет. Это означает, что в Bootstrap вы получаете то, что вы видите, в то время как в Angular Материал, некоторые элементы автоматически оказаны. Итак, я не могу понять, как вы можете объединить эти два, даже если вы хотите. Добавление, Angular просмотр инкапсуляции в миксе, вещи становитесь еще более грязными.
  • Единственная часть, где я вижу место для сотрудничества, находится в сетке. Вы
    может использовать Bootstrap для сетки и Angular Материал для остальных, но с Angular Flex Макет (как уже упоминал Кунцевич) вам действительно не нужно. Там есть небольшая кривая обучения, но это того стоит, если вы используете Angular.
  • Bootstrap CSS конфликтует с Angular Материалом CSS. При использовании вместе я заметил, что некоторые элементы, такие как значки внутри плавающие кнопки не центрированы правильно и т.д. Это не должно быть трудно исправить, но зачем беспокоиться, когда вы можете использовать Angular Flex?

Надеюсь, что это поможет.