使用Bootstrap进行角度和材料设计一起使用Angular

时间：2015-03-28 05:24:58

标签： angularjs twitter-bootstrap angular-ui-bootstrap angular-material

我正在使用此template开展项目。

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

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

所以我的问题是：

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster？

7 个答案:

答案 0 :(得分：82)

如果你同时添加bootstrap＆amp;角度材料这将是会发生什么

  1. 两者都有css，它将瞄准你的前端元素（例如输入
    元素，按钮）

  2. 每个人都有自己的外观＆amp;感觉（即Bootstrap输入元素与Material输入元素不同）。所以，你的整体项目不会有一个单一的外观和感觉。

  3. 如果你同时添加两者，你将需要处理css样式，覆盖常用部分的其他部分（例如字体大小和字体系列）。

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

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

    Angular-material需要它自己的依赖，比如'angular-animate'和＆amp; '角咏叹调'。

    6. 谈到你的“md-cards”，引导程序中有“面板”，你可能想看看here

    我建议你坚持使用bootstrap或angular-material。两者都很棒，只是不要混合它们。

答案 1 :(得分：12)

我只是recently wrote a blog post关于如何使用Angular-Material 替换 Bootstrap。它基于我正在使用的kickstarter框架，但它将完成你所追求的工作。

就像@nitin所说的那样，实施两者都具有挑战性。我实际上要求你考虑的是，无论它是否可能，为什么你都想要两者？

两者的目的是提供一个整体的共同UI风格，但它们在概念上彼此相互关联，而不是可以协同工作的东西。

我建议您在跳转之前从谷歌指南开始阅读有关材料设计的更多信息。

答案 2 :(得分：5)

我写了Angular Bootstrap Material，这是Bootstrap material design theme的AngularJS版本。它消除了对jQuery和bootstrap的JavaScript的依赖。并使用ng-messages支持表单验证。

您可以通过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>

答案 3 :(得分：2)

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

答案 4 :(得分：1)

我最近也分析了这个问题。 Angular的新版本是Angular 5.但是几周前发布的这个版本的角度很难找到漂亮的组件。

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>

答案 5 :(得分：1)

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

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

enter image description here

在您的 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/

答案 6 :(得分：0)

使用refresh all进行响应式设计，其他使用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 文件

相关问题
最新问题