Angularjs 使用Bootstrap进行角度和材料设计，同时进行角度

我正在用这个做一个项目

该模板是使用AngularJs和Bootstrap UI（angular的Bootstrap）编写的，我想包括一些材质设计元素，如卡片和其他

有可能吗？推荐吗？ 我的事情是，我们已经喜欢这个模板和它的许多元素的方式，但材料设计有卡片，下拉列表，文本输入和标签动画等，例如，这是惊人的

所以我的问题是：

---

AngularJS+Bootstrap for Angular+Material Design for Angular=可怕还是灾难？

如果同时添加Bootstrap和Angular材质，将会发生这种情况

两者都有针对前端元素的css（例如输入
元素、按钮）

每个都有自己的外观（即引导输入元素不同于物料输入元素）。因此，您的整个项目不会有一个单一的外观和感觉

如果同时添加这两种样式，则必须注意css样式在公共部分（例如，字体大小和字体系列）上的覆盖性

角度材质以角度方式处理前端元素（指令） 因此，当他们发布一个新版本（到目前为止有29个版本）时，您将不得不花一些时间测试您的早期代码（例如，他们将$media更改为$mdMedia以处理侧菜单）。我花了很多时间来寻找我的副菜单停止工作的原因

如果使用两个前端框架，则项目依赖项的总体大小将增加

角度材质需要它自己的依赖项，如“角度动画”& “角咏叹调”

说到你的“md卡”，在引导程序中有“面板”，你可能想看看

我建议你坚持一件事，要么是引导，要么是有棱角的材料。这两种都很棒，只是不要把它们混在一起。

。它基于我选择的kickstarter框架，但它可以完成你想要的工作

正如@nitin所说，实现这两个目标将是一个挑战。我实际上想让你们思考的是，不管是否可能，为什么你们都想要

两者的目的都是提供一个总体通用的UI样式，但它们在概念上是相互对应的，而不是可以协同工作的

我建议你在开始阅读之前，从谷歌指南开始阅读更多关于材料设计的内容。

我已经写过，这是AngularJS版本的。它消除了对jQuery和bootstrap的JavaScript的依赖。并支持使用

ng消息进行表单验证

您可以通过
bower安装abm
从bower安装

由于您已经在使用UI引导，因此唯一的附加依赖项将是引导材质设计主题css和


下面是一个基本表单验证演示：


angular.module（'angularbootstrapmateraldocs'，['angularbootstrapmater'，'ui.bootstrap']）；
angularBootstrapMaterialDocs'模块
.controller（'validationDemoCtrl'，['$scope'，
职能（$范围）{
$scope.user={
姓名：“，
通知：{}
}
$scope.errorMap={
必填：“此字段为必填项”，
电子邮件：“请输入有效的电子邮件”
}
$scope.change=函数（）{
console.log（$scope）；
}
}
]);
。容器流体{
背景色：#fff；

{{user | json}}
我最近也分析了这个问题。Angular的新版本是Angular 5。但要为几个星期前发布的Angular版本找到好看的组件并不容易

Angular Material主要基于flex布局。您应该检查这是否是对您的限制。如果您只使用输入组件，而不集成任何其他引导javascript（如ng引导）框架，它应该可以工作

因为材质组件不定义任何本地样式的更改（它甚至没有任何normalize.css实现）。
找不到本机标记的任何样式

您需要注意的是，不要在同一元素上同时使用两种样式，例如。
以下操作将无法按预期工作

<button mat-raised-button color="primary">Primary</button>

提交

如果使用材质组件，则应在该组件上使用特定于材质的样式。例如

npm i bootstrap --save

Primary
对表单元素使用角度材料包。
使用引导css网格进行响应性设计。
https://www.npmjs.com/package/@仅zirafa/自举网格
对于响应性设计使用
自举网格
，对于其他东西使用
角材料
：

安装引导程序后

"styles": [
   "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "./node_modules/bootstrap/dist/css/bootstrap-grid.min.css", <- this line
   "src/styles.scss"
], 

导入
bootstrap grid.min.css

@import './assets/css/bootstrap.min.css';

“样式”：[
“/node_modules/@angular/material/prebuild themes/indigo pink.css”，
“/node_modules/bootstrap/dist/css/bootstrap grid.min.css”，仅添加
bootstrap-grid-min.css
无法正常工作，而且它没有其他方便的类，如
text right
等

下面是我的想法：
将
bootstrap-min.css
放入您的资产中：


导入您的
样式.scss/styles.css
：

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
    color: #3f51b5; // 2
  }

但这与材质ui的设计相冲突。比如，当我点击按钮时，我立刻注意到按钮周围出现了意想不到的边框（虽然听起来没那么烦人）

您可以在
styles.scs
中添加以下内容以消除这些影响

阅读更多内容：
Hey@nitin精彩的辩论，我只是有一点担心，我想听听你的意见，我喜欢有角度的材质元素，比如输入、标签等。但是基于flex的布局让我在手机上疯狂。如果我使用bootstrap gr呢
* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
    color: #3f51b5; // 2
  }