v5로 마이그레이션

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

이 페이지에서

v5.2.0

새로워진 디자인

Bootstrap v5.2.0border-radius 은 프로젝트 전반에 걸쳐 소수의 구성 요소와 속성에 대한 미묘한 디자인 업데이트를 제공 합니다 . 우리의 문서는 또한 새로운 홈페이지, 더 이상 사이드바 섹션을 축소하지 않는 더 간단한 문서 레이아웃, 부트스트랩 아이콘 의 더 눈에 띄는 예제로 업데이트되었습니다 .

더 많은 CSS 변수

CSS 변수를 사용하도록 모든 구성 요소를 업데이트했습니다. Sass는 여전히 모든 것을 뒷받침하지만 각 구성 요소는 구성 요소 기본 클래스(예: )에 CSS 변수를 포함하도록 업데이트되어 .btnBootstrap을 보다 실시간으로 사용자 지정할 수 있습니다. 후속 릴리스에서는 CSS 변수 사용을 레이아웃, 양식, 도우미 및 유틸리티로 계속 확장할 것입니다. 해당 문서 페이지에서 각 구성 요소의 CSS 변수에 대해 자세히 알아보세요.

우리의 CSS 변수 사용법은 Bootstrap 6까지 다소 불완전할 것입니다. 우리는 이것을 전면적으로 완전히 구현하고 싶지만, 변경을 일으킬 위험이 있습니다. 예를 들어, 우리의 소스 코드에서 설정 하면 어떤 이유로 $alert-border-width: var(--bs-border-width)하는 경우 자신의 코드에서 잠재적인 Sass가 중단됩니다 .$alert-border-width * 2

따라서 가능한 한 더 많은 CSS 변수를 계속 추진할 것이지만 v5에서는 구현이 약간 제한될 수 있음을 인지하십시오.

새로운`_maps.scss`

부트스트랩 v5.2.0은 _maps.scss. _variables.scss원본 지도에 대한 업데이트가 해당 지도를 확장하는 보조 지도에 적용되지 않는 문제를 해결하기 위해 여러 Sass 지도를 가져옵니다 . 예를 들어 에 $theme-colors의존하는 다른 테마 맵에는 에 대한 업데이트가 적용되지 않아 $theme-colors주요 사용자 지정 워크플로가 중단되었습니다. 간단히 말해서 Sass는 기본 변수나 맵을 한 번 사용 하면 업데이트할 수 없다는 한계가 있습니다. 다른 CSS 변수를 구성하는 데 사용되는 CSS 변수에도 유사한 단점이 있습니다.

이것이 Bootstrap의 변수 사용자 정의가 가져오기 스택의 뒤에 와야 하는 이유 @import "functions"입니다 @import "variables". Sass 맵에도 동일하게 적용됩니다. 사용하기 전에 기본값을 재정의해야 합니다. 다음 맵이 새 맵으로 이동되었습니다 _maps.scss.

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

사용자 정의 부트스트랩 CSS 빌드는 이제 별도의 맵 가져오기를 사용하여 다음과 같이 보일 것입니다.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

새로운 유틸리티

세미볼드 글꼴 에 포함 할 확장된 font-weight유틸리티 ..fw-semibold
두 가지 새로운 크기를 포함하도록 확장된 border-radius유틸리티.rounded-4 및 .rounded-5더 많은 옵션의 경우 .

추가 변경 사항

새로운 $enable-container-classes옵션을 도입했습니다. — 이제 실험적인 CSS 그리드 레이아웃을 선택할 때 .container-*이 옵션을 로 설정하지 않는 한 클래스는 계속 컴파일됩니다 false. 컨테이너는 이제 거터 값도 유지합니다.
Offcanvas 구성 요소에는 이제 반응형 변형 이 있습니다. 원래 .offcanvas클래스는 변경되지 않고 모든 뷰포트에서 콘텐츠를 숨깁니다. 반응형으로 만들려면 해당 .offcanvas클래스를 임의의 .offcanvas-{sm|md|lg|xl|xxl}클래스로 변경하십시오.
더 두꺼운 테이블 디바이더는 이제 옵트인입니다. — 테이블 그룹 간의 더 두껍고 재정의하기 어려운 테두리를 제거하고 적용할 수 있는 선택적 클래스로 이동했습니다 .table-group-divider. 예제는 테이블 문서를 참조하십시오.
Scrollspy는 Intersection Observer API를 사용 하도록 다시 작성되었습니다 . 즉, 더 이상 상대 부모 래퍼가 필요하지 않고offset구성이 더 이상 필요하지 않습니다. 탐색 강조 표시에서 Scrollspy 구현이 더 정확하고 일관성이 있는지 확인하십시오.
팝오버 및 툴팁은 이제 CSS 변수를 사용합니다. 일부 CSS 변수는 변수 수를 줄이기 위해 Sass 대응 항목에서 업데이트되었습니다. 결과적으로 이 릴리스에서는 세 가지 변수 $popover-arrow-color( , $popover-arrow-outer-color및 )가 사용되지 않습니다 $tooltip-arrow-color.
새로운 .text-bg-{color}도우미가 추가되었습니다. 개별 .text-*및 .bg-*유틸리티를 설정하는 대신 이제 도우미 를 사용 하여.text-bg-*background-color 대비되는 전경 을 설정할 수 있습니다 color.
.form-check-reverse레이블 및 관련 체크박스/라디오의 순서를 뒤집는 수정자를 추가 했습니다.
새 클래스 를 통해 테이블에 스트라이프 열 지원을 추가 했습니다..table-striped-columns

