React BootStrap
부트스트랩은 바닐라JS에서도 흔히 사용되었던 라이브러리? 툴킷이다.
국비지원학원 팀프로젝트 때 부트스트랩을 적용할까 하는 의견이 나와 둘러보았던 경험이 있다.
그 당시엔 css를 공부할 겸 부트스트랩을 적용하지 않고 대부분의 css를 직접 코드했었다.
(일부 팀원이 작성한 부분에서 부트스트랩을 사용하긴 했었다.)
// 설치하기
npm install react-bootstrap bootstrap@5.1.3
// css 적용하기
import 'bootstrap/dist/css/bootstrap.min.css';
// sass로 css 설정시 import
@import "~bootstrap/scss/bootstrap";
부트스트랩도 다른 ui라이브러리와 마찬가지로 scr/index.js 나 App.js에 css를 import 해주어야 적용이된다.
Sass로도 작성되어있어서 메인 Sass/scss 파일에 import 하여 사용할 수 있다.
부트스트랩 테마와 변수들도 customize 가능하다.
"as" Prop API
'as' prop을 이용하여 작성한 컴포넌트를 렌더링시 다른 컴포넌트나 html태그로 수정할수 있다.
RTL 지원
- Set dir="rtl" on the <html> element.
- Add an appropriate lang attribute, like lang="ar", on the <html> element.
- Include the RTL version of the CSS bootstrap.rtl.min.css in your project.
- Set dir="rtl" in a ThemeProvider:
수강료 100% 환급 챌린지 | 패스트캠퍼스
딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.
'ETC > 패캠환급챌린지(리액트)' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 30일차 - 리액트 UI라이브러리 (Tailwind CSS) (0) | 2021.11.30 |
|---|---|
| 패스트캠퍼스 챌린지 29일차 - 리액트 UI라이브러리 (Material UI) (0) | 2021.11.29 |
| 패스트캠퍼스 챌린지 27일차 - 리액트 UI라이브러리 (React Semantic UI) (0) | 2021.11.27 |
| 패스트캠퍼스 챌린지 26일차 - 리액트 UI라이브러리 (Ant Design) (0) | 2021.11.26 |
| 패스트캠퍼스 챌린지 25일차 - 리액트 UI라이브러리 (Onsen UI) (0) | 2021.11.25 |