Use React Bootstrap para implementar el diseño de cuadrícula

1. Reaccionar Bootstrap - Sistema de cuadrícula
2. Reaccionar Bootstrap <Contenedor> Componente
3. Reaccionar Bootstrap <Fila> Componente
4. Reaccionar Bootstrap <Col> Componente

React es una de las bibliotecas front-end más populares para crear interfaces de usuario. Utiliza el concepto de componentes reutilizables para crear aplicaciones hermosas y rápidas en poco tiempo.

Aun así, a veces crear un componente personalizado puede llevar mucho tiempo.

Puede acelerar el proceso reutilizando componentes escritos por otras personas. Algunas bibliotecas contienen componentes para entradas, botones y otros elementos comunes para crear aplicaciones web modernas.

Reaccionar Bootstrap - Sistema de cuadrícula

Este artículo discutirá un sistema de diseño de cuadrícula disponible en React Bootstrap. Si está familiarizado con el sistema Grid en Bootstrap normal, debería poder resolverlo fácilmente en React Bootstrap.

Los desarrolladores pueden contener componentes personalizados para contenedores, filas y columnas. Pueden usarlo para organizar fácilmente el diseño del contenido en la página.

Debajo del capó, React Bootstrap se basa en Flexbox para hacer esto.

Reaccionar Bootstrap <Contenedor> Componente

El componente personalizado <Container> es útil para centrar y rellenar su contenido. React Bootstrap API le permite especificar un ancho para el contenedor.

Este es el ejemplo del contenido de un sitio web envuelto en un componente <Container>.

import Container from 'react-bootstrap/Container';

export default function App() {
  return (
    <Container fluid>
      <h1>Container Sample</h1>
    </Container>
  );
}

El atributo fluido puede mantener el ancho 100% independientemente del tamaño de la pantalla.

También es posible especificar uno de los puntos de interrupción (sm, md, lg, xl, xxl) para establecer el valor del atributo fluido. Si se establece, el contenedor permanecerá fluido hasta que el tamaño de la pantalla del usuario alcance este punto de interrupción.

El componente <Container> es útil como independiente. Proporciona relleno y se puede utilizar para centrar el contenido.

Sin embargo, es más útil cuando se combina con los componentes personalizados <Row> y <Col>.

Reaccionar Bootstrap <Fila> Componente

Este componente le permite organizar horizontalmente el contenido. Cada componente <Fila> normalmente contiene varias columnas.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col>Second Column</Col>
        </Row>
      </Container>
    </div>
  );
}

Reaccionar Bootstrap <Col> Componente

Finalmente, puede usar componentes personalizados <Col> para dividir filas horizontalmente. Si el componente <Row> contiene dos <Col> sin ningún atributo, estos dos componentes ocuparán todo el espacio libre entre ellos.

Puede usar el atributo xs para especificar el ancho de una de las columnas. Echemos un vistazo al ejemplo.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col xs={6}>Second Column</Col>
          <Col>Third Column</Col>
        </Row>
      </Container>
    </div>
  );
}

En este caso, la segunda columna sería más ancha que las otras dos, dividiendo el espacio libre que deja la segunda columna.