in English

v5로 마이그레이션

v4에서 v5로 마이그레이션하는 데 도움이 되도록 부트스트랩 소스 파일, 문서 및 구성 요소에 대한 변경 사항을 추적하고 검토합니다.

이 페이지에서

종속성

jQuery를 삭제했습니다.
Popper v1.x에서 Popper v2.x로 업그레이드되었습니다.
Libsass가 제공된 Sass 컴파일러가 더 이상 사용되지 않으므로 Libsass를 Dart Sass로 대체했습니다.
문서 구축을 위해 Jekyll에서 Hugo로 마이그레이션

브라우저 지원

중단된 Internet Explorer 10 및 11
삭제된 Microsoft Edge < 16(레거시 Edge)
파이어폭스가 60 미만으로 떨어졌습니다.
떨어진 사파리 < 12
iOS Safari < 12 삭제
Chrome이 60 미만으로 떨어졌습니다.

문서 변경 사항

새롭게 디자인된 홈페이지, 문서 레이아웃 및 바닥글.
새로운 소포 가이드 를 추가 했습니다.
v4의 테마 페이지 를 Sass, 전역 구성 옵션, 색 구성표, CSS 변수 등에 대한 새로운 세부 정보로 대체 하는 새로운 사용자 정의 섹션 을 추가 했습니다.
모든 양식 문서를 새로운 양식 섹션 으로 재구성 하여 콘텐츠를 보다 집중된 페이지로 나눴습니다.
마찬가지로 레이아웃 섹션 을 업데이트하여 그리드 콘텐츠를 보다 명확하게 표현했습니다.
"Navs" 구성 요소 페이지의 이름이 "Navs & Tabs"로 변경되었습니다.
"수표" 페이지의 이름을 "수표 및 라디오"로 변경했습니다.
탐색 모음을 재설계하고 새 하위 탐색을 추가하여 사이트 및 문서 버전을 더 쉽게 탐색할 수 있습니다.
검색 필드에 대한 새로운 키보드 단축키 추가: Ctrl + /.

사스

중복 값을 더 쉽게 제거할 수 있도록 기본 Sass 맵 병합을 버렸습니다. 이제 와 같은 Sass 맵에서 모든 값을 정의해야 합니다 $theme-colors. Sass 지도 를 다루는 방법을 확인하십시오 .
파괴더 이상 YIQ 색상 공간과 관련이 없기 때문에 color-yiq()함수 및 관련 변수 의 이름 이 변경되었습니다. #30168을 참조하십시오.color-contrast()
- $yiq-contrasted-threshold로 이름이 변경됩니다 $min-contrast-ratio.
- $yiq-text-dark및 $yiq-text-light이름이 각각 및 로 변경 $color-contrast-dark됩니다 $color-contrast-light.
파괴보다 논리적인 접근을 위해 미디어 쿼리 믹스인 매개변수가 변경되었습니다.
- media-breakpoint-down()다음 중단점 대신 중단점 자체를 사용합니다(예: 보다 작은 대상 뷰포트 media-breakpoint-down(lg)대신 ).media-breakpoint-down(md)lg
- 마찬가지로 의 두 번째 매개변수 media-breakpoint-between()도 다음 중단점 대신 중단점 자체를 사용합니다(예: 및 사이의 대상 뷰포트 media-between(sm, lg)대신 ).media-breakpoint-between(sm, md)smlg
파괴인쇄 스타일 및 $enable-print-styles변수를 제거했습니다. 인쇄 디스플레이 클래스는 여전히 주변에 있습니다. #28339를 참조하십시오 .
파괴color()변수 대신 , theme-color()및 gray()함수를 삭제 했습니다. #29083을 참조하십시오 .
파괴이름이 변경된 theme-color-level()기능은 color-level()이제 색상 대신 원하는 색상을 허용합니다 $theme-color. 참고 #29083 조심해: color-level() 나중에 에 떨어졌습니다 v5.0.0-alpha3.
파괴간결함을 위해 $enable-prefers-reduced-motion-media-query및 $enable-pointer-cursor-for-buttonsto $enable-reduced-motion및 이름 이 변경되었습니다.$enable-button-pointers
파괴bg-gradient-variant()믹스 인을 제거했습니다 . 클래스를 사용 .bg-gradient하여 생성된 클래스 대신 요소에 그라디언트를 추가합니다 .bg-gradient-*.
파괴 이전에 사용되지 않는 믹스인 제거:
- hover, hover-focus, plain-hover-focus및hover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(또한 관련 유틸리티 클래스를 삭제했습니다. .text-hide)
- visibility()
- form-control-focus()
파괴Sass의 자체 색상 스케일링 기능과의 충돌을 피하기 위해 scale-color()기능 이름 이 변경되었습니다.shift-color()
box-shadow믹스인은 이제 여러 인수에서 null값과 드롭 을 허용합니다. #30394를 참조하십시오 .none
이제 border-radius()mixin에 기본값이 있습니다.

