将 angular material 与 twitter bootstrap 结合起来没有冲突
Combining angular material with twitter bootstrap without conflicts
我想将 Twitter bootstrap 与 angular material 合并。我发现 bootstrap material 设计 https://github.com/FezVrasta/bootstrap-material-design
Angular material 使用以下声明;
<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>
对于bootstrapmaterial,文档中的声明是这样的;
<!-- 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">
如果我把所有的链接都包含进来会不会有冲突?我对如何组合 angular material 和 bootstrap.
感到很困惑
最好不要混用Bootstrap和Angular Material因为bootstrap的网格系统(从版本3~开始)是基于CSS显示table 和 Angular Material 正在使用 display flex。因此,正如本 answer 中所建议的那样,您可能会遇到 CSS 冲突,并且您的应用程序大小会增加。
如果您需要更好的浏览器支持并且您正在使用 Bootstrap,我已经写了 Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme。它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖,并支持使用 ng-messages
.
的表单验证
您可以通过 bower install abm
从 bower 安装。
我想将 Twitter bootstrap 与 angular material 合并。我发现 bootstrap material 设计 https://github.com/FezVrasta/bootstrap-material-design
Angular material 使用以下声明;
<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>
对于bootstrapmaterial,文档中的声明是这样的;
<!-- 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">
如果我把所有的链接都包含进来会不会有冲突?我对如何组合 angular material 和 bootstrap.
感到很困惑最好不要混用Bootstrap和Angular Material因为bootstrap的网格系统(从版本3~开始)是基于CSS显示table 和 Angular Material 正在使用 display flex。因此,正如本 answer 中所建议的那样,您可能会遇到 CSS 冲突,并且您的应用程序大小会增加。
如果您需要更好的浏览器支持并且您正在使用 Bootstrap,我已经写了 Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme。它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖,并支持使用 ng-messages
.
您可以通过 bower install abm
从 bower 安装。