개요
부트스트랩(bootstrap)은 css 프레임워크입니다.
색상이 있는 버튼, 드롭다운, 리스트등등 css에서 스타일 잡을 필요없이,
부트스트랩 클래스를 추가하면 편리하게 만들 수 있습니다.
5버전부터 SCSS문법을 적용하며,
트리 쉐이킹 없었던 단점도 이 버전부터 지원됩니다.
트리 쉐이킹(Tree Shaking)이란 단일 번들을 최적화할 때 사용되는
필요하지 않은 코드를 제거하는 기술을 말합니다.
CDN 프로젝트 생성
부트스트랩은 css및 js 두개 나눠져 있습니다.
특별히 설명해야할 것은 JS cdn입니다.
부트스트랩 일부 기능은 popper이란 외부 패키지를 사용하고 있습니다.
bundle은 popper를 포함된 겁니다.
popper이 포함되어 있는 거랑 별도 import하는 것으로 구분되어 있습니다.
popper은 팝업창을 좀 더 예쁘게 하는 것인데
이외에도 여러 기능이 있습니다.
자주 사용된 요소
buttons, button group --> Docs > Components에서 나열됨
dropdowns, list group --> Docs > Components에서 나열됨
forms --> Docs > Forms에서 나열됨
modal --> Docs > Components에서 나열됨
tooltips --> Docs > Components에서 나열됨
NPM 프로젝트 생성
위 문자를 복사해서 npm 설치하면 됩니다.
js 파일에서는 import bootstrap from 'bootstrap/dist/js/bootstrap.bundle' 를 사용하고,
scss에서는 @import "./node_modeuls/bootstrap/scss/bootstrap"; 를 통해 접근합니다.
npm을 통해 우리가 필요한 기능만 가져와서 사용할 수 있으며,
테마들도 우리가 원하는 대로 커스터마이징할 수 있습니다.
테마 색상 커스터마이징
부트스트랩 > Docs > Customize 문서를 먼저 확인하세요.
문서에 기록된 것처럼, 필수사항을 작성한 후, override하고 싶은 값을 변경 후,
scss를 import하면 됩니다.
성능 최적화(트리 쉐이키)
부트스트랩 > Docs > Customize > Optimize 에서 확인 가능합니다.
필요한 기능들만 가져와서 사용 가능합니다.
사용하기 전에 초기화할 필요 있습니다.