v5으로 마이그레이션
// 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 ofmedia-breakpoint-down(md)
targets viewports smaller thanlg
).- 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 ofmedia-breakpoint-between(sm, md)
targets viewports betweensm
andlg
).
-
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
으로 변경 되었습니다.
- 수평/수직 거터, 수평 거터, 그리고 수직 거터를 제어하는 새로운 gutter class(
-
컬럼은 더 이상
position: relative
가 적용되지 않기 때문에 필요에 따라 해당 동작을 위해 요소에.position-relative
클래스를 추가해 사용할 필요가 있습니다. -
Breaking 자주 사용되지 않는 몇몇
.order-*
클래스를 삭제하였습니다. 현재는.order-1
부터.order-5
까지의 클래스만 제공하고 있습니다. -
Breaking 유틸리티로 쉽게 복제 할 수 있는
.media
클래스를 삭제 하였습니다. #28265와 flex 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 useheight
instead ofborder
to better support thesize
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
- 수평 방항으로 특화된 변수, 유틸리티 그리고 믹스인의 이름이 플레스 박스의 레이아웃에서 볼수 있는 - 예를 들어,
left
와right
대신에start
와end
과 같이 - 논리적인 속성으로 변경되었습니다.
폼
-
새로운 플로팅 폼 추가! 플로팅 라벨의 예시를 완전히 지원되는 폼 컴포넌트로 승격시켰습니다. 새로운 플로팅 라벨 페이지 확인하러 가기
-
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 내의
×
대신에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
를 지원합니다.
점보트론
- Breaking 유틸리티로 만들수 있기 때문에 점보트론 컴포넌트는 삭제되었습니다. 데모로 새로운 점보트론의 사용을 확인해 주세요.
목록 그룹
- 목록 그룹에 새로운
.list-group-numbered
제어자 클래스가 추가되었습니다.
내비게이션과 탭
.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-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
로 확장하였습니다.
도우미
-
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()
와 같이 공공의 정적 메소드에서 밑줄표시 삭제하였습니다.