Я знаю Bootstrap, могу ли я использовать компоненты MD Bootstrap и / или Angular Material в одном проекте?

Я пробовал кое-что с бутстрапом вместе с материалом.

Вы можете строить некоторые вещи вместе.

Взгляните на это сообщение в блоге: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

Там объясняется, как вы можете построить хорошие вещи из обоих вместе с scss.

Мне понравилось решение, когда все классы утилит начальной загрузки вместе с материалом.

А теперь вопрос, зачем кому-то это делать?

Потому что у bootstrap есть много очень хороших помощников, базовых стилей и особенно лучший reboot.scss, расширенный из normalize.css. Есть также некоторые другие полезные вещи, такие как помощники flex-box, возможно, также чистая система сеток css.

С SCSS у вас есть выбор импортировать только те части, которые вы хотите, и это довольно крутая вещь, чтобы не импортировать все.

Вот моя рабочая база SCSS, просто расширьте части из начальной загрузки, которые вам нужны:

_variables.scss

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

_reset.scss

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}

main.scss

@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/utilities';
@import 'reset';

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}


// Your styles

MD Bootstrap и Angular Material - это два разных пакета, которые пытаются достичь одного и того же, предоставляют готовые компоненты.

В текущих сценариях разработки нет явной необходимости использовать Bootstrap, как в старые добрые времена. Теперь большую часть времени Bootstrap используется для структурирования макета, и вы можете получить урезанную версию bootstrap, если хотите использовать его только для макетов (bootstrap-grid.min.css). Кроме того, Bootstrap пытается поддерживать большинство браузеров, включая IE10 и 11.

С другой стороны, Angular Material фокусируется на компонентах и ​​их поведении. И работает в основном во всех современных браузерах (Chrome, в основном Chrome) и почти ничего не предоставляет, когда дело доходит до макетов. Он поддерживает тематику, индивидуальный стиль и т. Д.

Вы можете использовать оба в своем проекте, оба они стабильны и пользуются большой поддержкой сообщества. Но они по-своему очень разные. Возможно, вам лучше использовать только один из них.

Но если вам действительно нужен какой-то компонент, вы все равно можете импортировать отдельный модуль из материала Angular, не нужно импортировать полный модуль материала и использовать его, что обеспечивает минимальный размер пакета. Поэтому я предлагаю вам использовать MD-bootstrap в качестве основной библиотеки компонентов, а импорт может состоять из 2 или 3 компонентов из материала Angular. Вам нужно будет добавить собственные стили для компонентов материала Angular.

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

Я лично использую Угловую таблицу материалов

с динамической загрузкой данных во многих моих проектах.

Еще я использую компонент автозаполнения углового материала.

И что самое приятное, эти компоненты легко настраиваются.