내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
새로운 버전의 Bootstrap을 사용할 수 있습니다!
// Migrating to v5

Bootstrap의 소스 파일, 문서 및 컴포넌트의 변경 내용을 확인 리뷰함으로써 v4에서 v5로의 변경을 지원합니다.

의존성

  • 더 이상 jQuery를 사용하지 않음.
  • Popper v1.x에서 Popper v2.x로 업그레이드.
  • Libsass가 권장되지 않아 Dart Sass로 Sass 컴파일러 변경.
  • 문서 작성을 위해 Jekyll에서 Hugo로 이동.

브라우저 지원

  • Internet Explorer 10 및 11 지원 종료
  • Microsoft Edge 16 미만 (Legacy Edge) 지원 종료
  • Firefox 60 미만 지원 종료
  • Safari 12 미만 지원 종료
  • iOS Safari 12 미만 지원 종료
  • Chrome 60 미만 지원 종료

문서 변경사항

  • 첫페이지, 문서 레이아웃과 하단의 디자인 변경.
  • new Parcel guide 추가.
  • new Customize section 추가하고, v4’s Theming page 대체하여, Sass, 글로벌 설정 옵션, 색상 조합, CSS 변수 등의 세부사항 추가.
  • 모든 폼 문서를 new Forms section으로 재편성하여 콘텐츠를 좀 더 집중적인 페이지로 재편성.
  • 마찬가지로, 그리드 콘텐츠를 더욱 명확하게 정리하여 the Layout section 업데이트.
  • “Navs” 컴포넌트 페이지가 “Navs & Tabs"로 변경.
  • “Checks” 페이지가 “Checks & radios"로 변경.
  • 사이트와 문서 버전의 이동을 손쉽게 하기 위해 navbar의 디자인을 변경하고 새로운 subnav를 추가.
  • 검색에 새로운 키보드 단축키를 추가: Ctrl + /.

Sass

  • 중복된 값을 쉽게 삭제할 수 있도록 기본 Sass 맵의 병합을 폐지하였습니다. 앞으로는 $theme-colors과 같은 모든 값을 Sass 맵에서 정의해야 합니다. 자세한 내용은 Sass 맵를 참조해 주세요.

  • Breaking YIQ 색공간과 관련 없어졌기 때문에 color-yiq() 함수와 그에 관련된 변수들을 color-contrast()로 변경하였습니다. #30168.

    • $yiq-contrasted-threshold$min-contrast-ratio로 변경.
    • $yiq-text-dark$yiq-text-light는 각각 $color-contrast-dark$color-contrast-light로 변경.
  • Breaking Media query mixins parameters have changed for a more logical approach.

    • media-breakpoint-down() uses the breakpoint itself instead of the next breakpoint (e.g., media-breakpoint-down(lg) instead of media-breakpoint-down(md) targets viewports smaller than lg).
    • Similarly, the second parameter in media-breakpoint-between() also uses the breakpoint itself instead of the next breakpoint (e.g., media-between(sm, lg) instead of media-breakpoint-between(sm, md) targets viewports between sm and lg).
  • Breaking 인쇄 클래스와 $enable-print-styles 변수를 삭제하였습니다. 인쇄 표시 클래스는 아직 남아 있습니다. #28339.

  • Breaking color(), theme-color(), 그리고 gray()의 함수를 폐지하고 변수를 사용하도록 하였습니다.#29083.

  • Breaking theme-color-level() 함수를 color-level()로 변경하고, $theme-color의 색상뿐만 아니라 임의의 색을 받을수 있게 변경하였습니다. #29083 주의: v5.0.0-alpha3 이후 color-level()은 삭제되었습니다.

  • Breaking 간결하게 하기 위해서 $enable-prefers-reduced-motion-media-query$enable-pointer-cursor-for-buttons의 이름을 $enable-reduced-motion$enable-button-pointers로 변경하였습니다.

  • Breaking 믹스인 bg-gradient-variant()를 삭제 하였습니다. 요소에 그라데이션을 추가하기 위해 사용한 .bg-gradient-* 클래스 대신에 .bg-gradient 클래스를 사용해 주세요.

  • Breaking 더 이상 사용되지 않는 믹스인 삭제:

    • 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()
  • Breaking Sass 자신의 컬러 스케일링 기능과 충돌을 피해기 위해 scale-color() 함수명을 shift-color()로 변경하였습니다.

  • box-shadow 믹스인에서 null 값을 허용하고 많은 인수에서 none을 삭제 하였습니다. #30394.

  • border-radius() 믹스인에 기본 값이 설정 되었습니다.

