问题描述
我正在使用这个 模板开展一个项目.
该模板是使用 AngularJs 和 Bootstrap-UI(用于 angular 的引导程序)编写的，我想包含一些 Material Design 元素，如卡片等.
The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others.
可以这样做吗?推荐吗?我的事情是我们已经喜欢这个模板和它的许多元素的方式，但是 Material Design 有卡片、下拉菜单、带有标签动画的文本输入等等，这些都很棒.
Is it possible to do that? is it recommended?My thing is we already love this template and way to many elements of it, but Material Design have cards, dropdown, text inputs with the label animation etc for example which are amazing.
所以我的问题是:
AngularJS + 用于 Angular 的 Bootstrap + 用于 Angular 的 Material Design = 令人敬畏还是灾难?
AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster?
推荐答案
如果同时添加 bootstrap &angular-material 这就是会发生的事情
If you add both bootstrap & angular-material this is what will happen
两者都有针对您的前端元素的 css(例如 input
元素，按钮)
Both have css which will target your front end elements (e.g. input
element, buttons)
每个人都有自己的样子&感觉(即 Bootstrap 输入元素与 Material 输入元素不同).因此，您的整个项目将不会只有一个外观&感觉.
Each have their own look & feel (i.e. Bootstrap input element is different from Material input element). So, your overall project won't have one single look & feel.
如果同时添加两者，则必须处理 css 样式在公共部分覆盖其他样式(例如字体大小和字体系列).
If you add both you will have to take care of css styles overriding others on common parts (e.g. font size & font family).
Angular-material 以角度方式处理前端元素(指令)因此，当他们发布新版本时(到目前为止有 29 个版本)，您将不得不花一些时间测试您早期的代码(例如，他们将 $media 更改为 $mdMedia 以处理 sideMenu).我花了很多时间找出我的 sideMenu 停止工作的原因！
Angular-material handles front end elements in angular way ( directive)So when they release a new version (29 releases so far), you will have to spent some time testing your earlier code (e.g.they changed $media to $mdMedia for handling sideMenu). I've spent a lot of time finding why my sideMenu stopped working!.
如果您使用两个前端框架，您的项目依赖项的总体大小将会增加.
You overall size of project dependencies will increased if you are using two front end frameworks.
Angular-material 需要它自己的依赖项，例如 'angular-animate' &'angular-aria'.
Angular-material needs its own dependencies like 'angular-animate' &'angular-aria'.
谈论您的md 卡"；有面板"在引导程序中，您可能想看看这里
Talking about your "md-cards" there are "panels" in bootstrap you might wanna have a look here
我建议你坚持一件事，要么是引导程序，要么是角材料.两者都很棒，只是不要混合使用.
这篇关于使用 Bootstrap for Angular 和 Material design for Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！