Contenedor React-Bootstrap, componente de fila y columna

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Podemos usar el siguiente enfoque en ReactJS para usar el componente React-Bootstrap Container, Row, Col.

El componente del contenedor proporciona nuestros deseos
El componente de fila proporciona una fila en el sistema de cuadrícula
Col Component proporciona una columna en el sistema de cuadrícula

Accesorios de contenedores:

as: se puede utilizar como un tipo de elemento personalizado para este componente.
bsPrefijo: CSS

Accesorios de fila:

as: se puede utilizar como un tipo de elemento personalizado para este componente.
lg: Se utiliza para denotar el
md: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos medianos ≥ 768
Se utiliza para indicar el número de columnas que encajarán una al lado de la otra en dispositivos pequeños ≥ 576
Se utiliza para indicar el número de columnas que encajarán una al lado de la otra en dispositivos extragrandes ≥ 1200
xs: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos extrapequeños
se usa para r
bsPrefijo: CSS

Accesorios de columna:

as: se puede utilizar como un tipo de elemento personalizado para este componente.
lg: Se utiliza para denotar el
md: se utiliza para indicar el número de columnas a abarcar en dispositivos medianos ≥ 768
Se utiliza para indicar el número de columnas a abarcar en dispositivos pequeños ≥ 576
Se utiliza para indicar el número de columnas para abarcar en dispositivos extragrandes ≥ 1200
xs: se utiliza para indicar el número de columnas que se abarcan en dispositivos extrapequeños
bsPrefijo: CSS

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:
```
npm install react-bootstrap 
npm install bootstrap
```

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo de componente de contenedor: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container';
  
export default function App() {
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Container Component</h4>
      <Container
        style={{
          backgroundColor: 'green'
        }}
      >
        <h3>Sample Text, Greetings from GeeksforGeeks</h3>
      </Container>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo de componente de fila: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Row from 'react-bootstrap/Row';
  
export default function App() {
  return (
    <div style={{ display: 'block', 
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Row Component</h4>
      <Row style={{
        backgroundColor: 'red',
      }}>
        Sample First Row
      </Row>
      <Row style={{
        backgroundColor: 'yellow',
      }}>
        Sample Second Row
      </Row>
      <Row style={{
        backgroundColor: 'green',
      }}>
        Sample Third Row
      </Row>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Col Component</h4>
      <Row>
        <Col style={{
          backgroundColor: 'red',
        }}>
          Sample First Col
      </Col>
        <Col style={{
          backgroundColor: 'yellow',
        }}>
          Sample Second Col
      </Col>
        <Col style={{
          backgroundColor: 'green',
        }}>
          Sample Third Col
      </Col>
      </Row>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia:

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

App.js

App.js

App.js

Deja una respuesta Cancelar la respuesta