使用 Bootstrap for Angular 和 Material design for Angular

Question

我正在使用此模板进行项目。

该模板是使用 AngularJs 和 Bootstrap-UI（用于 angular 的引导程序）编写的，我想包含一些 Material Design 元素，例如卡片和其他元素。

有可能这样做吗？ 推荐吗？ 我的事情是我们已经喜欢这个模板和它的许多元素的方式，但是 Material Design 有卡片、下拉菜单、带有标签动画的文本输入等等，这些都很棒。

所以我的问题是：

AngularJS + 用于 Angular 的 Bootstrap + 用于 Angular 的 Material Design = 令人敬畏还是灾难？

Answer 1

如果你同时添加 bootstrap 和 angular-material 这就是会发生的事情

1. 两者都有 css 将针对您的前端元素（例如输入
   元素，按钮）

2. 每个都有自己的外观和感觉（即 Bootstrap 输入元素与 Material 输入元素不同）。 因此，您的整个项目不会只有一种外观和感觉。

3. 如果您同时添加两者，您将不得不处理在公共部分（例如字体大小和字体系列）上覆盖其他样式的 css 样式。

4. Angular-material 以角度方式处理前端元素（指令）所以当他们发布一个新版本（到目前为止有 29 个版本）时，你将不得不花一些时间测试你早期的代码（例如，他们将 $media 更改为 $mdMedia 来处理 sideMenu） . 我花了很多时间寻找为什么我的 sideMenu 停止工作！。

5. 如果您使用两个前端框架，您的项目依赖项的整体大小将会增加。

   Angular-material 需要它自己的依赖项，例如“angular-animate”和“angular-aria”。

谈论你的“md-cards”，引导程序中有“面板”，你可能想看看这里

我建议你坚持一件事，要么是引导程序，要么是角材料。 两者都很棒只是不要混合它们。

Answer 2

我最近刚刚写了一篇关于如何用 Angular-Material替换Bootstrap 的博客文章。 它基于我正在使用的选择的 kickstarter 框架，但它会完成您所追求的工作。

就像@nitin 所说的那样，实现两者都具有挑战性。 我实际上要求您考虑的是，无论是否可能，您都需要两者的原因是什么？

两者的目的都是提供一个整体通用的 UI 风格，但它们在概念上是相互并列的，而不是可以协同工作的东西。

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

Answer 3

我写了Angular Bootstrap Material ，它是Bootstrap 材料设计主题的 AngularJS 版本。 它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖。 并支持使用ng-messages表单验证。

您可以通过bower install abm从bower install abm 。

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

---

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

 angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']); angular.module('angularBootstrapMaterialDocs') .controller('validationDemoCtrl', ['$scope', function($scope) { $scope.user = { name: "", notifications: {} } $scope.errorMap = { required: "This field is mandatory", email: "Please enter a valid email" } $scope.change = function() { console.log($scope); } } ]);

 .container-fluid { background-color: #fff;

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script> <script src="https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js"></script> <div class="container-fluid" ng-app="angularBootstrapMaterialDocs"> <div class="row" ng-controller="validationDemoCtrl"> <div class="col-xs-12 col-sm-6"> <form name="signup"> <abm-form-group error-messages="errorMap"> <label data-abm-label type="floating">Name</label> <input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required> </abm-form-group> <abm-form-group error-messages="errorMap"> <label data-abm-label>Email</label> <input type="email" name="email" class="form-control" placeholder="johndoe@mail.com" abm-form-control ng-model="user.email" required> </abm-form-group> <div class="form-group"> <div class="togglebutton" abm-toggle label="Premium Account"> <input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=undefined"> </div> </div> <abm-form-group error-messages="errorMap"> <label>Prefered payment method</label> <div class="radio" abm-radio label="Net banking"> <input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium"> </div> <div class="radio" abm-radio label="Credit card"> <input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium"> </div> </abm-form-group> <div class="form-group"> <div class="togglebutton" abm-toggle label="Send Me Updates"> <input type="checkbox" name="notifications" ng-model="user.notify" ng-change="user.notifications={}"> </div> </div> <div class="row"> <div class="col-xs-6"> <abm-form-group error-messages="errorMap"> <label>Notifications via:</label> <div class="checkbox" abm-checkbox label="Text Message"> <input type="checkbox" name="text-notifications" ng-model="user.notifications.text" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.email"> </div> <div class="checkbox" abm-checkbox label="Email"> <input type="checkbox" name="email-notifications" ng-model="user.notifications.email" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.text"> </div> </abm-form-group> </div> <div class="col-xs-6"> <abm-form-group error-messages="errorMap"> <label>Notification Frequency:</label> <select class="form-control" name="frequency" abm-form-control ng-model="user.notifications.frequency" ng-disabled="!user.notify" ng-required="user.notify"> <option>Daily</option> <option>Weekly</option> <option>Monthly</option> </select> </abm-form-group> </div> </div> <a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a> </form> </div> <div class="col-xs-12 col-sm-6"> <pre>{{user | json}}</pre> </div> </div> </div>

Answer 4

对表单元素使用角材料包。 使用 bootstrap css grid 进行响应式设计。 https://www.npmjs.com/package/@zirafa/bootstrap-grid-only

Answer 5

仅添加bootstrap-grid-min.css不能正常工作，此外它没有其他方便的类，如text-right等。

所以，这就是我想出的：将bootstrap-min.css放在你的资产中：

在你的styles.scss/styles.css导入：

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

但这与 material-ui 的设计相冲突。 就像，我立即注意到单击时按钮周围出现了意外的边框（虽然听起来并不那么烦人）。

您可以在styles.scss添加以下styles.scss来消除这些影响。

* {
  &: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
  }

阅读更多： https : //www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

Answer 6

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

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

因为材料组件没有定义任何改变任何原生样式（它甚至没有任何 normalize.css 实现）。 如果您检查材质样式的主题，例如https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css，您将找不到本机标签的任何样式。

您应该注意的是不要在同一元素上同时使用这两种样式，例如以下不会按预期工作

<button mat-raised-button class="btn btn-primary">Submit</button>

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

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

Answer 7

使用bootstrap-grid进行响应式设计，其他使用angular-material ：

安装引导程序后，

npm i bootstrap --save

导入bootstrap-grid.min.css

"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而不是整个bootstrap.min.css文件