부트스트랩 - Optimize(필요한 기능만 가져와서 사용)

사이트

Optimize · Bootstrap v5.0 (getbootstrap.com)

Optimize

 

SCSS에서는 별도로 가져오는것보다 한번에 가져오는것이 권장된다.

따라서 SCSS코드는 수정을 하지않는다.

 

예제에서 dropdown 기능을 사용하기 때문에 popperjs를 설치해 주어야 한다.

에러 메시지

설치 명령어

npm i @popperjs/core

확인

예제 JS 코드

// bootstrap의 자바스크립트 기능 가져오기 (node_modules 폴더 내부에서 검색)
// import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

// 필요한 기능만 가져오기
import Dropdown22 from 'bootstrap/js/dist/dropdown'

// 별도로 가져올 경우 초기화를 진행해 주어야 한다.
// 공식 사이트 원하는 기능화면에서 Via JavaScript 코드를 확인한다.

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  // import 데이터 이용
  return new Dropdown22(dropdownToggleEl)
})

// Dropdown 기능은 popperjs 기능을 이용하기 때문에 설치를 진행해주어야 한다.
// npm i @popperjs/core

정상 확인

 

modal 기능 최적화

Modal · Bootstrap v5.0 (getbootstrap.com)

Modal

JS 파일

왠지 모르겠지만 초기 ID값인 myModal로 하니깐 에러가 발생하면서 작동이 안되었다.

// Modal 기능 사용
// import
import Modal from 'bootstrap/js/dist/modal'
// 초기화 (사이트에서 Via JavaScript 코드 확인)
// 모달의 id값이 일치하는지 확인 필요
// new Modal(document.querySelector('#myModal'))
var myModal = new Modal(document.querySelector('#exampleModal'),{
  // 배경을 클릭해도 꺼지지 않도록 설정
  backdrop: 'static'
})

HTML 파일에 Modal 추가

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

확인