Verwenden Sie React Bootstrap, um das Grid-Layout zu implementieren

1. React Bootstrap - Grid-System
2. React Bootstrap <Container>-Komponente
3. React Bootstrap <Row>-Komponente
4. React Bootstrap <Col>-Komponente

React ist eine der beliebtesten Front-End-Bibliotheken zum Erstellen von Benutzeroberflächen. Es verwendet das Konzept wiederverwendbarer Komponenten, um in kurzer Zeit schnelle, ansprechende Anwendungen zu erstellen.

Dennoch kann das Erstellen einer benutzerdefinierten Komponente manchmal viel Zeit in Anspruch nehmen.

Sie können den Prozess beschleunigen, indem Sie Komponenten wiederverwenden, die von anderen Personen geschrieben wurden. Einige Bibliotheken enthalten Komponenten für Eingaben, Schaltflächen und andere allgemeine Elemente zum Erstellen moderner Webanwendungen.

React Bootstrap - Grid-System

In diesem Artikel wird ein in React Bootstrap verfügbares Rasterlayoutsystem erörtert. Wenn Sie mit dem Grid-System in regulärem Bootstrap vertraut sind, sollten Sie es in React Bootstrap leicht herausfinden können.

Entwickler können benutzerdefinierte Komponenten für Container, Zeilen und Spalten enthalten. Sie können es verwenden, um das Inhaltslayout auf der Seite einfach zu organisieren.

Unter der Haube setzt React Bootstrap dabei auf Flexbox.

React Bootstrap <Container>-Komponente

Die benutzerdefinierte Komponente <Container> ist nützlich, um Ihre Inhalte zu zentrieren und aufzufüllen. Mit der React Bootstrap API können Sie eine Breite für den Container angeben.

Hier ist das Beispiel von Website-Inhalten, die in eine <Container>-Komponente eingeschlossen sind.

import Container from 'react-bootstrap/Container';

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

Das Attribut flüssig kann unabhängig von der Bildschirmgröße eine Breite von 100% beibehalten.

Es ist auch möglich, einen der Haltepunkte (sm, md, lg, xl, xxl) anzugeben, um den Wert des Attributs fluid festzulegen. Wenn festgelegt, bleibt der Container flüssig, bis die Bildschirmgröße des Benutzers diesen Haltepunkt erreicht.

Die Komponente <Container> ist als eigenständige Komponente nützlich. Es bietet Polsterung und kann zum Zentrieren von Inhalten verwendet werden.

Es ist jedoch nützlicher, wenn es mit den benutzerdefinierten Komponenten <Row> und <Col> kombiniert wird.

React Bootstrap <Row>-Komponente

Mit dieser Komponente können Sie den Inhalt horizontal organisieren. Jede <Row>-Komponente enthält typischerweise mehrere Spalten.

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>
  );
}

React Bootstrap <Col>-Komponente

Schließlich können Sie benutzerdefinierte Komponenten <Col> verwenden, um Zeilen horizontal zu unterteilen. Wenn die Komponente <Row> zwei <Col> ohne Attribute enthält, nehmen diese beiden Komponenten den gesamten freien Platz zwischen sich ein.

Mit dem Attribut xs können Sie die Breite einer der Spalten angeben. Schauen wir uns das Beispiel an.

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>
  );
}

In diesem Fall wäre die zweite Spalte breiter als die anderen beiden und teilt den freien Platz, der von der zweiten Spalte gelassen wird.