도리쓰에러쓰

[React] 부트스트랩(Bootstrap) 적용하기 본문

코딩애플 (React)/기초수업 (코딩애플) - 2

[React] 부트스트랩(Bootstrap) 적용하기

강도리 2022. 1. 8. 22:00

1. 터미널에 아래 코드 작성하기

npm install react-bootstrap bootstrap

 

* yarn 프로그램이 있다면 아래 코드로 작성해도 무관함.

yarn add react-bootstrap bootstrap

 

 

2. index.html에서 <head> 태그 안에 코드 작성하기

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

 

3. App.js에서 부트스트랩(Bootstrap) import 하기

  * 중괄호{} 안에 사용할 docs 작성하기

import { Navbar } from 'react-bootstrap';

 

 

4. 태그 사용하기

function App() {

  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">Saint Laurent</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>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}
저작자표시 비영리 변경금지

'코딩애플 (React) > 기초수업 (코딩애플) - 2' 카테고리의 다른 글

[React] React Router 3 :: URL 파라미터로 상세페이지 100개 만들기  (0) 2022.01.12
[React] React Router 2 :: Link, History, Switch 기능  (0) 2022.01.11
[React] React Router 1 :: 세팅과 기본 라우팅  (0) 2022.01.11
[React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기  (0) 2022.01.10
[React] Export(내보내기) 및 Import(가져오기)  (0) 2022.01.08
'코딩애플 (React)/기초수업 (코딩애플) - 2' Related Articles more
Comments