twitter-bootstrap 角材料有网格系统吗？

does angular material have a grid system?

提问by Lev

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.

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

回答by Nehal

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

如果您使用的是 Material2，则可以使用Angular Flex Layout来提高响应能力。它与 Angular2 相得益彰，而且重量轻。

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

基本上 Material2 + Flex-layout 相当于 Bootsrap 库。

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

这是一个示例，说明如何将 flex-layout 用于网格系统/Angular/Material2 的响应性。

Sample Code showing use of flex-layout API:

显示使用 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>

回答by Lev

Looks like Angular Material (7.0.3) still do not have solid grid system like bootstrap, else they would have included it in their official documentation

看起来 Angular Material (7.0.3) 仍然没有像 bootstrap 这样的实体网格系统，否则他们会把它包含在他们的官方文档中

and we still need to use Anuglar Material because of richer UI/UX.

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

solution is to take only grid part from bootstrap.

解决方案是仅从引导程序中获取网格部分。

stylesheetbootstrap-grid.csscan be used as mentioned in bootstrap documentationor corresponding cdncan be used to utilize bootstrap provided grid functionality.

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

回答by ToastedSoul

This site describes how to add the bootstrap grid to a Angular Material project: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

该站点描述了如何将引导网格添加到 Angular Material 项目：https: //www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material -项目/

A summary of the steps described in the article:

文章中描述的步骤摘要：

Add bootstrap to your project:

将引导程序添加到您的项目中：

npm install bootstrap --save

npm install bootstrap --save

src/styles.scss:

源代码/样式.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:

src/_variables.scss:

The _variables.scss Sass partial allows us to customize Bootstrap - more precisely, the parts of Bootstrap that we will be using

_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:

src/_reset.scss:

The _reset.scss Sass partial allows us to override some of the Bootstrap styles we don't want

_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
}