角材有网格系统吗? [英] does angular material have a grid system?

问题描述

我正在开始一个有棱角的材料的项目. 它是否具有本机系统，可以像Bootstrap一样在响应网格中定位元素?

I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ?

否则，可以将网格设计的材料设计与引导程序相结合吗?

Otherwise is it ok practice to combine material design with bootstrap for the grid system ?

也许我对这个问题的理解是错误的.

Maybe I am taking the wrong aproach to the problem.

推荐答案

如果使用的是Material2，则可以使用

If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.

基本上Material2 + Flex-layout等效于Bootsrap库.

Basically Material2 + Flex-layout is equivalent to Bootsrap library.

这是一个示例，说明如何将弹性布局用于网格系统/响应能力Angular/Material2.

Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.

显示使用flex-layout API的示例代码:

Sample Code showing use of flex-layout 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>

这篇关于角材有网格系统吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！