Question

一段时间以来，我对Bootstrap非常熟悉。我正在学习Angular，现在正在看MD Bootstrap和Angular Material。

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

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

例如Sidenav

Bootstrap没有本地的sidenav，所以我想看看Angular Materialials sidenav是否可以工作...

Answer 1

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

我个人使用了角度材料表

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

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

最好的部分是这些组件很容易可配置。

Answer 2

MD Bootstrap和Angular Material是两个不同的软件包，试图实现相同的目的，并提供现成的组件。

在当前的开发场景中，显然不需要像过去那样使用Bootstrap。现在，大多数情况下，Bootstrap用于布局结构化，如果只想将其用于布局（bootstrap-grid.min.css，则可以得到Bootstrap的修剪版本。另外，Bootstrap尝试支持大多数浏览器，包括IE10和11。

另一方面，Angular Material专注于组件及其行为。并且几乎可以在所有现代浏览器（Chrome，主要是Chrome）上使用，并且在布局方面几乎一无所获。它确实支持主题，自定义样式等。

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

但是，如果您确实需要某些组件，则仍然可以从Angular材质导入单个模块，而无需导入完整的材质模块并使用它，从而确保了最小的捆束尺寸。因此，我建议您使用MD-bootstrap作为主要组件库，并从Angular材质中导入2或3个组件。您将必须为Angular材质组件添加自定义样式。

Answer 3

我已经尝试过使用引导程序和材料进行一些操作。

您可以一起构建一些东西。

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

其中说明了如何与scss一起构建美好事物。

我喜欢将所有bootstrap实用程序类与材料一起使用的解决方案。

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

因为bootstrap有很多很好的助手，基本样式，尤其是从normalize.css扩展而来的最好的reboot.scss。还有其他一些好东西，例如flex-box helper，也许还有纯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

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

3 个答案:

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

这是我的SCSS工作基础，只需扩展所需的引导程序部分即可：