src / styles.scss：

Question

我开始使用棱角分明的材料。它是否具有用于在响应网格中定位元素的本机系统，如bootstrap吗？

否则，将材料设计与引导程序结合用于网格系统是否可行？

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

Answer 1

如果您使用的是Material2，则可以使用Angular Flex Layout进行响应。它很好地补充了Angular2并且轻巧。

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

这是example如何使用Angular / Material2将flex-layout用于网格系统/响应性。

示例代码显示了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>

Answer 2

像Angular Material（7.0.3）这样的外观仍然没有像bootstrap这样的实体网格系统，否则他们会把它包含在official documentation

中

，由于UI / UX更加丰富，我们仍然需要使用Anuglar材质。

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

stylesheet bootstrap-grid.css可以如 bootstrap documentation中所述使用，或者相应的cdn可用于利用引导程序提供的网格功能。

Answer 3

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

文章中描述的步骤的摘要：

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

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
}

角材料有网格系统吗？

3 个答案:

src / styles.scss：

src / _variables.scss：

src / _reset.scss：