React - Bootstrap alap

 Egyszerű lépések amivel a react - bootstrap kapcsolatot felépítheted



1. Lépés: A projekt inicializálása

Ha még nincs kész projekted, hozz létre egyet

 npm create vite@latest my-bootstrap-app -- --template react

cd my-bootstrap-app

npm install


2. Lépés: A szükséges csomagok telepítése

Telepítenünk kell magát a Bootstrap stíluslapokat és a React-specifikus komponenseket is:

npm install react-bootstrap bootstrap


3. Lépés: A CSS beüzemelése (Kritikus pont!)

A Bootstrap nem fog működni, ha nem mondod meg a Reactnak, hogy töltse be a stílusfájlt. Nyisd meg a src/main.jsx (vagy index.js) fájlt, és add hozzá ezt a sort a többi import fölé:

import 'bootstrap/dist/css/bootstrap.min.css';


4. Lépés: Reszponzív Grid (rácsrendszer) felépítése

A Bootstrap lelke a Container, Row és Col hármasa. Ezekkel tudod szabályozni, mi hogyan jelenjen meg mobilon és asztali gépen.

Így néz ki egy alapvető elrendezés az App.jsx fájlban:


import { Container, Row, Col, Card, Button, Navbar } from 'react-bootstrap';


function App() {

  return (

    <>

      {/* 1. Navigációs sáv */}

      <Navbar bg="dark" variant="dark" className="mb-4">

        <Container>

          <Navbar.Brand href="#home">Saját Projekt</Navbar.Brand>

        </Container>

      </Navbar>


      <Container>

        {/* 2. Címsor */}

        <Row className="mb-4">

          <Col>

            <h1 className="text-center">Üdvözöllek a React-Bootstrap világában!</h1>

          </Col>

        </Row>


        {/* 3. Reszponzív kártyák */}

        <Row>

          {/* md={4} azt jelenti: közepes képernyőn 3 oszlop lesz (12/4=3) */}

          {/* sm={12} azt jelenti: mobilon teljes szélesség (12/12=1) */}

          <Col md={4} sm={12} className="mb-3">

            <Card>

              <Card.Body>

                <Card.Title>Első kártya</Card.Title>

                <Card.Text>Ez egy reszponzív oszlopban van.</Card.Text>

                <Button variant="primary">Részletek</Button>

              </Card.Body>

            </Card>

          </Col>


          <Col md={4} sm={12} className="mb-3">

            <Card border="success">

              <Card.Body>

                <Card.Title>Második kártya</Card.Title>

                <Card.Text>Zöld kerettel emeltük ki.</Card.Text>

                <Button variant="success">Mentés</Button>

              </Card.Body>

            </Card>

          </Col>


          <Col md={4} sm={12} className="mb-3">

            <Card>

              <Card.Body>

                <Card.Title>Harmadik kártya</Card.Title>

                <Card.Text>Automatikusan egymás alá ugranak mobilon.</Card.Text>

                <Button variant="danger">Törlés</Button>

              </Card.Body>

            </Card>

          </Col>

        </Row>

      </Container>

    </>

  );

}


export default App;


5. Lépés: Miért így csináljuk? (Magyarázat)

  1. Container: Ez tartja középen a tartalmat, és biztosítja az oldalsó margókat.

  2. Row: Ez egy vízszintes csoport, amibe az oszlopok kerülnek.

  3. Col: Itt dől el a szélesség. A Bootstrap 12 egységre osztja a képernyőt:

    • md={4} $\rightarrow$ $12 / 4 = 3$ darab oszlop fér el egymás mellett.

    • md={6} $\rightarrow$ $12 / 6 = 2$ darab oszlop fér el egymás mellett.

  4. Utility Classes: A className="mb-4" (margin-bottom) és text-center osztályok segítenek a finomhangolásban anélkül, hogy saját CSS-t kellene írnod.