[BootStrap] BootStrap

BootStrap

; 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크

- 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동

- 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도움

 

 

1. CSS로 적용

- 단 ; 기능에 한정적

https://getbootstrap.com/

Bootstrap

> Bootstrap > 좌측 상단 Docs 클릭

> 2번에 Include Bootstrap’s CSS and JS의 <link>와 <script> 내용 html파일에 복붙

> 좌측 Components내용들 class명 이용하여 자유롭게 이용

 

- tooltip의 경우, 성능 향상을 위해 제외되어있음. 명시된 JS코드를 복사하여 활성화 해주어야함

 

 

2. npm 이용한 설치

- 장 ; Bootstrap에서 필요한 기능만 가져올 수 있음 / 테마들을 직접 customize할 수 있음

1. 터미널 > $ npm install bootstrap@5.2.0-beta1

2. main.js > import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

3. main.scss > @import "../node_modules/bootstrap/scss/bootstrap.scss";

4. $ npm i @popperjs/core ; popper.js 설치

 

---

Customize 방법 

> 좌측 Customize > Sass 클릭

> Required ; 필수 요소 싹 다 가져와 SCSS파일에 복붙

> 좌측 Customize > color 클릭

> $theme-colors:(); 내용들 복붙하여 변경하고싶은 클래스의 색 수정

 

 

Optimize 방법

- SCSS는 아직 불완정 & 전부 사용해도 크게 차지 x 

- JS는 최적화를 위해 Optimize 필요 

선언 ; import Dropdown from 'bootstrap/js/dist/(component명)' 

초기화 ; 좌측에 원하는 Components클릭 > 우측하단에 Via Javascript > 내용복사하여 js파일에 복붙

& 내용에 new bootstrap.dropdown() -> new Dropdown()으로 수정 필요 (Dropdown ; 가져온 import명), ID명도 html파일에 맞게 수정

- 초기화가 필요한 Component가 있고, 필요하지 않은 Component가 있음

홈페이지에서 우측에 Via Javascript가 없다면, 필요하지 않다는 것