将角材料与 twitter bootstrap 相结合而不会发生冲突 [英] Combining angular material with twitter bootstrap without conflicts

问题描述

我想将 twitter bootstrap 与 angular material 结合在一起.我发现引导材料设计 https://github.com/FezVrasta/bootstrap-material-design

I would like to combine twitter bootstrap together with angular material. I found bootstrap material design https://github.com/FezVrasta/bootstrap-material-design

Angular 材质使用以下声明；

Angular material uses following declarations;

<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>

对于bootstrap材料，文档中的声明是这样的；

For bootstrap material, the declarations in the documentation are like this;

  <!-- 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">

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

Will there be conflict if I include all the links? I am quite confused on how to combine angular material and bootstrap.

推荐答案

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

It is better not to mix Bootstrap and Angular Material because bootstrap's grid system (as of version 3~) is based on CSS display table and Angular Material is using display flex. So as suggested in this answer you're likely to get CSS conflicts and your application size will increase.

如果你需要更好的浏览器支持并且你正在使用 Bootstrap，我写了 Angular Bootstrap Material 这是 Bootstrap Material Design 主题 的 AngularJS 版本.它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖，并支持使用 ng-messages 进行表单验证.

If you need better browser support and you're using Bootstrap, I have written Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme. It eliminates the dependency on jQuery and bootstrap's JavaScript and supports form validation using ng-messages.

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

You can install from bower via bower install abm.

这篇关于将角材料与 twitter bootstrap 相结合而不会发生冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！