색상 시스템

  • color-level()$theme-color-interval로 동작하던 컬러 시스템이 삭제되고 새로운 컬러 시스템이 채택 되었습니다. 기본적으로 모든 코드에 사용된 lighten()darken() 함수는 tint-color()shade-color()로 대체 되었습니다. 이 함수는 색의 명도를 일정량 변경하는 대신, 그 색에 흰색이나 검은색을 혼합 합니다. shift-color()는 양수 혹은 음수의 weight 매개 변수에 따라 색상을 바꾸거나 음영을 주기도 합니다. #30622.

  • 새로운 Sass 변수로서, 모든 색상에 새로운 색조와 음영을 추가해 각 기본 색상에 9개의 별도 색상을 제공합니다.

  • 색상 대비(color contrast)를 개선하였습니다. 색상 대비 비율을 3:1에서 4.5:1로 변경하고 WCAG 2.1 AA contrast를 확보하기 위해 blue, green, cyan, pink 색상을 수정하였습니다. 그리고 색상 대비에서 사용하는 어두운 색($color-contrast-dark)을 $gray-900에서 $black으로 변경하였습니다.

  • 색상을 적절하게 혼합한 새로운 사용자 정의 tint-color()shade-color() 함수를 사용해 컬러 시스템을 지원합니다.

그리드 업데이트

  • 새로운 중단점! 1400px 이상의 경우, 새로운 xxl 중단점를 추가. 다른 중단점는 변경 없이 그대로.

  • 개선된 거터. 거터는 rem 단위로 설정되어, v4 보다 좁아졌습니다 (1.5rem, 혹은 약 24px, 30px에서 감소). 이로 그리드 시스템의 거터가 여백 유틸리티와 일치 되었습니다.

    • 수평/수직 거터, 수평 거터, 그리고 수직 거터를 제어하는 새로운 gutter class(.g-*, .gx-*, 그리고 .gy-*)가 추가 되었습니다.
    • Breaking 새로운 거터 클래스에 맞춰 기존의 .no-gutters 클래스 이름이 .g-0으로 변경 되었습니다.
  • 컬럼은 더 이상 position: relative가 적용되지 않기 때문에 필요에 따라 해당 동작을 위해 요소에 .position-relative 클래스를 추가해 사용할 필요가 있습니다.

  • Breaking 자주 사용되지 않는 몇몇 .order-* 클래스를 삭제하였습니다. 현재는 .order-1 부터 .order-5까지의 클래스만 제공하고 있습니다.

  • Breaking 유틸리티로 쉽게 복제 할 수 있는 .media 클래스를 삭제 하였습니다. #28265flex utilities page for an example을 참조해 주세요.

  • Breaking 이제 bootstrap-grid.css에서는 global box-sizing을 리셋하는 대신, box-sizing: border-box만 적용합니다. 그렇게 함으로써 그리드 스타일을 더 많은 곳에서 간섭 없이 사용할 수 있습니다.

  • $enable-grid-classes에서는 컨테이너 클래스의 생성을 비활성화 시키지 않습니다. #29146.

  • 크기를 지정하지 않아도 기본적으로 균등한 열이 되도록 make-col 믹스인을 업데이드 하였습니다.