컬러 시스템

새로운 색상 시스템을 위해 작업 color-level()하고 $theme-color-interval제거된 색상 시스템. 코드베이스의 모든 기능 lighten()과 기능은 및 darken()로 대체됩니다 . 이 기능은 밝기를 일정하게 변경하는 대신 색상을 흰색 또는 검정색과 혼합합니다. 가중치 매개변수가 양수인지 음수인지에 따라 색상을 색조 또는 음영 처리합니다 . 자세한 내용은 #30622 를 참조하세요.tint-color()shade-color()shift-color()
모든 색상에 대해 새로운 색조와 음영을 추가하여 새로운 Sass 변수로 각 기본 색상에 대해 9개의 개별 색상을 제공합니다.
향상된 색상 대비. 색상 대비 비율을 3:1에서 4.5:1로 높이고 WCAG 2.1 AA 대비를 보장하기 위해 파란색, 녹색, 청록색 및 분홍색 색상을 업데이트했습니다. 또한 색상 대비 색상을 에서 로 변경 $gray-900했습니다 $black.
색상 시스템을 지원하기 위해 색상을 적절하게 혼합하는 새로운 사용자 정의 tint-color()및 기능을 추가했습니다.shade-color()

그리드 업데이트

새로운 중단점! 이상에 대한 새로운 xxl중단점을 추가 1400px했습니다. 다른 모든 중단점에는 변경 사항이 없습니다.
개선된 거터. 거터는 이제 rems로 설정되며 v4( 1.5rem또는 약 24px, 에서 아래로 30px)보다 좁습니다. 이것은 그리드 시스템의 거터를 간격 유틸리티와 정렬합니다.
- 수평/수직 거터, 수평 거터 및 수직 거터를 제어하는 새 거터 클래스 ( .g-*, .gx-*, 및 )를 추가했습니다..gy-*
- 파괴새 거터 유틸리티와 일치하도록 이름 .no-gutters이 변경되었습니다..g-0
열이 더 이상 적용되지 않았으므로 해당 동작을 복원하려면 일부 요소를 position: relative추가해야 할 수 있습니다 ..position-relative
파괴.order-*자주 사용하지 않는 여러 클래스를 삭제했습니다 . 우리는 이제 상자에서 꺼내기 .order-1만 하면 됩니다..order-5
파괴.media유틸리티로 쉽게 복제할 수 있는 구성 요소를 삭제했습니다 . 예제는 #28265 및 플렉스 유틸리티 페이지를 참조하십시오 .
파괴 bootstrap-grid.css이제 box-sizing: border-box전역 상자 크기를 재설정하는 대신 열에만 적용됩니다. 이렇게 하면 간섭 없이 더 많은 곳에서 그리드 스타일을 사용할 수 있습니다.
$enable-grid-classes더 이상 컨테이너 클래스 생성을 비활성화하지 않습니다. #29146을 참조하십시오.
make-col지정된 크기가 없는 동일한 열로 기본적으로 믹스인을 업데이트했습니다 .

콘텐츠, 재부팅 등

