我应该将 Bootstrap 与 Angular Material 一起用于辅助类吗？

Posted 2023-03-07

【中文标题】我应该将 Bootstrap 与 Angular Material 一起用于辅助类吗？

【英文标题】：Should I use Bootstrap for helper classes alongside Angular Material for components?

【发布时间】：2021-05-07 21:16:01

【问题描述】：

Bootstrap 提供了许多出色的辅助实用程序 [例如用于填充或 flex 布局]，并且可以仅使用其 CSS 文件 [而不是提供所有 组件，如日历等]

那么，我可以将Bootstrap 用于这些帮助类，将Angular Material 用于组件吗？这是一个好主意吗？我什至可以使用 TailwindCSS 来代替 Bootstrap 的帮助类

【参考方案1】：

我认为最好的选择是创建自己的 flexbox 和 padding 类。您可以从不同的 MIT 库中汲取灵感，例如：

https://www.npmjs.com/package/flexboxes

或

https://www.npmjs.com/package/sass-flexbox

另一方面，我觉得你使用 Bootstrap 和 Angular Material 也不错。

【参考方案2】：

是的，我经常将 Angular Material 用于其组件并使用 Bootstrap 进行布局。请注意，您应该使用@ng-bootstrap/ng-bootstrap，因为普通的 Bootstrap 需要 jQuery。

这是我如何将两者混合在一起的示例：

/*-----------------------------------------------
|   Bootstrap 4 Setup
-----------------------------------------------*/
@import '~bootstrap/scss/functions';

// My custom Bootstrap overrides
@import 'theme/variables';

/*-----------------------------------------------
|   Bootstrap 4 Stylesheets
|   Comment out unused stylesheets
-----------------------------------------------*/
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';


/**
Angular custom theme
 */
@import '~@angular/material/theming';

@include mat-core();

$md-primary: (
        50 : #e6effc,
        100 : #c0d7f7,
        200 : #96bdf2,
        300 : #6ba3ed,
        400 : #4c8fe9,
        500 : #2c7be5,
        600 : #2773e2,
        700 : #2168de,
        800 : #1b5eda,
        900 : #104bd3,
        A100 : #ffffff,
        A200 : #cedbff,
        A400 : #9bb5ff,
        A700 : #81a2ff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-warning: (
        50 : #fef0e8,
        100 : #fcd9c5,
        200 : #fac09f,
        300 : #f8a678,
        400 : #f7935b,
        500 : #f5803e,
        600 : #f47838,
        700 : #f26d30,
        800 : #f06328,
        900 : #ee501b,
        A100 : #ffffff,
        A200 : #fff2ee,
        A400 : #ffcabb,
        A700 : #ffb6a1,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #000000,
                600 : #000000,
                700 : #000000,
                800 : #000000,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-danger: (
        50 : #fce7eb,
        100 : #f8c3cd,
        200 : #f39bab,
        300 : #ee7389,
        400 : #ea5570,
        500 : #e63757,
        600 : #e3314f,
        700 : #df2a46,
        800 : #db233c,
        900 : #d5162c,
        A100 : #ffffff,
        A200 : #ffd3d7,
        A400 : #ffa0a8,
        A700 : #ff8691,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-secondary: (
        50 : #eef0f2,
        100 : #d5d9df,
        200 : #bac0ca,
        300 : #9ea7b4,
        400 : #8994a4,
        500 : #748194,
        600 : #6c798c,
        700 : #616e81,
        800 : #576477,
        900 : #445165,
        A100 : #c1d9ff,
        A200 : #8ebaff,
        A400 : #5b9cff,
        A700 : #418cff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$default-theme-primary: mat-palette($md-primary, 500, 100, 900);
$default-theme-accent: mat-palette($md-warning, 800, 300, 200);
$default-theme-warn: mat-palette($md-danger, A700);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$default-theme: mat-light-theme(
                $default-theme-primary,
                $default-theme-accent,
                $default-theme-warn
);

$custom-typography: mat-typography-config(
        $font-family: $font-family-sans-serif,
        $subheading-1: mat-typography-level(19.2px, $headings-line-height, $headings-font-weight),
        $subheading-2: mat-typography-level(27.648px, $headings-line-height, $headings-font-weight),
        $headline: mat-typography-level(39.8131px, 24px, $headings-font-weight),
        $title: mat-typography-level(33.1776px, 24px, $headings-font-weight),
        $body-2: mat-typography-level(16px, 24px, 500),
        $body-1: mat-typography-level(16px, 20px, 400),
        $caption: mat-typography-level(14px, 20px, 400),
        $button: mat-typography-level(16px, 14px, 500)
);


@include angular-material-theme($default-theme);
@include angular-material-typography($custom-typography);

/**
Custom theme files here
 */

【讨论】：

我相信如果我只在 angular.json 的样式数组中包含 bootstrap 的 CSS 文件，jQuery 部分不会有问题，因为这就是我所需要的帮助类和布局功能.另外，Bootstrap 5 似乎抛弃了 jQuery [并不是说基于 js 的功能对布局和帮助类很重要]

问题在于 BS4 和 BS5 都需要 javascript（无论是否使用 jQuery）来直接操作 DOM 以使某些组件工作，这在 Angular 项目中是一个很大的禁忌。如果你只想要一个网格系统和 SCSS 助手，你很好，但如果你想使用任何组件，你需要 ng-bootstrap。