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)
sm
lg
-
파괴인쇄 스타일 및
$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-buttons
to$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-sizes
Sass 맵 을 대체하기 위해 디스플레이 타이포그래피를 정밀 검사 했습니다.$display-*-weight
또한 단일$display-font-weight
및 조정된font-size
s 에 대한 개별 변수를 제거했습니다 . -
두 개의 새로운
.display-*
제목 크기.display-5
및 가 추가되었습니다.display-6
. -
링크가 특정 구성 요소의 일부가 아닌 경우 기본적으로(마우스를 가리킬 때뿐만 아니라) 밑줄이 그어집니다 .
-
스타일을 새로 고치고 스타일을 더 잘 제어할 수 있도록 CSS 변수를 사용하여 테이블을 재설계 했습니다.
-
파괴중첩 테이블은 더 이상 스타일을 상속하지 않습니다.
-
파괴
.thead-light
모든 테이블 요소( , , , 및 ) 에 사용할 수 있는 변형 클래스를.thead-dark
위해 삭제됩니다 ..table-*
thead
tbody
tfoot
tr
th
td
-
파괴
table-row-variant()
mixin은 (색상 이름) 및 (색상 코드) 의table-variant()
2개 매개변수만 허용하고 이름 이 변경되었습니다. 테두리 색상과 강조 색상은 테이블 요인 변수를 기반으로 자동으로 계산됩니다.$color
$value
-
-y
테이블 셀 패딩 변수를 및 로 분할합니다-x
. -
파괴
.pre-scrollable
수업을 중단 했습니다. #29135 참조 -
파괴
.text-*
유틸리티는 더 이상 링크에 호버 및 포커스 상태를 추가하지 않습니다..link-*
대신 도우미 클래스를 사용할 수 있습니다. #29267 참조 -
파괴
.text-justify
수업을 중단 했습니다. #29793 참조 -
padding-left
기본 가로 켜기<ul>
및<ol>
브라우저의 요소를 기본값으로 재설정40px
합니다2rem
. -
미디어 쿼리 를 통해 모션 감소를 요청하는 사용자를 제외하고 전 세계적으로
$enable-smooth-scroll
적용되는 가 추가되었습니다 . #31877 참조scroll-behavior: smooth
prefers-reduced-motion
RTL
- 수평 방향 특정 변수, 유틸리티 및 믹스인은 모두 flexbox 레이아웃에서 볼 수 있는 것과 같은 논리적 속성을 사용하도록 이름이 변경되었습니다(예 :
start
및end
대신 .left
right
양식
-
새로운 플로팅 폼이 추가되었습니다! 부동 레이블 예제를 완전히 지원되는 양식 구성 요소로 승격했습니다. 새로운 플로팅 라벨 페이지를 참조하세요.
-
파괴 통합된 기본 및 사용자 정의 양식 요소. 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
더 이상 설정하지 않으므로display
HTML 요소를 변경하는 것만으로 원하는 대로 도움말 텍스트를 인라인하거나 차단할 수 있습니다. -
<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-divider
CSS 를 다시 컴파일할 필요 없이 쉽게 사용자 정의할 수 있도록 새로운 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-columns
Masonry에게 유리하게 떨어 졌습니다. #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-item
s로 래핑된<li>
s를 지원합니다.
점보트론
- 파괴유틸리티로 복제할 수 있으므로 점보트론 구성 요소를 삭제했습니다. 데모는 새로운 Jumbotron 예제를 참조하십시오.
목록 그룹
- 목록 그룹에 새
.list-group-numbered
수정자를 추가했습니다.
탐색 및 탭
- , , 및 에 대한 새
null
변수를 클래스에 추가했습니다.font-size
font-weight
color
: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-radius
s 로 대체되었습니다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>
-
, , 및 에 대한 새 위치 유틸리티 가 추가되었습니다 . 값에는 각 속성에 대한 , 및 가 포함됩니다.
top
right
bottom
left
0
50%
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-ratios
Sass 맵 의 이름이 로 바뀌었고$aspect-ratios
클래스 이름과 백분율을key: value
쌍으로 포함하도록 값이 단순화되었습니다.- 이제 CSS 변수가 생성되어 Sass 맵의 각 값에 포함됩니다. 사용자 정의 종횡비 를 생성 하려면 의
--bs-aspect-ratio
변수를 수정하십시오 ..ratio
- 종횡비 로 변경
-
파괴 "화면 판독기" 클래스는 이제 "시각적으로 숨겨진" 클래스 입니다.
- Sass 파일을
scss/helpers/_screenreaders.scss
로 변경했습니다.scss/helpers/_visually-hidden.scss
- 이름 이
.sr-only
and.sr-only-focusable
to.visually-hidden
및.visually-hidden-focusable
- 및 로 이름 이 변경
sr-only()
되고sr-only-focusable()
믹스인됩니다 .visually-hidden()
visually-hidden-focusable()
- Sass 파일을
-
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()
했습니다.