[React] React-Bootstrap

Dorong·2023년 1월 5일
0

React

목록 보기
10/29

✅ Bootstrap

🔸 Bootstrap이란?

  • Bootstrap은 개발자가 이미 만들어져있는 다양한 샘플 코드들을 조립하듯 사이트를 쉽게 만들 수 있게 해주는 프로그램
  • 특히 반응형 페이지를 만드는 데에 큰 강점이 있음!!
  • 그런데 이게 일반적인 html, css에서 사용되는 버전과 별개로 react용이 존재

🔸 설치와 세팅

  • 공식사이트 설치 및 세팅 정보
    => https://react-bootstrap.netlify.app/getting-started/introduction

    // 터미널에서 설치하기
    터미널> npm install react-bootstrap bootstrap

    // css 적용해주기
    // 1. app.tsx(app.jsx)에서 import
    import 'bootstrap/dist/css/bootstrap.min.css';
    // 2. index.html에서
    // < link>< /link> 태그에 코드 넣어주기
    //         => 길어서 공식문서 참고


🔸 사용하기

  • 일반 Bootstrap과 다르게 모든 코드들이 컴포넌트로 입력되어있음!!
  • 컴포넌트이다보니 예시코드에 같이 적혀있는 import문들도 꼭 같이 가져와줘야함
  • className 등을 활용해서 css 커스터마이징 또한 가능!!





🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글