角材料网格系统

Question

我对angular material design和material css感到困惑。 为什么两者都有不同的布局和网格？ angular material design中的bootstrap容器的等价物是什么？

我应该使用angular material design作为我的项目与bootstrap进行比较吗？

Answer 1

使用Angular Material的主要原因是因为它基于Flexible Box Layout规范，因此是W3C标准Flexible Box。

bootstrap容器的close标记可以是：<div layout="row" layout-wrap></div>

Answer 2

Angular Material Design没有与Bootstrap容器完全等效，因为Material Design（AMD）更灵活。一个容器有8个部分。 AMD具有布局和flex属性。 AMD的弹性可以增加5％（BS中的20个部分）或33和66（2个部分）或5％，33％和66％的组合，可以超过100％（大多数任何部分）在这种情况下，会自动创建多行。到目前为止，我发现的最好的单个页面是https://material.angularjs.org/#/layout/grid点击每个示例上方的源框，以获得有关AMD布局和弹性的HTML语法的更多细节。

通过子对齐可以进一步提高灵活性，它可以控制每个div在水平和垂直之间的间距。单击该页面上的单选按钮，以查看div如何居中或展开，或推到一端，或提升到顶部等。

显示的HTML语法适用于设置大小的页面。如果您希望相应的媒体查询更改不同设备的大小，您可以进行一些编码来制作角度控制器。查看各种组件的DEMOS示例以获得想法。

Answer 3

角度材料网格＆gt; Bootstrap网格，尤其适用于Angular应用程序。 Bootstrap网格使用float，与灵活的盒子模型相比，它已过时。 float取代了可怕的表格布局，但现在灵活的盒子模型开始将float推到一边（对于网格布局）。请注意，您需要在旧版浏览器的CSS中添加某些后缀。有关如何为旧版浏览器实施flex的示例，请参阅this CSS Tricks article。 Bootstrap网格应用程序还需要您创建无数的div，这看起来很糟糕，应该在任何使用HTML5的应用程序中避免使用。从技术上讲，您可以编写自己的Angular指令来替换某些div，并根据它们显示的内容或方式对它们进行分组，但是为什么不在他们已经为您完成时使用Angular Material呢？

Answer 4

Materialise是一个基于Google Design Material的现代响应式CSS框架。

和

Bootstrap是最流行的HTML，CSS和JavaScript框架，用于开发响应迅速的移动优先网站。

所以，如果你想要新的现代设计，我认为你应该选择材料设计。它也有非常好的动画。

Answer 5

我正在为同一个问题寻找答案。我在这里看到一些很棒的评论。截至2016年12月，很少有新增内容：Bootstrap现在支持Flexbox。检查此link还要检查此link以使bootstrap默认情况下只使用更改标志或下载bootstrap-flex.css来使用Flexbox。至于材料中的网格支持，使用网格演示here，有一个材质的flex-layout引擎看起来很棒（我还没有尝试过）。它非常接近bootstrap网格。请检查此link。

Answer 6

如果您使用Angular，而不是使用grid，而应该使用flexbox，Angular为此提供了一个软件包：

https://github.com/angular/flex-layout

使用它的一个巨大优势是您可以在flex-layout指令中使用typescript公共变量（您不能使用bootstrap来做到这一点）。它还包括用于媒体查询更改的Observables。