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 el diseño de pantalla en ReactJS MDBootstrap. Con la ayuda de este componente, podemos cambiar la propiedad de visualización del elemento.
Sintaxis:
<div className="d-inline p-2 bg-success text-white">
GeeksforGeeks
</div>
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 de pantalla.
App.js
import React from "react";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Display Layout</h4>
<div className="d-inline p-2 m-2 bg-danger text-white">GeeksforGeeks</div>
<div className="d-inline p-2 bg-success text-white">GeeksforGeeks</div>
</div>
);
}
Producción:
Ejemplo 2: en este ejemplo, sabremos cómo agregar un bloque en el diseño de visualización.
App.js
import React from "react";
export default function App() {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap Display Layout</h4>
<div className="d-block p-2 bg-danger
text-white">GeeksforGeeks</div>
<br/>
<div className="d-block p-2 bg-success
text-white">GeeksforGeeks</div>
</div>
);
}
Producción:
Referencia: https://mdbootstrap.com/docs/b5/react/layout/display/