사이트
Optimize · Bootstrap v5.0 (getbootstrap.com)
Optimize
Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
getbootstrap.com
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
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
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>확인
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 - npm 프로젝트(커스터 마이징 방법) (0) | 2021.06.30 |
|---|---|
| 부트 스트랩 - npm 프로젝트 (0) | 2021.06.30 |
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
| 부트 스트랩 - Components 사용 방법 (Modal) (0) | 2021.06.28 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
