docs > components > tooltips
단일요소/몇가지 다수요소가 아니라 많은 부분 사용됨
초기화 명시해야 동작함 (성능상의 이유 - 미리 적용할 필요없어서 초기화 필요)
html body
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button>
js에 추가적으로 복사 (페이지 젤 위)
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
NPM으로 bootstrap 생성
link / script 지워주기
npm init -y npm i -D parcel-bundler dev / build 각각 설정 npm install bootstrap@next
scss 폴더 추가
main.scss
연결
link rel= main.scss
body부분에 dropdown복사
main.js (폴더접근가능) - JS만 가능
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
scss (상대경로 접근)
@import "../node_modules/bootstrap/scss/bootstrap.scss";
장점
1) bootstrap의 필요한 것만 가져올 수 있고
2) 테마 커스터마이징 가능
components > buttons 다양한 색깔 버튼
docs > customize > color
theme-colors 에서 색상확인가능 (scss map으로 제공 = key value 형태)
customize > sass
(required) node_moudles에서 따로 가져올 수 있음, 요구사항
(optional) 몇가지 것들은 선택사항
required 복사 -> 기존 scss import 위에 붙여넣기 (전체코드 가져오기 전에 재활용 코드들 가져와서 초기화 과정!!!)
customize > color
theme-color 복사해서 scss 붙여넣기 (이것도 import 전)
customize하고싶은 데이터만 바꿔주면됨
secondary -> yellowgreen
components > spinners (loading animation)
colors에 여러 색상들
spinner-border text-secondary
-> secondary만 바꿔주면 다른 부트스트랩 컴포넌트 색상도 영향줘서 바뀜
1) Lean Sass imports : 최d대한 군더더기 없이 scss 가져와서 사용가능
import~
함수,변수 미리 가져와야하고
레이아웃과 컴포넌트(버튼, 드롭다운 등등) 중 필요한 것들 가져와서 쓸수잇음
2) Lean JavaScript
JS default exports (기본 내보내기)
import Modal from 'bootstrap/js/dist/modal' const modal = new Modal(document.getElementById('myModal'))
SCSS (오류가 있어 원래대로)
@import "../node_modules/bootstrap/scss/bootstrap.scss" 대신에 @import "../node_modules/bootstrap/scss/drop" // 특정한 스타일만 가져와서 (5버전 성숙도 떨어짐, 그래서 위에가 좋음)
JS (성능차이큼)
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle' // 묶여진 JS파일 사용하는 것 import bootstrap from 'bootstrap/js/dist/dropdwon' // 따로 import
components > dropdowns > via JS
초기화 코드복사 & import 아래 붙여넣기
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new bootstrap.Dropdown(dropdownToggleEl)
개별기능만 가져온 것이기 때문에 객체데이터 변수로 사용불가
(new bootstrap.Dropdown 사용불가)
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new Dropdown(dropdownToggleEl)
Dropdown import해서 생성자 함수로 바로 사용할 수 있게 변경한 것임
최적화
var -> const 변경
var dropdownList =
삭제 (사용하지 않음)
but 오류나옴!
popper js 설치해야하기 떄문에
npm i @popperjs/core
초기화
buttons 초기화는 toggle 메소드(이벤트) 사용하기 위해서마 사용 // 거의 필요 X
spinner 초기화도 거의 필요 X
modal 초기화
via JS
main.js
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
import Modal from 'bootstrap/js/dist/modal' new Modal(document.querySelector('#exampleModal'), { backdrop: 'static'})
Modal 생성할 때 options붙음
docs에서 확인가능
backdrop : 배경선택해도 꺼지지 않게