如何在 bootstrap 4 中使用 Material Design答案

【问题标题】：How to use Material design with bootstrap 4如何在 bootstrap 4 中使用 Material Design
【发布时间】：2018-04-18 06:38:43
【问题描述】：

我正在开发一个网络应用程序，我一直在使用 bootstrap-4 功能，然后我决定添加材料设计库以提供更多功能，但不幸的是我的页面上的一些功能发生了变化，例如文本颜色、字体大小和按钮外观.我对此感到困惑，是否有任何规则可以安排调用 bootstrap-4 和材料设计的链接和脚本文件？还是关于这些框架的使用的其他内容？

【问题讨论】：

你使用哪个库进行材料设计？
由于 bs4 的工作方式，所有 md impls 库只需要添加 md lib imp，因为它们通常与作为库的一部分编译的 bs4 一起提供

标签： twitter-bootstrap material-design bootstrap-4

【解决方案1】：

这是一个循序渐进的方法，以使用Material with Bootstrap 4

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

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

第二步：

cd your-angular-project

第 3 步：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 步：确保 styleExt 在 angular-cli.json 文件中设置为“scss”，如果没有更改：

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

第 6 步：

确保您拥有 .如果您有 src/styles.css，请将其重命名为 .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"
],

第 8 步：更新 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

第 10 步：运行服务器

ng serve --open

手动和 npm 配置，https://mdbootstrap.com/angular/5min-quickstart/

文档，https://mdbootstrap.com/，打开这个页面后，往下走会找到类似的，点击查看文档

【讨论】：

【解决方案2】：

请查看 Daemonite 的 Material。

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

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

【讨论】：