콘텐츠, Reboot 등

  • RFS가 기본으로 활성화 되었습니다. Headings using the font-size() 믹스인을 사용한 제목은 뷰포트에 맞추어 자동적으로 font-size를 조정합니다. 이 기능은 이전에 v4에서 opt-in 이었습니다.

  • Breaking $display-* 변수를 바꾸기 위해 디스플레이 타이포그래피를 정비하고 $display-font-sizes Sass 맵을 사용합니다. 또한 $display-*-weight 변수를 삭제하고 단일 $display-font-weight로 변경하여 글꼴의 크기를 조정했습니다.

  • 새로운 .display-* 크기로, .display-5.display-6를 추가했습니다.

  • 특정 컴포넌트의 일부가 아닌 한 (호버 뿐만 아니라)기본 링크에 밑줄 추가

  • 스타일을 새롭게 고치기 위해 테이블 디자인이 변경되고 CSS 변수를 사용하여 스타일을 보다 효과적으로 제어 할 수 있도록 재구성되었습니다.

  • Breaking 중첩된 테이블이 스타일을 상속받지 않게 되었습니다.

  • Breaking .thead-light.thead-dark은 삭제되고, 모든 테이블 요소(thead, tbody, tfoot, tr, th, td)에 사용할 수 있는 .table-* 변형 클래스로 변경되었습니다.

  • Breaking table-row-variant() 믹스인은 table-variant()으로 이름이 변경되며 2개의 매개 변수 $color (colon name)와 $value (color code)만 받습니다. 보더 컬러와 엑센트 컬러는 테이블 인자 변수에 따라 자동으로 계산됩니다.

  • 테이블 셀의 패딩 변수를 -y-x로 분할 했습니다.

  • Breaking .pre-scrollable 클래스 삭제. #29135

  • Breaking .text-* 유틸리티는 링크에 호버와 포커스 상태를 추가하지 않습니다. 대신 .link-* 도우미 클래스를 사용할 수 있습니다.#29267

  • Breaking .text-justify 클래스 삭제. #29793

  • Breaking <hr> elements now use height instead of border to better support the size attribute. This also enables use of padding utilities to create thicker dividers (e.g., <hr class="py-1">).

  • <ul><ol> 요소의 수평 방항에 설정된 padding-left를 브라우저의 기본 40px에서 2rem으로 변경.

  • prefers-reduced-motion 미디어 쿼리를 통해 움직임을 억제하는 사용자를 제외하고 글로벌하게 scroll-behavior: smooth를 적용하는 $enable-smooth-scroll를 추가. #31877

RTL

  • 수평 방항으로 특화된 변수, 유틸리티 그리고 믹스인의 이름이 플레스 박스의 레이아웃에서 볼수 있는 - 예를 들어, leftright 대신에 startend과 같이 - 논리적인 속성으로 변경되었습니다.

  • 새로운 플로팅 폼 추가! 플로팅 라벨의 예시를 완전히 지원되는 폼 컴포넌트로 승격시켰습니다. 새로운 플로팅 라벨 페이지 확인하러 가기

  • Breaking 네비티브와 사용자 정의 폼 요소의 통합. 체크박스, 라디오 버튼, 셀렉트등 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는 삭제.
  • Breaking .input-group-append.input-group-prepend는 삭제. 입력 그룹의 직접 자식 요소로서 버튼과 .input-group-text를 추가할 수 있게 되었습니다.

  • 오랫동안 지속 되었던 유효성 검사를 사용할때 입력 그룹에서 반원 경계선이 누락되는 버그는 유효성 검사 폼에 포함된 입력 그룹에 .has-validation 클래스를 추가하는 것으로 겨우 수정 되었습니다.

  • Breaking 그리드 시스템을 위한 폼 고유의 레이아웃 클래스 삭제. .form-group, .form-row, .form-inline 대신 그리드와 유틸리티를 사용해 주세요.

  • Breaking 폼 레벨에는 .form-label이 필요합니다.

  • Breaking .form-text는 삭제되어 display 되지 않으므로, HTML 요소를 변경하는 것으로 인라인 혹은 블록 도움말 텍스트를 자유롭게 만들 수 있습니다.

  • 유효성 검증 아이콘은 더 이상 multiple<select>에 적용되지 않습니다.

  • 입력 그룹 스타일을 포함하여, scss/forms/ 아래의 Sass 파일을 재배치 하였습니다.


컴포넌트

  • 경고창, 브레드크럼, 카드, 드롭다운, 목록 그룹, 모달, 팝오버 그리고 툴팁의 padding 값을 $spacer 변수를 기반으로 통일. #30564.

아코디언

