Wie benutze ich Material Design mit Bootstrap 4

Question

Ich entwickle eine Web-App, ich habe Bootstrap-4 Funktionen verwendet, dann habe ich beschlossen, Material Design-Bibliothek hinzuzufügen, um mehr Funktionen zu haben, aber unglücklicherweise einige Funktionen auf meiner Seite wie geändert haben Textfarben, Schriftgröße und Schaltflächen Aussehen. Ich bin damit verwirrt, gibt es eine Regel für Anordnung der Aufruf der Links und Scripts-Dateien von Bootstrap-4 und Material-Design? oder etwas anderes bezüglich der Verwendung dieser Frameworks?

Answer 1

Bitte sehen Sie sich Material von Daemonite.

Daemonites Material-UI ist eine plattformübergreifende und vollständig reaktionsfähige Front-End-Schnittstelle auf Basis von Google Material Design. Dieser leichte Rahmen wird mit Bootstrap gebaut 4.

-Link: https://github.com/Daemonite/material

Answer 2

Material Design für Bootstrap 4 - und Sie nichts anderes brauchen:

https://mdbootstrap.com/material-design-for-bootstrap/

Answer 3

Dies ist ein Schritt Schritt Methode zu verwenden Material mit Bootstrap 4

Schritt 1: Erstellen neuer Angul ar Projekt mit Angular CLI-Befehl:

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

Schritt 2:

cd your-angular-project 

Schritt 3: GitHub npm installieren

npm i angular-bootstrap-md --save 

Schritt 4: zu app.module.ts hinzufügen

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

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

Schritt 5: Stellen Sie sicher, dass styleExt ist auf "SCSS" in Winkel cli.json Datei, wenn nicht ändern:

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

Schritt 6:

Stellen Sie sicher, Sie haben. Wenn Sie stattdessen src/styles.css haben, benennen Sie es in .scss um.

wenn Sie Arten ändern Projekt in bestehende können Sie ng defaults.styleExt Satz verwenden SCSS

Schritt 7: Fügen Sie unten Zeilen Winkel 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" 
], 

Schritt 8: Update ts.config.json Datei, fügen Sie folgende in tsconfig hinzu.JSON-Datei in Stammordner befindet

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

Schritt 9: Installation von externen Libs

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

Schritt 10: Führen Server

ng serve --open 

für manuelle und npm Konfiguration https://mdbootstrap.com/angular/5min-quickstart/

für Dokumentation, https://mdbootstrap.com/, nach dem Öffnen dieser Seite, gehen Sie nach unten finden so, und klicken Sie auf Dokumentation, um zu sehen