将Bootstrap用于Angular和Material Design一起用于Angular

68

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

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

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

所以我的问题是：

AngularJS + Angular的Bootstrap + Angular的材质设计=令人敬畏还是灾难？

angularjs  twitter-bootstrap  angular-ui-bootstrap  angular-material 
— 费利佩·米兰（Felipe Millan）
source

Answers:

100

如果同时添加引导程序和角材料，将发生这种情况

  1. 两者都有css，它们将以您的前端元素（例如输入
    元素，按钮）为目标

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

  3. 如果同时添加两者，则必须注意css样式在公共部分（例如，字体大小和字体系列）上会覆盖其他样式。

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

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

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

谈论您的“ md卡”时，您可能想在此处查看引导中的“面板”

我建议您坚持使用引导程序或有角度的材料。两者都很棒，只是不要混在一起。

— nitin
source
2
嘿@nitin很好的论点，我只是有点担心，我希望您的意见，我喜欢棱角分明的物质元素，例如输入，制表符等，但是基于flex的布局使我在移动设备上发疯了。如果我在有角度的材料元素中使用自举网格系统，那对您有意义吗？
— Colo Ghidini
3
@ ColoGhidini，flex更加简单，您只需要先花一些时间即可。我建议您阅读一下这个非常好的弯曲指南和材料布局文档
— -nitin
1
我一直在从事一个同时具有引导程序和角度材料的项目。我现在看到的是，您可以从两面都得到最好的东西（引导类，工具栏等+材质柔韧性对齐，卡片设计等），并且现在很高兴，我遇到了2个错误到目前为止，实质性对话框和md-selects不能很好地工作（激活它们时屏幕变黑），但是目前还没有看到任何其他问题。
— 约翰·桑塔纳
@forgottofly：您将不得不探索并找出答案，我没有将这两个一起使用，因此无法列出太多内容。
— 尼丁
1
@Enrique：棱角材质使用角/挠度进行布局。Flex布局很棒，我建议您在有角度的材质应用程序中使用它。对于全局样式，可以将材料配置为使用自定义排版和混合。请参阅：material.angular.io/guides当您说“重置”时，我假设您只是想覆盖特定角度材料组件的某些样式，有几种不同的方法可以这样做，如果您可以发布新的同样的问题。
— 尼汀
13

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

就像@nitin所说的那样，实现这两者都将是一个挑战。不管是否可行，我实际上想让您考虑的是为什么您会同时想要两者？

两者的目的都是为了提供一种总体上通用的UI样式，但是它们在概念上是彼此并列的，而不是可以同时使用的东西。

我建议您在开始之前先从google指南中开始阅读有关材料设计的更多信息。

— 笨拙的
source
我只想补充一点，即Angular材料仍处于重型结构中，因此现在使用它仍然有点冒险
— Sergei Panfilov
5

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

您可以通过从Bower安装bower install abm。

由于您已经在使用UI Bootstrap，因此唯一的依赖项将是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>
展开摘要

— TJ
source
1

我最近也分析了这个问题。Angular是Angular 5的新版本。但是，几个星期前发布的此版本的angular并不容易找到漂亮的组件。

角材料主要基于柔韧性布局。您应该检查这是否对您有限制。如果您仅使用输入组件，并且未集成任何其他引导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>
— 科雷·格吕克（KorayGüclü）
source
OP可能想使用AngularJS
— Edric
0

使用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 文件

— 阿博拉唑
source
网格有时仅与bootstrap-grid.min.css不兼容。就像col-6正在突围换行。
— Deb
0

仅添加bootstrap-grid-min.css无法正常工作，此外，它没有诸如text-rightetc之类的其他便捷类。

所以，这是我想出的：bootstrap-min.css输入您的资产：

在此处输入图片说明

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

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

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

您可以在其中添加以下内容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/

— 德比
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.