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

问题描述

我想将twitter引导程序与棱角分明的材料结合在一起.我发现自举材料设计 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 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>

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

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材料是 Bootstrap材质设计主题的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引导程序相结合而不会发生冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！