我知道引导带，我可以在同一个项目中使用MD引导带和角材料组件吗？

Question

我对靴带已经很熟悉了一段时间了。我只是在学习角度，现在我在看MD靴带和角质材料。

但我有点困惑。这两个框架，特别是它们的组件，可以作为Bootstrap的补充吗？

我知道它们可以代替引导带，但是如果我喜欢引导带，并且只想使用来自角度材料的两个组件呢？

例如。西德纳夫

Bootstrap没有原生的sidenav，所以我想看看角质材料的sidenav是否能工作.

Answer 1

我用鞋带和材料一起尝试过一些东西。

你们可以一起建造一些东西。

看看这篇博文：https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

这里解释了如何与scss一起构建好的东西。

我喜欢把所有的引导实用工具类和材料放在一起的解决方案。

现在的问题是为什么有人要这么做？

因为引导程序有很多非常好的帮助程序，基本样式，尤其是最好的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

Answer 2

MD靴带和角质材料是两个不同的包，它们试图实现相同的目标，提供现成的组件.

在当前的开发场景中，没有明显的必要像以前那样使用Bootstrap。现在，大多数情况下，引导带用于布局结构，如果只想将其用于布局(bootstrap-grid.min.css)，则可以获得引导带的修整版本。同时，Bootstrap试图支持大多数浏览器，包括IE10和11。

另一方面，角材料关注的是部件及其行为。并且主要在所有现代浏览器(Chrome，大多是Chrome)上工作，在布局方面几乎什么都不提供。它确实支持主题化、定制样式等。

您可以在您的项目中使用这两种方法，它们都是稳定的，并且有大量的社区支持。但他们有很大的不同在他们自己的方式。你最好只使用其中的一种。

但是，如果您确实需要一些组件，您仍然可以从角度材料导入单独的模块，不需要导入完整的材料模块并使用它，这确保了最小的捆绑尺寸。因此，我建议您使用MD引导作为主要组件库，导入可能是2或3个组件的角度材料。您将不得不添加角材料组件的自定义样式。

Answer 3

是的，你可以用角质材料作为鞋带的补充。

我个人使用过角材料表

在我的许多项目中加载动态数据。

我还使用了角材料的自动完成组件。

最重要的是这些组件是易于可配置的。