MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales 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 Grid System Layout en ReactJS MDBootstrap. Grid System Layout es una gran herramienta para crear diseños optimizados para dispositivos móviles. Es una herramienta poderosa con muchas características.
Sintaxis:
<MDBCol className='col-example'>...</MDBCol>
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Paso 3: Instale ReactJS MDBootstrap en su directorio dado.
npm i mdb-ui-kit npm i mdb-react-ui-kit
Estructura del proyecto: Tendrá el siguiente aspecto.
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el diseño del sistema de cuadrícula.
App.js
import React from "react";
import {
MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Grid System Layout</h4>
<MDBRow className='bg-primary rounded text-light mb-3'>
<MDBCol md='2' className='col-example'>
Grid System 1
</MDBCol>
<MDBCol md='2' className='col-example'>
Grid System 2
</MDBCol>
<MDBCol md='2' className='col-example'>
Grid System 3
</MDBCol>
<MDBCol md='2' className='col-example'>
Grid System 4
</MDBCol>
<MDBCol md='2' className='col-example'>
Grid System 5
</MDBCol>
<MDBCol md='2' className='col-example'>
Grid System 6
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Producción:
Ejemplo 2: en este ejemplo, sabremos cómo agregar varias filas en el diseño del sistema de cuadrícula.
App.js
import React from "react";
import {
MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Grid System Layout</h4>
<MDBRow className='bg-info rounded text-light mb-3'>
<MDBCol md='2' className='col-example'>
Column A1
</MDBCol>
<MDBCol md='2' className='col-example'>
Column A2
</MDBCol>
<MDBCol md='2' className='col-example'>
Column A3
</MDBCol>
<MDBCol md='2' className='col-example'>
Column A4
</MDBCol>
<MDBCol md='2' className='col-example'>
Column A5
</MDBCol>
<MDBCol md='2' className='col-example'>
Column A6
</MDBCol>
</MDBRow>
<MDBRow className='bg-danger rounded text-light mb-3'>
<MDBCol md='2' className='col-example'>
Column B1
</MDBCol>
<MDBCol md='2' className='col-example'>
Column B2
</MDBCol>
<MDBCol md='2' className='col-example'>
Column B3
</MDBCol>
<MDBCol md='2' className='col-example'>
Column B4
</MDBCol>
<MDBCol md='2' className='col-example'>
Column B5
</MDBCol>
<MDBCol md='2' className='col-example'>
Column B6
</MDBCol>
</MDBRow>
<MDBRow className='bg-secondary rounded text-light mb-3'>
<MDBCol md='2' className='col-example'>
Column C1
</MDBCol>
<MDBCol md='2' className='col-example'>
Column C2
</MDBCol>
<MDBCol md='2' className='col-example'>
Column C3
</MDBCol>
<MDBCol md='2' className='col-example'>
Column C4
</MDBCol>
<MDBCol md='2' className='col-example'>
Column C5
</MDBCol>
<MDBCol md='2' className='col-example'>
Column C6
</MDBCol>
</MDBRow>
<MDBRow className='bg-success rounded text-light mb-3'>
<MDBCol md='2' className='col-example'>
Column D1
</MDBCol>
<MDBCol md='2' className='col-example'>
Column D2
</MDBCol>
<MDBCol md='2' className='col-example'>
Column D3
</MDBCol>
<MDBCol md='2' className='col-example'>
Column D4
</MDBCol>
<MDBCol md='2' className='col-example'>
Column D5
</MDBCol>
<MDBCol md='2' className='col-example'>
Column D6
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Producción:
Referencia: https://mdbootstrap.com/docs/b5/react/layout/grid/