경고창

  • 경고창에 아이콘 사용한 예시를 추가.

  • 각 경고창에서 currentColor를 사용하게 되어 <hr> 사용자 정의 스타일은 삭제.

배지

  • Breaking 배경 유틸리티의 모든 .badge-* 색상 클래스 삭제 (예를 들어, .badge-primary 대신 .bg-primary 사용).

  • Breaking .badge-pill 삭제 — 대신.rounded-pill 유틸리티를 사용해 주세요.

  • Breaking <a><button> 요소에 호버와 포커스 스타일 삭제.

  • 배지의 기본 패딩을.25em/.5em에서 .35em/.65em으로 변경.

브레드크럼

  • padding, background-color, 그리고 border-radius를 제거하여 브레드크럼의 기본 모양을 단순화했습니다.

  • CSS를 다시 컴파일할 필요 없이 쉽게 재정의 할 수 있도록 새로운 CSS 사용자 정의 속성인 --bs-breadcrumb-divider를 추가했습니다.

버튼

  • Breaking 체크 박스나 라디오 버튼에 있는 토글 버튼은, JavaScript가 필요없는 새로운 마크업을 채용하고 있습니다. 더 이상 감싸는 요소는 필요하지 않고, 바로 <input>.btn-check를 추가해 .btn 클래스의 <label>과 조합 합니다. #30650. 이 건에 관한 문서는 버튼 페이지에서 폼 섹션으로 이동하였습니다.

  • Breaking 유틸리티용 .btn-block를 삭제. .btn.btn-block을 사용하는 대신에, 버튼을 .d-grid.gap-* 유틸리티로 감싸고 필요에 따라 여백을 위한 클래스를 사용합니다. 보다 강력한 컨트롤을 위해 반응형 클래스로 전환 합니다. 몇 가지 예시에 대해서는 문서를 참조해 주세요

  • 추가 매개 변수를 지원하기 위해 button-variant()button-outline-variant() 믹스인을 업데이트 했습니다.

  • 호버와 액티브한 상태의 대비가 증가하도록 버튼을 업데이트 했습니다.

  • 비활성화 버튼은 pointer-events: none; 되었습니다.

카드

  • Breaking 그리드에 유리하게 .card-deck을 삭제. card decks 재현을 위해 부모에 .row-cols-* 컨테이너를 추가하고 카드를 column 클래스로 감쌉니다. (반응형 정렬을 보다 효과적으로 제어할 수 있습니다).

  • Breaking 조적식(Masonry) 레이아웃에 유리하도록 .card-columns 삭제. #28922.

  • Breaking .card 기반의 아코디언을 새로운 아코디언 컴포넌트로 교체히였습니다.

캐러셀

  • 진한 텍스트, 컨트롤과 기호(밝은 배경에 최적) 표시를 위해 .carousel-dark가 추가되었습니다.

  • 캐러셀의 chevron 아이콘을 Bootstrap Icons의 새로운 SVG로 대체하였습니다.

닫기 버튼

  • Breaking .close에서 보다 일반적인 이름인 .btn-close으로 변경되었습니다.

  • 닫기 버튼은 HTML 내의 &times; 대신에 background-image(embedded SVG)를 사용하게 되어 마크업 변경없이 손쉽게 재정의 할 수 있게 되었습니다.

  • 어두운 배경에서 고대비 닫기 아이콘을 활성화하려고 filter: invert(1)를 사용한 새로운 .btn-close-white 변형 클래스가 추가되었습니다.

콜랩스

  • 아코디언에 스크롤 고정 장치가 삭제 되었습니다.