RFS 는 이제 기본적으로 활성화됩니다. 믹스인을 사용하는 제목은 뷰포트에font-size()맞게 자동으로 조정됩니다이 기능은 이전에 v4에서 옵트인되었습니다.font-size
파괴$display-*변수와 $display-font-sizesSass 맵 을 대체하기 위해 디스플레이 타이포그래피를 정밀 검사 했습니다. $display-*-weight또한 단일 $display-font-weight및 조정된 font-sizes 에 대한 개별 변수를 제거했습니다 .
두 개의 새로운 .display-*제목 크기 .display-5및 가 추가되었습니다 .display-6.
링크가 특정 구성 요소의 일부가 아닌 경우 기본적으로(마우스를 가리킬 때뿐만 아니라) 밑줄이 그어집니다 .
스타일을 새로 고치고 스타일을 더 잘 제어할 수 있도록 CSS 변수를 사용하여 테이블을 재설계 했습니다.
파괴중첩 테이블은 더 이상 스타일을 상속하지 않습니다.
파괴 .thead-light모든 테이블 요소( , , , 및 ) 에 사용할 수 있는 변형 클래스를 .thead-dark위해 삭제됩니다 ..table-*theadtbodytfoottrthtd
파괴table-row-variant()mixin은 (색상 이름) 및 (색상 코드) 의 table-variant()2개 매개변수만 허용하고 이름 이 변경되었습니다. 테두리 색상과 강조 색상은 테이블 요인 변수를 기반으로 자동으로 계산됩니다.$color$value
-y테이블 셀 패딩 변수를 및 로 분할합니다 -x.
파괴.pre-scrollable수업을 중단 했습니다. #29135 참조
파괴 .text-*유틸리티는 더 이상 링크에 호버 및 포커스 상태를 추가하지 않습니다. .link-*대신 도우미 클래스를 사용할 수 있습니다. #29267 참조
파괴.text-justify수업을 중단 했습니다. #29793 참조
파괴 <hr>요소는 이제 속성 을 더 잘 지원하기 위해 height대신 사용합니다. 또한 패딩 유틸리티를 사용하여 더 두꺼운 구분선(예: )을 만들 수 있습니다.bordersize<hr class="py-1">
padding-left기본 가로 켜기 <ul>및 <ol>브라우저의 요소를 기본값으로 재설정 40px합니다 2rem.
미디어 쿼리 를 통해 모션 감소를 요청하는 사용자를 제외하고 전 세계적으로 $enable-smooth-scroll적용되는 가 추가되었습니다 . #31877 참조scroll-behavior: smoothprefers-reduced-motion

RTL

