我知道Bootstrap，可以在同一項目中使用MD Bootstrap和Angular Material組件嗎？

Question

我對Bootstrap很熟悉了一段時間。 我只是在學習Angular，現在正在看MD Bootstrap和Angular Material 。

但是我有點困惑。 可以將這兩個框架（特別是它們的組件）用作Bootstrap的補充嗎？

我知道可以用它們代替Bootstrap，但是如果我喜歡Bootstrap並只想使用Angular Material中的2個組件怎么辦？

恩。 sidenav

Bootstrap沒有本地的sidenav，所以我試圖查看Angular Materialials sidenav是否可以工作...

Answer 1

是的，您可以使用Angular Material作為Bootstrap的補充。

我個人使用過角材料表

在我的許多項目中都具有動態數據加載功能。

我還使用了角材料的自動完成組件。

最好的部分是這些組件易於配置 。

Answer 2

MD Bootstrap和Angular Material是兩個不同的軟件包，它們試圖實現相同的目的，並提供現成的組件。

在當前的開發場景中，顯然不需要像過去那樣使用Bootstrap。 現在，大多數情況下，Bootstrap用於布局結構化，如果只想將其用於布局，則可以獲得Bootstrap的修剪版本（ bootstrap-grid.min.css ）。 另外，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有很多非常好的助手，所以它們的基本樣式，尤其是最好的reboot.scss，是從normalize.css擴展而來的。 還有其他一些好東西，例如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