드롭다운

  • 어두운 드롭다운을 위해 새로운 .dropdown-menu-dark 변형 클래스와 관련된 변수를 추가하였습니다.

  • 새로운 $dropdown-padding-x 변수를 추가하였습니다.

  • 드롭다운의 구분자를 진하게 해 색상 대비를 개선하였습니다.

  • Breaking 드롭다운의 모든 이벤트는 드롭다운 토글 버튼으로 트리거 되어 이후 부모 요소에 버블링 됩니다.

  • 드롭다운 메뉴에는 위치가 정적일때 data-bs-popper="static" 속성이 설정되며, 드롭다운이 내비게이션 바에 있을 때에는 data-bs-popper="none"으로 설정됩니다. 이것은 JavaScript를 통해 추가되며 Popper의 배치에 간섭하지 않고 사용자 정의 위치 스타일을 사용하는데 도움이 됩니다.

  • Breaking 드롭다운 플러그인에 대한 flip 옵션을 삭제하고 Popper의 네이티브 설정으로 변경되었습니다. flip 제어자의 fallbackPlacements의 빈 배열을 통해서 플립 동작을 비활성화 할 수 있습니다.

  • 드롭다운 메뉴는 새로운 autoClose 옵션을 추가해 자동 닫기 동작을 처리하게 되었습니다. 이 옵션을 사용하면 드롭다운 메뉴의 안쪽 또는 바깥쪽에서 클릭을 받아 상호적인 메뉴를 만들 수 있습니다.

  • 드롭다운이 이제 <li>에 싸여진 .dropdown-item를 지원합니다.

점보트론

목록 그룹

내비게이션과 탭

  • .nav-link 클래스에 font-size, font-weight, color, :hover color에 대한 새로운 변수 null을 추가했습니다.

내비게이션 바

  • Breaking 내비게이션 바는 컨테이너가 필요하게 되어 간격 요건이나 필요한 CSS가 대폭 간소화되었습니다.

오프캔버스

페이지네이션

  • 페이지네이션 링크의 margin-left를 재정의할 수 있게 되어, 떨어져 있을 때 모든 모서리가 다이내믹하게 둥글어지게 되었습니다.

  • 페이지네이션 링크에 트랜지션을 추가하였습니다.

팝오버

  • Breaking 기본 팝오버 템플릿의 .arrow 이름을 .popover-arrow로 변경하였습니다.

  • whiteList 옵션명을 allowList로 변경하였습니다.

스피너

  • 스피너의 애니메이션의 속도를 줄임으로써 prefers-reduced-motion: reduce를 존중하게 되었습니다. #31882.

  • 스피너의 수직 방향 배치를 개선하였습니다.

토스트

  • 위치 지정 유틸리티를 사용하여 .toast-container 안의 토스트를 배치시킬 수 있게 되었습니다.

  • 기본 토스트의 지속 시간을 5초로 변경하였습니다.

  • 토스트에서 overflow: hidden을 삭제하고 calc() 함수로 적절한 border-radius를 대체하였습니다.

툴팁

  • Breaking 기본 툴팁 템플렛에서 .arrow 이름을 .tooltip-arrow으로 변경하였습니다.

  • Breaking fallbackPlacements의 기본 값이 ['top', 'right', 'bottom', 'left']으로 popper 요소의 배치가 개선되었습니다.

  • Breaking whiteList 옵션명이 allowList로 변경되었습니다.

유틸리티

  • Breaking 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로 변경.
  • Breaking 기본적으로 음수 마진을 비활성화.

  • <body>의 배경을 추가적인 요소로 빠르게 설정하기 위해 새롭게 .bg-body 클래스를 추가하였습니다.

  • top, right, bottom, left 표시를 위해 새로운 위치 유틸리티를 추가하였습니다. 값으로는 0, 50%, 100%가 있습니다.

  • 새로운 .translate-middle-x.translate-middle-y 유틸리티를 추가하였습니다. 이 유틸리티는 absolute/fixed에 배치된 요소들을 수평 혹은 수직 방향에서 중앙에 오게 합니다.

  • 새로운 border-width 유틸리티를 추가하였습니다.

  • Breaking .text-monospace 클래스명이 .font-monospace으로 변경되었습니다.

  • Breaking 텍스트를 숨기기 위한 시대 착오적인 방법으로 더 이상 사용되서는 안되는 .text-hide를 삭제하였습니다.

  • font-size 유틸리티를 위한 .fs-* 유틸리티를 추가하였습니다. (RFS 사용). 이들은 HTML의 기본 제목과 동일한 크기(1-6, large ~ small)를 사용하고 있으며 Sass 맵에서 변경할 수 있습니다.

  • Breaking .font-weight-* 유틸리티를 간결함과 일관성을 위해 .fw-*로 변경하였습니다.

  • Breaking Renamed .font-style-* 유틸리티를 간결함과 일관성을 위해 .fst-*로 변경하였습니다.

  • CSS 그리드와 flexbox 레이아웃용 표시를 위한 .d-grid 유틸리티와 새로운 gap 유틸리티(.gap)를 추가하였습니다.

  • Breaking .rounded-smrounded-lg를 삭제하고, 스케일로서 새로운 클래스 .rounded-0부터 .rounded-3을 도입하였습니다. #31687.

  • 새로운 line-height 유틸리티를 추가하였습니다: .lh-1, .lh-sm, .lh-base.lh-lg. 자세히 보기.

  • 다른 표시 유틸리티보다 더 비중을 두기 위해 CSS에 있는 .d-none 유틸리티를 이동 시켰습니다.

  • 컨테이너 작업에도 사용할 수 있도록 .visually-hidden-focusable 도우미를 :focus-within로 확장하였습니다.

