angular material网格系统
angular material grid system
我对angular material design and material css感到困惑。
为什么两者都有不同的布局和网格？
angular material design 中 bootstrap 容器的等价物是什么？
与 bootstrap 相比，我的项目应该使用 angular material design 吗？
Materialize 是一个现代响应式CSS 框架，基于 Material 设计，作者 Google。
和
Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。
因此，如果您想要新的现代设计，我认为您应该选择 material 设计。它的动画效果也很好。
使用 Angular Material 的主要原因是因为它基于 Flexible Box Layout 规范， 是 W3C 标准 Flexible Box。
bootstrap 容器的更接近标签可以是：<div layout="row" layout-wrap></div>
Angular Material Design 没有完全等同于 Bootstrap 容器，因为 Material Design (AMD) 更灵活。一个容器有 8 个部分。 AMD 具有 layout 和 flex 属性。 AMD 的 flex 可以增加 5%（BS 中的 20 个部分）或 33 和 66（2 个部分）或 5%、33% 和 66% 的组合，可以超过 100%（大多数任意数量的部分）在这种情况下，会自动创建多行。到目前为止，我发现的包含示例的最佳单页是 https://material.angularjs.org/#/layout/grid 单击每个示例上方的源框以获取有关 AMD 的 HTML 布局和 flex 语法的更多细节。
您可以通过子对齐方式获得更大的灵活性，它控制每个 div 在水平和垂直方向上的间距。单击该页面上的单选按钮可查看 div 如何居中、展开、推到一端或提升到顶部等。
所显示的 HTML 语法将适用于设置大小的页面。如果你想要媒体查询的等价物来改变不同设备的大小，你需要做一些进一步的编码来制作 angular 控制器。查看各种组件的 DEMOS 示例以获得想法。
Angular Material 网格 > Bootstrap 网格，尤其是 Angular 应用程序。 Bootstrap 网格使用 float，与柔性盒模型相比已经过时。 float 取代了可怕的 table 布局，但现在灵活的盒子模型开始将 float 推到一边（对于网格布局）。请注意，对于旧版浏览器，您需要在 CSS 中添加某些后缀。有关如何为旧版浏览器实施 flex 的示例，请参阅 this CSS Tricks article。 Bootstrap 网格应用程序还需要您创建无限量的 div，这看起来很糟糕，在任何使用 HTML5 的应用程序中都应避免。从技术上讲，您可以编写自己的 Angular 指令来替换某些 div，并根据它们显示的内容或方式对它们进行分组，但是为什么不在它们已经为您完成后使用 Angular Material 呢？
我正在寻找同一问题的答案。我在这里看到一些很棒的评论。截至 2016 年 12 月的一些新增内容：Bootstrap 现在确实支持 Flexbox。检查这个 link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.
如果您使用 Angular，您应该使用 flexbox 而不是网格，Angular 为其提供了一个包：
https://github.com/angular/flex-layout
使用它的一个巨大优势是您可以将 typescript public 变量用于 flex-layout 指令（您不能使用 bootstrap 做到这一点）。它还包括用于媒体查询更改的 Observables。
我对angular material design and material css感到困惑。 为什么两者都有不同的布局和网格？ angular material design 中 bootstrap 容器的等价物是什么？
与 bootstrap 相比，我的项目应该使用 angular material design 吗？
Materialize 是一个现代响应式CSS 框架，基于 Material 设计，作者 Google。
和
Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。
因此，如果您想要新的现代设计，我认为您应该选择 material 设计。它的动画效果也很好。
使用 Angular Material 的主要原因是因为它基于 Flexible Box Layout 规范， 是 W3C 标准 Flexible Box。
bootstrap 容器的更接近标签可以是：<div layout="row" layout-wrap></div>
Angular Material Design 没有完全等同于 Bootstrap 容器，因为 Material Design (AMD) 更灵活。一个容器有 8 个部分。 AMD 具有 layout 和 flex 属性。 AMD 的 flex 可以增加 5%（BS 中的 20 个部分）或 33 和 66（2 个部分）或 5%、33% 和 66% 的组合，可以超过 100%（大多数任意数量的部分）在这种情况下，会自动创建多行。到目前为止，我发现的包含示例的最佳单页是 https://material.angularjs.org/#/layout/grid 单击每个示例上方的源框以获取有关 AMD 的 HTML 布局和 flex 语法的更多细节。
您可以通过子对齐方式获得更大的灵活性，它控制每个 div 在水平和垂直方向上的间距。单击该页面上的单选按钮可查看 div 如何居中、展开、推到一端或提升到顶部等。
所显示的 HTML 语法将适用于设置大小的页面。如果你想要媒体查询的等价物来改变不同设备的大小，你需要做一些进一步的编码来制作 angular 控制器。查看各种组件的 DEMOS 示例以获得想法。
Angular Material 网格 > Bootstrap 网格，尤其是 Angular 应用程序。 Bootstrap 网格使用 float，与柔性盒模型相比已经过时。 float 取代了可怕的 table 布局，但现在灵活的盒子模型开始将 float 推到一边（对于网格布局）。请注意，对于旧版浏览器，您需要在 CSS 中添加某些后缀。有关如何为旧版浏览器实施 flex 的示例，请参阅 this CSS Tricks article。 Bootstrap 网格应用程序还需要您创建无限量的 div，这看起来很糟糕，在任何使用 HTML5 的应用程序中都应避免。从技术上讲，您可以编写自己的 Angular 指令来替换某些 div，并根据它们显示的内容或方式对它们进行分组，但是为什么不在它们已经为您完成后使用 Angular Material 呢？
我正在寻找同一问题的答案。我在这里看到一些很棒的评论。截至 2016 年 12 月的一些新增内容：Bootstrap 现在确实支持 Flexbox。检查这个 link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.
如果您使用 Angular，您应该使用 flexbox 而不是网格，Angular 为其提供了一个包：
https://github.com/angular/flex-layout
使用它的一个巨大优势是您可以将 typescript public 变量用于 flex-layout 指令（您不能使用 bootstrap 做到这一点）。它还包括用于媒体查询更改的 Observables。