角材料有网格系统吗？

Question

我开始使用角材料的项目。 它是否有一个本地系统，用于像引导程序那样在响应网格中定位元素？

否则是否可以将材料设计与引导程序结合起来应用于网格系统？

也许我对这个问题采取了错误的处理方式。

Answer 1

如果您使用的是Material2，则可以使用Angular Flex Layout来实现响应。它很好地支持Angular2并且轻量级。

基本上Material2 + Flex-layout等同于Bootsrap库。

下面是一个example关于flex-layout如何用于网格系统/对Angular/Material2的响应。

示例代码显示使用柔性布局的API：

<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div> 
    <div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div> 
    <div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div> 
    <div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div> 
    <div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div> 

    <div fxLayout="row" 
     fxLayout.xs="column" 
     fxLayoutGap="10px" 
     fxLayoutAlign.xs="center center" 
     fxLayoutWrap> 
     <div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div> 
     <div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div> 
     <div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div> 
     <div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div> 
     <div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div> 
     <div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div> 
     <div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div> 
     <div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div> 
    </div>