我知道 Bootstrap，我可以在同一个项目中使用 MD Bootstrap 和/或 Angular Material 组件吗？

Question

我已经很熟悉 Bootstrap 一段时间了。我刚刚在学习 Angular，现在正在看 MD Bootstrap and Angular Material。

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

我知道它们可以用来代替 Bootstrap，但是如果我喜欢 Bootstrap 并且只想使用 Angular Material 中的 2 个组件怎么办？

例如。 sidenav

Bootstrap 没有原生的 sidenav，所以我想看看 Angular Meterials sidenav 是否可行...

Answer 1

是的，您可以使用 Angular Material 作为 bootstrap 的补充。

I have personally use Angular Material Table

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

I have also use autocomplete component of angular material.

最棒的是这些组件很容易配置。

Answer 2

MD Bootstrap and Angular Material 是两个不同的包，试图实现同一件事，提供 ready-made 个组件。

在当前的开发场景中，没有明确需要像过去那样使用 Bootstrap。现在，大多数时候 Bootstrap 用于布局结构，如果您只想将它用于布局 (bootstrap-grid.min.css)，您可以获得 bootstrap 的修剪版本。此外，Bootstrap 尝试支持大多数浏览器，包括 IE10 和 11。

另一方面，Angular Material 侧重于组件及其行为。并且主要适用于所有现代浏览器（Chrome，主要是 Chrome）并且在布局方面几乎不提供任何内容。它确实支持主题化、自定义样式等。

你可以在你的项目中使用它们，它们都很稳定并且有很多社区支持。但他们以自己的方式非常不同。你最好只使用其中之一。

但是如果你真的需要一些组件，你仍然可以从 Angular material 中导入单个模块，而不需要导入完整的 material 模块并使用它，这确保了最小的包大小。所以我建议你使用 MD-bootstrap 作为主要组件库，并且可以从 Angular material 导入 2 或 3 个组件。您必须为 Angular material 个组件添加自定义样式。

Answer 3

我已经用 bootstrap 和 material 尝试了一些东西。

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

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

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

我喜欢将所有 bootstrap 实用程序类与 material.

结合在一起的解决方案

现在的问题是为什么有人应该这样做？

因为 bootstrap 有很多非常好的助手、基本样式，尤其是最好的 reboot.scss，从 normalize.css 扩展而来。还有一些其他的好东西，比如 flex-box 助手，也许还有纯 css 网格系统。

使用 SCSS，您可以选择只导入您想要的部分，而不是导入所有内容是一件很酷的事情。

这是我的 SCSS 工作基础，只需扩展 bootstrap 你想要的部分：

_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

我知道 Bootstrap，我可以在同一个项目中使用 MD Bootstrap 和/或 Angular Material 组件吗？

I know Bootstrap, can I use MD Bootstrap and or Angular Material components in the same project?

twitter-bootstrap

angular-material

angular

mdbootstrap

现在的问题是为什么有人应该这样做？

这是我的 SCSS 工作基础，只需扩展 bootstrap 你想要的部分：