수평 방향 특정 변수, 유틸리티 및 믹스인은 모두 flexbox 레이아웃에서 볼 수 있는 것과 같은 논리적 속성을 사용하도록 이름이 변경되었습니다(예 : start및 end대신 .leftright

양식

새로운 플로팅 폼이 추가되었습니다! 부동 레이블 예제를 완전히 지원되는 양식 구성 요소로 승격했습니다. 새로운 플로팅 라벨 페이지를 참조하세요.
파괴 통합된 기본 및 사용자 정의 양식 요소. v4에서 기본 및 사용자 정의 클래스가 있었던 확인란, 라디오, 선택 및 기타 입력이 통합되었습니다. 이제 거의 모든 양식 요소가 완전히 사용자 정의되며 대부분은 사용자 정의 HTML이 필요하지 않습니다.
- .custom-check지금 .form-check입니다.
- .custom-check.custom-switch지금 .form-check.form-switch입니다.
- .custom-select지금 .form-select입니다.
- .custom-file의 .form-file상단에 사용자 정의 스타일로 대체되었습니다 .form-control.
- .custom-range지금 .form-range입니다.
- 네이티브 .form-control-file및 .form-control-range.
파괴떨어 .input-group-append졌고 .input-group-prepend. 이제 버튼을 .input-group-text입력 그룹의 직계 자식으로 추가할 수 있습니다.
유효성 검사 피드백 버그가 있는 입력 그룹 의 오랜 경계 반경 누락은 유효성 검사.has-validation 를 통해 입력 그룹에 추가 클래스를 추가하여 마침내 수정되었습니다 .
파괴 그리드 시스템에 대한 양식별 레이아웃 클래스를 삭제했습니다. .form-group, .form-row또는 대신 그리드 및 유틸리티를 사용하십시오 .form-inline.
파괴이제 양식 레이블에 가 필요합니다 .form-label.
파괴 .form-text더 이상 설정하지 않으므로 displayHTML 요소를 변경하는 것만으로 원하는 대로 도움말 텍스트를 인라인하거나 차단할 수 있습니다.
<select>유효성 검사 아이콘이 s에 더 이상 적용되지 않습니다 multiple.
scss/forms/입력 그룹 스타일을 포함하여 아래에 소스 Sass 파일을 재배열 했습니다.

구성품

padding경고, 이동 경로, 카드, 드롭다운, 목록 그룹, 모달, 팝오버 및 도구 설명에 대한 통합 값이 $spacer변수를 기반으로 합니다. #30564를 참조하십시오 .

아코디언

새로운 아코디언 구성 요소가 추가되었습니다 .

경고

이제 경고 에 아이콘이 있는 예가 있습니다 .
<hr>이미 을(를) 사용하고 있기 때문에 각 경고에서 s에 대한 사용자 정의 스타일을 제거 currentColor했습니다.

배지

파괴배경 유틸리티에 대한 모든 .badge-*색상 클래스를 삭제했습니다(예: .bg-primary대신 사용 .badge-primary).
파괴삭제 .badge-pill— 대신 .rounded-pill유틸리티를 사용합니다.
파괴<a>및 <button>요소 에 대한 마우스 오버 및 포커스 스타일을 제거 했습니다.
배지에 대한 기본 패딩이 /에서 / .25em로 .5em증가 했습니다..35em.65em

빵 부스러기

padding, background-color및 를 제거하여 이동 경로의 기본 모양을 단순화했습니다 border-radius.
--bs-breadcrumb-dividerCSS 를 다시 컴파일할 필요 없이 쉽게 사용자 정의할 수 있도록 새로운 CSS 사용자 정의 속성을 추가 했습니다.

버튼

파괴 확인란 또는 라디오가 있는 토글 버튼 에는 더 이상 JavaScript가 필요하지 않으며 새로운 마크업이 있습니다. 더 이상 래핑 요소가 필요하지 않으며 에를추가.btn-check하고. #30650을 참조하십시오 . 이에 대한 문서가 버튼 페이지에서 새 양식 섹션으로 이동되었습니다.<input>.btn<label>
파괴 .btn-block유틸리티를 위해 삭제 되었습니다. .btn-block를 사용 하는 대신 버튼을 및 유틸리티로 .btn감싸서 필요에 따라 간격을 두십시오 . 반응형 클래스로 전환하여 더 잘 제어할 수 있습니다. 몇 가지 예를 보려면 문서를 읽으십시오..d-grid.gap-*
추가 매개변수를 지원하도록 믹스인을 button-variant()업데이트 했습니다 .button-outline-variant()
호버 및 활성 상태에서 대비를 높이기 위해 버튼을 업데이트했습니다.
비활성화된 버튼은 이제 pointer-events: none;.

카드

파괴.card-deck우리 그리드를 위해 떨어 졌습니다. 열 클래스로 카드를 래핑하고 상위 .row-cols-*컨테이너를 추가하여 카드 데크를 다시 생성합니다(그러나 반응형 정렬을 더 많이 제어할 수 있음).
파괴.card-columnsMasonry에게 유리하게 떨어 졌습니다. #28922를 참조하십시오 .
파괴.card기반 아코디언을 새로운 Accordion 구성 요소 로 교체했습니다 .

회전 목마

어두운 텍스트, 컨트롤 및 표시기에 대한 새로운 .carousel-dark변형 이 추가되었습니다(밝은 배경에 적합).
Carousel 컨트롤의 갈매기 모양 아이콘을 Bootstrap Icons 의 새 SVG로 교체 했습니다.

닫기 버튼

파괴덜 일반적인 이름을 위해 로 이름 .close이 변경되었습니다..btn-close
닫기 버튼은 이제 HTML background-image대신 (포함된 SVG)를 사용 ×하므로 마크업을 건드릴 필요 없이 더 쉽게 사용자 정의할 수 있습니다.
더 어두운 배경에서 고대비 해제 아이콘을 활성화 하는 데 사용하는 새로운 .btn-close-white변형이 추가되었습니다.filter: invert(1)

무너지다

아코디언에 대한 스크롤 고정이 제거되었습니다.

드롭다운

.dropdown-menu-dark주문형 다크 드롭다운에 대한 새로운 변형 및 관련 변수를 추가 했습니다.
에 대한 새 변수를 추가했습니다 $dropdown-padding-x.
대비 개선을 위해 ��롭다운 구분선을 어둡게 했습니다.
파괴드롭다운에 대한 모든 이벤트는 이제 드롭다운 토글 버튼에서 트리거된 다음 상위 요소로 버블링됩니다.
data-bs-popper="static"이제 드롭다운 의 위치가 정적이고 드롭다운이 탐색 모음에 있을 때 드롭다운 메뉴에 속성이 설정 data-bs-popper="none"되었습니다. 이것은 JavaScript에 의해 추가되었으며 Popper의 위치 지정을 방해하지 않고 사용자 정의 위치 스타일을 사용하는 데 도움이 됩니다.
파괴flip기본 Popper 구성을 위해 드롭다운 플러그인 옵션을 삭제 했습니다. 이제 flip modifier 의 fallbackPlacements옵션에 빈 배열을 전달하여 뒤집기 동작을 비활성화할 수 있습니다 .
자동 닫기 동작autoClose 을 처리하는 새로운 옵션으로 드롭다운 메뉴를 클릭할 수 있습니다 . 이 옵션을 사용하여 드롭다운 메뉴 내부 또는 외부의 클릭을 허용하여 대화형으로 만들 수 있습니다.
드롭다운은 이제 .dropdown-items로 래핑된 <li>s를 지원합니다.

점보트론

파괴유틸리티로 복제할 수 있으므로 점보트론 구성 요소를 삭제했습니다. 데모는 새로운 Jumbotron 예제를 참조하십시오.

목록 그룹

목록 그룹에 새 .list-group-numbered수정자를 추가했습니다.

탐색 및 탭

, , 및 에 대한 새 null변수를 클래스에 추가했습니다.font-sizefont-weightcolor:hover color.nav-link

내비바

파괴Navbar는 이제 내부에 컨테이너가 필요합니다(필요한 간격 요구 사항 및 CSS를 대폭 단순화하기 위해).

오프캔버스

새로운 offcanvas 구성 요소 를 추가했습니다 .

쪽수 매기기

페이지 매김 링크는 이제 margin-left서로 분리될 때 모든 모서리에서 동적으로 둥근 사용자 정의가 가능합니다.
transition페이지 매김 링크에 s를 추가 했습니다.

팝오버

파괴기본 팝오버 템플릿에서 로 이름 .arrow이 변경되었습니다..popover-arrow
whiteList옵션 이름 이 으로 변경되었습니다 allowList.

스피너

스피너는 이제 prefers-reduced-motion: reduce애니메이션을 느리게 하여 명예를 얻습니다. #31882를 참조하십시오 .
스피너 수직 정렬이 향상되었습니다.

토스트

토스트는 이제 위치 지정 유틸리티.toast-container 의 도움으로 에서 위치를 지정할 수 있습니다 .
기본 토스트 지속 시간을 5초로 변경했습니다.
토스트에서 제거 overflow: hidden되고 기능이 있는 적절한 border-radiuss 로 대체되었습니다 calc().

툴팁

파괴기본 툴팁 템플릿에서 로 이름 .arrow이 변경되었습니다..tooltip-arrow
파괴의 기본값 은 팝퍼 요소의 더 나은 배치를 위해 fallbackPlacements로 변경됩니다 .['top', 'right', 'bottom', 'left']
파괴whiteList옵션 이름 이 으로 변경되었습니다 allowList.

유용

파괴RTL 지원을 추가하여 방향 이름 대신 논리적 속성 이름을 사용하도록 여러 유틸리티의 이름을 변경했습니다.
- .left-*및 .right-*로 이름 .start-*이 변경되었습니다 .end-*.
- .float-left및 .float-right로 이름 .float-start이 변경되었습니다 .float-end.
- .border-left및 .border-right로 이름 .border-start이 변경되었습니다 .border-end.
- .rounded-left및 .rounded-right로 이름 .rounded-start이 변경되었습니다 .rounded-end.
- .ml-*및 .mr-*로 이름 .ms-*이 변경되었습니다 .me-*.
- .pl-*및 .pr-*로 이름 .ps-*이 변경되었습니다 .pe-*.
- .text-left및 .text-right로 이름 .text-start이 변경되었습니다 .text-end.
파괴기본적으로 음수 여백을 비활성화했습니다.
의 배경을 추가 요소 .bg-body로 빠르게 설정하기 위한 새 클래스를 추가했습니다.<body>
, , 및 에 대한 새 위치 유틸리티 가 추가되었습니다 . 값에는 각 속성에 대한 , 및 가 포함됩니다.toprightbottomleft050%100%
수평 또는 수직 중심의 절대/고정 위치 요소에 새로운 .translate-middle-x및 유틸리티를 추가했습니다..translate-middle-y
새로운 border-width유틸리티가 추가되었습니다 .
파괴로 이름 이 변경 .text-monospace되었습니다 .font-monospace.
파괴.text-hide더 이상 사용해서는 안 되는 텍스트를 숨기는 구식 방법이므로 제거 했습니다.
.fs-*유틸리티용 유틸리티가 추가되었습니다 font-size(RFS 활성화됨). 이들은 HTML의 기본 제목(1-6, 큰 것에서 작은 것)과 동일한 축척을 사용하며 Sass 맵을 통해 수정할 수 있습니다.
파괴간결함과 일관성 .font-weight-*을 위해 유틸리티 이름 이 변경되었습니다..fw-*
파괴간결함과 일관성 .font-style-*을 위해 유틸리티 이름 이 변경되었습니다..fst-*
CSS 그리드 및 플렉스박스 레이아웃을 위한 .d-grid디스플레이 유틸리티 및 새로운 gap유틸리티( )에 추가되었습니다 ..gap
파괴및 를 제거 .rounded-sm하고 rounded-lg에 새로운 등급의 클래스를 도입 .rounded-0했습니다 .rounded-3. #31687을 참조하십시오 .
새로운 line-height유틸리티 추가 : .lh-1, .lh-sm및 . 여기를 참조 하십시오 ..lh-base.lh-lg
CSS에서 유틸리티를 이동하여 .d-none다른 디스플레이 유틸리티보다 더 많은 가중치를 부여했습니다.
.visually-hidden-focusable를 사용하여 컨테이너에서도 작동하도록 도우미를 확장했습니다 :focus-within.

도우미

파괴 반응형 내장 도우미는 유용한 CSS 변수뿐만 아니라 새로운 클래스 이름과 향상된 동작 이 포함된 비율 도우미 로 이름이 변경되었습니다.
- 종횡비 로 변경 by되도록 클래스 이름이 변경되었습니다 . x예를 들어 .ratio-16by9지금은 .ratio-16x9입니다.
- .embed-responsive-item더 간단한 선택자를 위해 및 요소 그룹 선택자를 삭제했습니다 .ratio > *. 더 이상 클래스가 필요하지 않으며 비율 도우미는 이제 모든 HTML 요소에서 작동합니다.
- $embed-responsive-aspect-ratiosSass 맵 의 이름이 로 바뀌었고 $aspect-ratios클래스 이름과 백분율을 key: value쌍으로 포함하도록 값이 단순화되었습니다.
- 이제 CSS 변수가 생성되어 Sass 맵의 각 값에 포함됩니다. 사용자 정의 종횡비 를 생성 하려면 의 --bs-aspect-ratio변수를 수정하십시오 ..ratio
파괴 "화면 판독기" 클래스는 이제 "시각적으로 숨겨진" 클래스 입니다.
- Sass 파일을 scss/helpers/_screenreaders.scss로 변경했습니다.scss/helpers/_visually-hidden.scss
- 이름 이 .sr-onlyand .sr-only-focusableto .visually-hidden및.visually-hidden-focusable
- 및 로 이름 이 변경 sr-only()되고 sr-only-focusable()믹스인됩니다 .visually-hidden()visually-hidden-focusable()
bootstrap-utilities.css이제 도우미도 포함됩니다. 도우미는 더 이상 사용자 정의 빌드에서 가져올 필요가 없습니다.

자바스크립트

jQuery 종속성 을 삭제하고 플러그인을 일반 JavaScript로 다시 작성했습니다.
파괴이제 모든 JavaScript 플러그인의 데이터 속성에 네임스페이스가 지정되어 부트스트랩 기능을 타사 및 자체 코드와 구별할 수 있습니다. 예를 들어, data-bs-toggle대신 를 사용합니다 data-toggle.
모든 플러그인은 이제 CSS 선택기를 첫 번째 인수로 받아들일 수 있습니다. DOM 요소나 유효한 CSS 선택기를 전달하여 플러그인의 새 인스턴스를 만들 수 있습니다.
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig부트스트랩의 기본 Popper 구성을 인수로 받아들이는 함수로 전달할 수 있으므로 이 기본 구성을 원하는 대로 병합할 수 있습니다. 드롭다운, 팝오버 및 도구 설명에 적용됩니다.
Popper 요소의 더 나은 배치 를 위해 의 기본값 fallbackPlacements이 로 변경됩니다 . 드롭다운, 팝오버 및 도구 설명에 적용됩니다.['top', 'right', 'bottom', 'left']
_getInstance()→ 와 같은 공개 정적 메서드에서 밑줄을 제거 getInstance()했습니다.