Disposición del sistema de cuadrícula Angular MDBootstrap

es una biblioteca de interfaz de usuario angular basada en Material Design y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente Tooltips en Angular MDBootstap. Grid System Layout es una gran herramienta para crear diseños optimizados para dispositivos móviles. Básicamente, el diseño del sistema de cuadrícula está construido con flexbox, lo que lo hace totalmente receptivo. Es una herramienta poderosa con muchas características.

Sintaxis:

<div class="container">
  <div class="row">
    <div>
      GeeksforGeeks      
    </div>
  </div>
</div>

Acercarse:

• Descargue Angular MDBootstrap desde: https://mdbootstrap.com/docs/angular/getting-started/installation/
• Extraiga los archivos y cambie al directorio de trabajo.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install
or 
npm install -y

• Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el diseño del sistema de cuadrícula.

<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Grid System Component</h4>
  <br />
  <div class="container">
    <div class="row">
      <div class="col-sm bg-danger rounded m-3">
        GeeksforGeeks
      </div>
      <div class="col-sm bg-warning rounded m-3">
        GeeksforGeeks
      </div>
      <div class="col-sm bg-success rounded m-3">
        GeeksforGeeks
      </div>
    </div>
  </div></div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
  '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo agregar filas de diferente ancho.

<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Grid System Component</h4>
  <br />
  <div class="container">
    <div class="row">
      <div class="col-sm bg-danger rounded m-3">
        One of the 2
      </div>
      <div class="col-sm bg-warning rounded m-3">
        One of the 2
      </div>
    </div>
    <div class="row">
      <div class="col-sm bg-success rounded m-3">
        One of the 3
      </div>
      <div class="col-sm bg-secondary rounded m-3">
        One of the 3
      </div>
      <div class="col-sm bg-info rounded m-3">
        One of the 3
      </div>
    </div>
    <div class="row">
      <div class="col-sm bg-light rounded m-3">
        One of the 4
      </div>
      <div class="col-sm bg-dark text-light rounded m-3">
        One of the 4
      </div>
      <div class="col-sm bg-primary rounded m-3">
        One of the 4
      </div>
      <div class="col-sm bg-warning rounded m-3">
        One of the 4
      </div>
    </div>
  </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from
  '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Producción:

Referencia: https://mdbootstrap.com/docs/angular/layout/grid-usage/