如何在Bootstrap 4中使用Material design

Question

我正在开发一个Web应用程序，一直在使用Bootstrap-4的功能，后来决定添加Material Design库以获得更多功能，但不幸的是，我的页面上有些功能已经改变了，例如文本颜色、字体大小和按钮外观。我对此感到困惑，是否有任何规则可以安排调用Bootstrap-4和Material Design的链接和脚本文件，或者与这些框架的使用有关的其他内容？

- Roman

---

你用了哪个库来实现Material Design的呈现？ - Zahidul Islam Ruhel

由于bs4的工作方式，所有md impls库只需要添加md lib imp，因为它们通常作为库的一部分编译了bs4。 - Fred Grott

Answer 1

这是一个使用Bootstrap 4材料的逐步方法

步骤1：使用Angular CLI命令创建新的Angular项目：

ng new your-angular-project --style=scss

步骤2：

cd your-angular-project

步骤三：GitHub npm安装。

npm i angular-bootstrap-md --save 

步骤 4：在 app.module.ts 中添加以下内容。

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
});

步骤5：确保在angular-cli.json文件中styleExt设置为"scss"，如果没有，请更改：

"styleExt": "css" to "styleExt": "scss"

步骤6：

确保你有styles.scss文件。如果你有src/styles.css，将其重命名为styles.scss。

如果你想更改现有项目的样式，可以使用ng set defaults.styleExt scss

步骤7：添加以下行到angular-cli.json中：

"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "./styles.scss"
],
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  "../node_modules/hammerjs/hammer.min.js"
],

第八步：更新ts.config.json文件，在根目录下的tsconfig.json文件中添加以下内容。

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 

步骤9：安装外部库

npm install -–save chart.js@2.5.0 font-awesome hammerjs

步骤十：运行服务器。

ng serve --open

对于手动和npm配置，请查看https://mdbootstrap.com/angular/5min-quickstart/。

对于文档，请前往https://mdbootstrap.com/，打开该页面后向下滚动，您会找到类似的内容并点击以查看文档。

- WasiF

Answer 2

请查看 Daemonite 的 Material。

Daemonite 的 Material UI 是一个基于 Google Material Design 的跨平台、完全响应式的前端界面。这个轻量级框架是使用 Bootstrap 4 构建的。

链接：https://github.com/Daemonite/material

- Vikas Yadav