[React] BootStrap 사용하기

 

 

 

구글에서 React-BootStrap 을 검색한다.

 

관련 라이브러리 사이트 검색해서 들어가서 명령어를 받아준다( 종종 바뀌는 경우가 있기 때문에)

 

App.js 에 붙여넣기 해준다.

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

 

또는 index.html 파일을 pbulic 폴더에서 찾아서 넣어준다.

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

 

 

---

버튼 같은걸 검색해서 사용해보자.

 

검색하면 아래와 같이 다양한 버튼이 예시가 나와 있고 코드들이 있다.

 

유의할 점!

 

버튼같은걸 가져다가 쓸 때  항상 해당 기능들을 import를 각 페이지에서 해주어야 한다.

 

 

 

NavBar 도 검색후에 

 

해당 코드를 가져와서 

이렇게 넣어주고 마찬가지로 NavBar에 추가해 주면 됩니다.

 

대문자로 보이는거 다 import 하기 !!

 

Bootstrap 에서 가져온 데이터 값들도 다 css 변경이 가능하다.

 

 

출처 : 코딩애플 React 강의 2-1 강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.