본문 바로가기
React

[React] 리액트 부트스트랩 적용

by sejin2 2024. 3. 21.

부트스트랩 적용

리액트 부트스트랩

서버 끄고,

index.html에 링크 복사해서 넣어주기

아니면 App.js에 CDN넣어주기

사용하기 전에 import해주어야 한다. → 사용하고자 하는 요소 모두에 ( . 있는 것 제외 )

import './App.css';
import { Button, Navbar, Container, Nav } from 'react-bootstrap';

function App() {
  return (
    <div>
   
     <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
    </Navbar>

    <Button variant="success">Success</Button>{''}
    </div>
  );
}

export default App;

그림이 있다면 import해주어야 한다.

'React' 카테고리의 다른 글

[React] Context Api와 redux  (0) 2024.03.22
[React] axios  (0) 2024.03.22
[React] 간단한 맛집 추천 블로그 - 2  (0) 2024.03.21
[React] 간단한 맛집 추천 블로그 - 1  (0) 2024.03.21
[React] Component , 구조 분해 할당  (0) 2024.03.21