공부방

CSS 라이브러리 사용하기(React-BootStrap) 본문

React

CSS 라이브러리 사용하기(React-BootStrap)

코딩 화이팅 2024. 7. 27. 23:19

부트스트랩 설치

npm install react-bootstrap bootstrap
  • 에디터에서 터미널 켜고 입력하여 부트스트랩 설치
  • 명령어 매일 바뀌기 때문에 직접 사이트 들어가서 확인
import 'bootstrap/dist/css/bootstrap.min.css';
  • app.jsx에 이 코드를 추가하여 import 해주거나
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>
  • index.html 파일의 <head> 태그 안에 복붙해줘도됨.

부트스트랩 사용법

import {Button} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Button variant="primary">Primary</Button>
    </div>
  )
}
  • 버튼이 필요하다면 React-Bootstrap 사이트에서 검색해서 예제코드를 복붙하면 버튼이 생성된다.
  • 복붙할 때 대문자로 시작하는 컴포넌트이름(Button)은 상단에 import 해와야된다.
import {Button, Navbar, Container, Nav} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
    </div>
  )
}
  • 상단메뉴가 필요하면 Navbar라고 검색해서 예제코드 복붙
  • className 부여해서 CSS 커스터마이징하는 것도 가능

'React' 카테고리의 다른 글

import / export  (0) 2024.08.04
이미지 넣는 법 & public 폴더 이용하기  (0) 2024.07.28
날짜값 바꾸기  (0) 2024.06.21
좋아요를 글 수 만큼 늘리기  (0) 2024.06.15
input 안에 아무것도 안 쓰고 글 발행 눌렀을 때  (0) 2024.06.15
'React' Related Articles more