전체 변경 목록은 GitHub의 v5.2.0 프로젝트를 참조하세요 .

v5.1.0

CSS 그리드 레이아웃 에 대한 실험적 지원이 추가되었습니다 . — 이것은 진행 중인 작업이며 아직 프로덕션에 사용할 준비가 되지 않았지만 Sass를 통해 새 기능을 선택할 수 있습니다. 활성화하려면 설정하여 기본 그리드를 비활성화하고 $enable-grid-classes: false설정하여 CSS 그리드를 활성화합니다 $enable-cssgrid: true.
오프캔버스를 지원하도록 탐색 모음을 업데이트했습니다. — 반응형 클래스와 일부 offcanvas 마크업 을 사용하여 모든 탐색 모음에 offcanvas 서랍을 추가 합니다..navbar-expand-*
새로운 자리 표시자 구성 요소 를 추가 했습니다. — 최신 구성 요소, 실제 콘텐츠 대신 임시 블록을 제공하여 사이트 또는 앱에 무언가가 아직 로드 중임을 나타내는 데 도움이 되는 방법입니다.
축소 플러그인은 이제 수평 축소 를 지원합니다 . — 에 추가 .collapse-horizontal하여 .collapse접기 width대신 height. min-height또는 를 설정하여 브라우저 다시 그리기를 방지하십시오 height.
새로운 스택 및 수직 규칙 도우미가 추가되었습니다. — 여러 flexbox 속성을 빠르게 적용하여 스택 이 있는 사용자 정의 레이아웃을 빠르게 생성 합니다. 가로( .hstack) 및 세로( .vstack) 스택 중에서 선택합니다. 새 도우미<hr> 를 사용하여 요소와 유사한 수직 구분선을 추가 합니다 ..vr
새로운 전역 :rootCSS 변수를 추가했습니다. — 스타일 :root을 제어하기 위해 레벨에 몇 가지 새로운 CSS 변수를 추가했습니다 . <body>유틸리티 및 구성 요소를 포함하여 더 많은 작업이 진행 중이지만 지금 은 사용자 정의 섹션에서 CSS 변수를 읽으십시오 .
CSS 변수를 사용하도록 색상 및 배경 유틸리티를 정밀 검사하고 새로운 텍스트 불투명도 및 배경 불투명도 유틸리티를 추가했습니다. — 이제 유틸리티가 CSS 변수와 색상 값으로 구축 .text-*되어 새로운 불투명도 유틸리티로 모든 유틸리티를 쉽게 사용자 정의할 수 있습니다..bg-*rgba()
구성 요소를 사용자 정의하는 방법을 보여주기 위해 새로운 스니펫 예제를 추가했습니다. — 새로운 스니펫 예제 를 통해 사용자 지정 구성 요소 및 기타 일반적인 디자인 패턴을 사용할 준비가 되었습니다 . 바닥글 , 드롭다운 , 목록 그룹 및 모달 이 포함 됩니다.
Popper에서 단독으로 처리하는 팝오버 및 툴팁에서 사용하지 않는 위치 지정 스타일을 제거 했습니다. $tooltip-margin프로세스에서 더 이상 사용되지 않으며 로 설정되었습니다 null.

더 많은 정보를 원하십니까? v5.1.0 블로그 게시물을 읽어보세요.

이봐! Bootstrap 5, v5.0.0의 첫 번째 주요 릴리스에 대한 변경 사항은 아래에 설명되어 있습니다. 위에 표시된 추가 변경 사항은 반영되지 않습니다.

종속성

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-control.custom-checkbox지금 .form-check입니다.
- .custom-control.custom-custom-radio지금 .form-check입니다.
- .custom-control.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 요소를 변경하는 것만으로 원하는 대로 도움말 텍스트를 인라인하거나 차단할 수 있습니다.
가능한 경우 양식 컨트롤이 더 이상 고정되어 사용되지 않고 대신 사용자 지정 및 다른 구성 요소와의 호환성을 개선하기 위해 height연기합니다 .min-height
<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"이제 드롭다운 의 위치가 정적이거나 드롭다운이 탐색 모음에 있는 경우 드롭다운 메뉴에 속성이 설정되어 있습니다. 이것은 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를 대폭 단순화하기 위해).
파괴클래스는 더 .active이상 s에 적용할 수 없으며 .nav-items에 직접 적용해야 합니다 .nav-link.

오프캔버스

새로운 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 선택기를 전달하여 플러그인의 새 인스턴스를 만들 수 있습니다.
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig부트스트랩의 기본 Popper 구성을 인수로 받아들이는 함수로 전달할 수 있으므로 이 기본 구성을 원하는 대로 병합할 수 있습니다. 드롭다운, 팝오버 및 도구 설명에 적용됩니다.
Popper 요소의 더 나은 배치 를 위해 의 기본값 fallbackPlacements이 로 변경됩니다 . 드롭다운, 팝오버 및 도구 설명에 적용됩니다.['top', 'right', 'bottom', 'left']
_getInstance()→ 와 같은 공개 정적 메서드에서 밑줄을 제거 getInstance()했습니다.