我已经尝试了一些使用 bootstrap 和材料的东西。
你们可以一起建造一些东西。
看看这篇博文：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 工作基础，只需从 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