도우미

  • Breaking 더욱 편리한 CSS 변수 추가로 동작이 개선된 Responsive embed가 ratio 도우미 로 이름이 변경되었습니다.

    • 비율을 나타내는 클래스가 by에서 x로 이름이 변경되었습니다. 예를 들어, .ratio-16by9.ratio-16x9가 되었습니다.
    • .embed-responsive-item과 요소 그룹 셀렉터를 삭제하여 더욱 단순한 .ratio > * 셀렉터로 변경되었습니다. 이로써 클래스는 불필요해 졌고, 비율 도우미는 어떠한 HTML 요소로도 사용 가능해졌습니다.
    • $embed-responsive-aspect-ratios의 Sass 맵은 $aspect-ratios로 이름이 변경되었고, 그 값은 클래스 이름과 퍼센티지를 key: value 값으로 포함하도록 간소화되었습니다.
    • Sass 맵의 각 값에 CSS 변수가 생성되어 포함되었습니다. .ratio--bs-aspect-ratio 변수를 수정하여 임의의 사용자 정의 비율을 만듭니다.
  • Breaking “Screen reader” 클래스는 “visually hidden”이 되었습니다.

    • scss/helpers/_screenreaders.scss에서 scss/helpers/_visually-hidden.scss로 Sass 파일이 변경되었습니다.
    • .sr-only.sr-only-focusable에서 .visually-hidden.visually-hidden-focusable로 변경되었습니다.
    • sr-only()sr-only-focusable()믹스인은 visually-hidden()visually-hidden-focusable()로 변경되었습니다.
  • bootstrap-utilities.css 안에 도우미가 포함되어 있습니다. 도우미는 더 이상 사용자 정의 빌드로 따로 포함할 필요가 없습니다.

JavaScript

  • jQuery에 대한 의존을 중단하고 플러그인을 통상적인 JavaScript로 다시 썼습니다.

  • Breaking 모든 JavaScript 플러그인의 데이터 속성은 제삼자의 코드와 자체 코드에서 Bootstrap의 기능을 구별하는 데 도움이 되도록 이름을 붙이고 있습니다. 예를 들어 data-toggle 대신 data-bs-toggle을 사용합니다.

  • 모든 클러그인은 첫번째 인수로서 CSS 셀렉터를 받아들일 수 있게 되었습니다. 플러그인의 새로운 인스턴스를 작성하기 위해 DOM 요소 또는 임의의 CSS 셀렉터를 전달할 수 있습니다. :

    var modal = new bootstrap.Modal('#myModal')
    var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
    
  • popperConfig는 Bootstrap 기본 Popper 설정을 인수로 하는 함수로 전달할 수 있으며, 이 기본 설정을 내 방식대로 병합할 수 있습니다. 드롭다운, 팝오버, 툴팁에 적용됩니다.

  • 팝오버 요소의 보다 나은 배치를 위해 fallbackPlacements 기본값이 ['top', 'right', 'bottom', 'left']로 변경되었습니다. 드롭다운, 팝오버, 툴팁에 적용됩니다.

  • _getInstance()getInstance()와 같이 공공의 정적 메소드에서 밑줄표시 삭제하였습니다.