我对 Angular Material设计 和 Material CSS 感到困惑。为什么两者具有不同的布局和网格系统？ 在Angular Material设计中，等效于Bootstrap容器的是什么？
与Bootstrap相比，我是否应该在我的项目中使用 Angular Material设计？
Angular Material网格系统
15
- Alaksandar Jesus Gene
1
阿拉克桑德尔，你还困惑吗？或者已经有足够的信息选择一个答案了吗？如果你得到了有用的信息，请通过选择答案感谢某人。 - Mike_Laird
6个回答
13
使用Angular Material的主要原因是它基于W3C标准Flexible Box布局规范。
替代Boostrap容器的更接近的标签可能是：
替代Boostrap容器的更接近的标签可能是：
<div layout="row" layout-wrap></div>。- German Blanco
10
Angular Material Design没有像Bootstrap容器那样的精确等效物，因为Material Design（AMD）更加灵活。一个容器有8个部分。AMD具有布局和flex属性。AMD的flex可以增加5％（BS中的20个部分），也可以增加33和66（2个部分），或者组合使用5％、33％和66％，这可以超过100％（大多数任意数量的部分），在这种情况下，会自动创建多行。目前我发现的最好的单页示例是https://material.angularjs.org/#/layout/grid。点击每个示例上面的源代码框以获取有关AMD的HTML语法的更多细节。
通过子对齐方式，您还可以进一步灵活地控制水平和垂直方向上div之间的间距。单击该页面上的单选按钮以查看如何将div居中、扩展、推到一端或提升到顶部等。
显示的HTML语法适用于固定大小的页面。如果要获得类似于媒体查询的等效物以更改不同设备的大小，则需要进行进一步编码以制作angular controllers。请查看各种组件的DEMO示例以了解更多信息。
- Mike_Laird
2
相比于 Bootstrap grid，在 Angular 应用中使用 Angular Material grid 更佳。Bootstrap grid 使用的是 float，这种方法已经过时，不能与弹性盒模型相提并论。虽然 float 取代了可怕的表格布局，但现在弹性盒模型开始取代 float（对于网格布局）。请注意，在 CSS 中为旧浏览器添加某些后缀。请参见此 CSS Tricks 文章，以获得如何为旧浏览器实现 flex 的示例。Bootstrap grid 应用程序还需要创建无尽的 div，这看起来很糟糕，并且应该避免在任何使用 HTML5 的应用程序中使用。从技术上讲，您可以编写自己的 Angular 指令来替换某些 div，并根据它们的显示方式或方式进行分组，但为什么不直接使用 Angular Material，因为他们已经做好了这方面的工作呢？
- UltraSonja
0
Materialize是一种现代响应式CSS框架，基于Google的Material Design。
而Bootstrap是最流行的HTML、CSS和JavaScript框架，用于开发响应式、移动优先的网站。
因此，如果您想要新的现代设计，我认为您应该选择Material Design。它还具有非常好的动画效果。
- Yogesh Patel
2
在Angular Material Design中，Bootstrap容器的等效物是什么？我能否在Angular指令中使用Materialize CSS？它是否能够按预期工作？ - Alaksandar Jesus Gene
是的，我看了一遍，感到困惑。我正在寻找Bootstrap中容器的等效项，以便将项目完美地排列在中心位置。 - Alaksandar Jesus Gene
0
如果你使用Angular，与其使用网格布局，不如使用flexbox，Angular提供了一个相应的包：
使用它的一个巨大优势是，您可以使用TypeScript公共变量来控制flex-layout指令（在Bootstrap中无法实现）。它还包括用于媒体查询更改的Observables。- catlabs
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接