Angular Material有网格系统吗？

Question

我正在使用angular material开始一个项目。 它是否有像bootstrap那样用于响应式网格中定位元素的本地系统？

否则，将Material Design与Bootstrap结合在一起作为网格系统是否可行？

也许我对问题的处理方式有误。

- Lev

---

只是为了确认一下，您是在询问material1还是material2？ - Nehal

我正在使用Material 2。 - Lev

Answer 1

如果您正在使用Material2，则可以使用Angular Flex Layout实现响应式布局。它与Angular2非常搭配，且轻量级。

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

这里是一个例子，演示了如何使用flex-layout实现Angular/Material2的网格系统/响应式布局。

以下是展示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>

- Nehal

---

我不认为这个说法是正确的：“基本上Material2 + Flex-layout等同于Bootsrap库。”因为Flex-layout只提供了一个网格系统。但是Bootstrap提供了许多其他布局选项，例如Container和Utility类等。 - Sampath

为什么我们不能承认，答案是否定的，Angular Material没有CSS样式网格系统。 - yww325

Answer 2

本站介绍如何将Bootstrap网格添加到Angular Material项目中：

https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

以下是本文中描述的步骤摘要：

将Bootstrap添加到项目中：

npm install bootstrap --save

src/styles.scss:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import 'variables';

// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Import Reboot
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid'; // add the grid
@import '~bootstrap/scss/utilities'; // add css utilities

@import 'reset';

src/_variables.scss：

_variables.scss Sass部分允许我们自定义Bootstrap - 更准确地说，我们将要使用的Bootstrap的部分。

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

$grid-breakpoints: (
  xs: 0, // handset portrait (small, medium, large) | handset landscape (small)
  sm: 600px, // handset landscape (medium, large) | tablet portrait(small, large)
  md: 960px, //  tablet landscape (small, large)
  lg: 1280px, // laptops and desktops
  xl: 1600px // large desktops
);

$container-max-widths: (
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1600px
);

src/_reset.scss：

_reset.scss Sass部分允许我们覆盖一些不需要的Bootstrap样式。

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}

- ToastedSoul

---

像魔法般好用！ - KSK

Answer 3

看起来 Angular Material（7.0.3）仍然没有像 Bootstrap 那样坚实的网格系统，否则他们会在官方文档中包含它。

而我们仍然需要使用 Anuglar Material 因为它具有更丰富的 UI/UX。

解决方案是从 Bootstrap 中只取网格部分。

可以按照Bootstrap 文档中提到的方式使用样式表bootstrap-grid.css，或者使用相应的CDN来利用 Bootstrap 提供的网格功能。

- user7154703

Answer 4

由于Angular Material缺乏网格系统，您可以使用Bootstrap 5将其包装到Angular组件中创建自己的网格系统。这是一个嵌套网格的示例，您可以通过创建自己的网格组件来实现：

<box containerFluid>
  <box row [spacingY]="4">
    <box [md]="4">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6">
          <box row>
            <box [md]="6"> Item </box>
            <box [md]="6"> Item </box>
          </box>
        </box>
      </box>
    </box>
    <box [md]="4"> Item </box>
    <box [md]="4"> Item </box>
    <box [md]="6">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6"> Item </box>
      </box>
    </box>
    <box [md]="3"> Item </box>
    <box [md]="3">
      <box row>
        <box [md]="6"> Item </box>
        <box [md]="6"> Item </box>
      </box>
    </box>
  </box>
</box>

完整的工作示例在此视频中。您可以设置列间距、断点、边距、填充和间距。这是基本网格系统所需的一切。

- Mauricio Rivera