如何使用带有引导程序的材料设计4

Question

我正在开发一个Web应用程序，我一直在使用bootstrap-4功能，然后我决定添加材质设计库以获得更多功能，但遗憾的是我的页面上的一些功能已经改变，如文本颜色，字体大小和按钮外观。我对此感到困惑，是否有任何规则可以安排调用bootstrap-4和材料设计的链接和脚本文件？或者关于这些框架的使用的其他事项？

Answer 1

请查看Daemonite的材料。

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

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

Answer 2

分步方法使用材料与Bootstrap 4

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

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

第2步：

cd your-angular-project

第3步：GitHub npm install

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设置为＆＃34; scss＆＃34;在angular-cli.json文件中，如果没有更改：

"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/，打开此页面后，向下找到，然后点击查看文档