react-bootstrap 사용 방법

1. 리엑트 부트스트랩 설치 ( https://react-bootstrap.netlify.app/docs/getting-started/introduction )

npm install react-bootstrap bootstrap

---

2. App.js에 improt 추가

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

---

3. 사용할 컴포넌트 마다 import { Button } from 'react-bootstrap'; 추가해서 사용하면 됨

 

예시) navbar 만들기

 

import React from 'react';

import { Link } from 'react-router-dom';

import Button from 'react-bootstrap/Button';

import Container from 'react-bootstrap/Container';

import Form from 'react-bootstrap/Form';

import Nav from 'react-bootstrap/Nav';

import Navbar from 'react-bootstrap/Navbar';

import NavDropdown from 'react-bootstrap/NavDropdown';

const Header = () => {

  return (

    <div>

      <Navbar bg="dark" variant="dark">

        <Container fluid>

          <Link to="/" className="navbar-brand">  // Link에 부트스트랩 적용하는 방법

            홈페이지                                                   // className에 기존 Navbar.Brand 라면 navbar-brand 로 변경하면됨

          </Link>

          {/*<Navbar.Brand href="#">홈페이지</Navbar.Brand>*/}

          <Navbar.Toggle aria-controls="navbarScroll" />

          <Navbar.Collapse id="navbarScroll">

            <Nav

              className="me-auto my-2 my-lg-0"

              style={{ maxHeight: '100px' }}

              navbarScroll

            >

              <Link to="/login/10" className="nav-link">

                로그인

              </Link>

              {/*<Nav.Link href="#action1">로그인</Nav.Link>*/}

              <Nav.Link href="#action2">Link</Nav.Link>

              <NavDropdown title="Link" id="navbarScrollingDropdown">

                <NavDropdown.Item href="#action3">Action</NavDropdown.Item>

                <NavDropdown.Item href="#action4">

                  Another action

                </NavDropdown.Item>

                <NavDropdown.Divider />

                <NavDropdown.Item href="#action5">

                  Something else here

                </NavDropdown.Item>

              </NavDropdown>

            </Nav>

            <Form className="d-flex">

              <Form.Control

                type="search"

                placeholder="Search"

                className="me-2"

                aria-label="Search"

              />

              <Button variant="outline-success">Search</Button>

            </Form>

          </Navbar.Collapse>

        </Container>

      </Navbar>

    </div>

  );

};

export default Header;

 

 - 출처 메타코딩 최주호