bootstrap 연결 방법

1. bootstrap 설치

npm install react-bootstrap bootstrap

2. public > index.html에 bootstrap 연결

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

3. 클래스 사용

<button type="button" class="btn btn-danger">Danger</button>

4. 컴포넌트 사용

import { Nav } from 'react-bootstrap'; // { } 안에 사용할 컴포넌트 명 삽입

<Nav defaultActiveKey="/home" as="ul">
  <Nav.Item as="li">
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link eventKey="link-1">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link eventKey="link-2">Link</Nav.Link>
  </Nav.Item>
</Nav>

---

import { Nav } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      <Nav defaultActiveKey="/home" as="ul">
        <Nav.Item as="li">
          <Nav.Link href="/home">Active</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="link-1">Link</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="link-2">Link</Nav.Link>
        </Nav.Item>
      </Nav>
    </div>
  );
}

export default App;

---

React-Bootstrap :

React-Bootstrap

Bootstrap Class :

Introduction