6

我想将 twitter bootstrap 与 angular material 结合起来。我找到了引导材料设计https://github.com/FezVrasta/bootstrap-material-design

Angular 材质使用以下声明;

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>

对于引导材料,文档中的声明是这样的;

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

如果我包含所有链接,会有冲突吗?我对如何结合角度材料和引导程序感到很困惑。

4

1 回答 1

7

最好不要混合使用 Bootstrap 和 Angular Material,因为 bootstrap 的网格系统(从版本 3~)是基于 CSS 显示表的,而 Angular Material 使用的是 display flex。因此,正如此答案中所建议的,您可能会遇到 CSS 冲突,并且您的应用程序大小会增加。

如果您需要更好的浏览器支持并且您正在使用 Bootstrap,我已经编写 了Angular Bootstrap Material,它是Bootstrap 材料设计主题的 AngularJS 版本。它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖,并支持使用ng-messages.

您可以通过凉亭安装bower install abm

于 2016-05-11T13:53:01.027 回答