Bootstrap (2)

Bootstrap (2)

1. Tooltips

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)
})

2. NPM 프로젝트 생성

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) 테마 커스터마이징 가능

3. 테마 색상 커스터마이징

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만 바꿔주면 다른 부트스트랩 컴포넌트 색상도 영향줘서 바뀜

4. 성능 최적화 (트리 쉐이킹)

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 : 배경선택해도 꺼지지 않게