v4로 마이그레이션

Bootstrap 4는 전체 프로젝트의 주요 재작성입니다. 가장 눈에 띄는 변경 사항은 아래에 요약되어 있으며 관련 구성 요소에 대한 보다 구체적인 변경 사항이 있습니다.

안정적인 변화

베타 3에서 안정적인 v4.0 릴리스로 이동하면서 주요 변경 사항은 없지만 몇 가지 주목할 만한 변경 사항이 있습니다.

인쇄

• 깨진 인쇄 유틸리티를 수정했습니다. 이전에는 .d-print-*클래스를 사용하면 예기치 않게 다른 .d-*클래스보다 우선 적용되었습니다. 이제 다른 디스플레이 유틸리티와 일치하며 해당 미디어( @media print)에만 적용됩니다.

• 다른 유틸리티와 일치하도록 사용 가능한 인쇄 디스플레이 유틸리티를 확장했습니다. 베타 3 이전 버전에는 block, inline-block, inline및 만 있었습니다 none. Stable v4가 flex, inline-flex, table, table-row및 가 추가되었습니다 table-cell.

• 를 지정하는 새 인쇄 스타일을 사용하여 브라우저에서 인쇄 미리보기 렌더링을 수정했습니다 @page size.

베타 3 변경 사항

베타 2는 베타 단계에서 주요 변경 사항을 확인했지만 아직 베타 3 릴리스에서 해결해야 할 몇 가지 사항이 있습니다. 이러한 변경 사항은 베타 2 또는 이전 버전의 부트스트랩에서 베타 3으로 업데이트하는 경우 적용됩니다.

여러 가지 잡다한

• 사용하지 않는 $thumbnail-transition변수를 제거했습니다. 우리는 아무 것도 전환하지 않았으므로 단지 추가 코드였습니다.
• npm 패키지에는 더 이상 소스 및 dist 파일 이외의 파일이 포함되어 있지 않습니다. 그것들에 의존하고 node_modules폴더를 통해 스크립트를 실행했다면 워크플로를 조정해야 합니다.

양식

• 사용자 정의 및 기본 확인란과 라디오를 모두 다시 작성했습니다. 이제 둘 다 일치하는 HTML 구조(외부 <div>형제 <input>및 <label>)와 동일한 레이아웃 스타일(스택 기본값, 수정자 클래스 인라인)이 있습니다. 이를 통해 입력 상태에 따라 레이블의 스타일을 지정할 수 있어 disabled속성 지원을 단순화하고(이전에는 부모 클래스가 필요함) 양식 유효성 검사를 더 잘 지원합니다.

  그 일환으로 background-image사용자 정의 양식 체크박스 및 라디오에서 여러 s를 관리하기 위해 CSS를 변경했습니다. 이전에는 이제 제거된 .custom-control-indicator요소에 배경색, 그라디언트 및 SVG 아이콘이 있었습니다. 배경 그라디언트를 사용자 지정한다는 것은 하나만 변경해야 할 때마다 모든 그라디언트를 교체하는 것을 의미했습니다. 이제 .custom-control-label::before채우기 및 그라디언트 .custom-control-label::after가 있고 아이콘을 처리합니다.

  사용자 정의 검사를 인라인으로 만들려면 를 추가하십시오 .custom-control-inline.

• 입력 기반 버튼 그룹에 대한 선택기가 업데이트되었습니다. [data-toggle="buttons"] { }스타일 및 동작 대신에 JS 동작에만 속성을 사용하고 스타일 지정을 위해 새 클래스에 data의존합니다 ..btn-group-toggle

• .col-form-legend약간 개선 을 위해 제거 되었습니다 .col-form-label. 이 방법 .col-form-label-sm으로 요소에 쉽게 .col-form-label-lg사용할 수 있습니다 .<legend>

• $custom-file-text사용자 정의 파일 입력은 Sass 변수 에 대한 변경을 받았습니다 . 더 이상 중첩된 Sass 맵이 아니며 이제 하나의 문자열에만 전원이 공급됩니다. Browse버튼은 이제 Sass에서 생성된 유일한 의사 요소입니다. 이제 Choose file텍스트가 에서 옵니다 .custom-file-label.

입력 그룹

• 입력 그룹 애드온은 이제 입력과 관련된 배치에 따라 다릅니다. 우리는 두 개의 새로운 클래스 .input-group-addon와 . 이제 CSS의 많은 부분을 단순화하여 추가 또는 추가를 명시적으로 사용해야 합니다. 추가 또는 추가 내에서 버튼은 다른 위치에 있는 것처럼 배치하되 텍스트는 ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• 이제 여러 입력과 마찬가지로 유효성 검사 스타일이 지원됩니다(그룹당 하나의 입력만 유효성 검사할 수 있음).

• .input-group크기 조정 클래스는 개별 양식 요소가 아니라 부모에 있어야 합니다 .

베타 2 변경 사항

베타 버전에서는 주요 변경 사항이 없는 것을 목표로 합니다. 그러나 일이 항상 계획대로 진행되는 것은 아닙니다. 다음은 베타 1에서 베타 2로 이동할 때 염두에 두어야 할 주요 변경 사항입니다.

파괴

• $badge-color에서 변수와 그 사용법을 제거 했습니다 .badge. 색상 대비 기능을 사용하여 를 color기반으로 선택 background-color하므로 변수가 필요하지 않습니다.
• CSS 기본 필터 와의 충돌을 피하기 위해 grayscale()함수 이름 이 변경되었습니다.gray()grayscale
• 다른 곳에서 사용된 색 구성표와 일치 하도록 .table-inverse, .thead-inverse및 .thead-defaultto .*-dark및 로 이름 이 변경되었습니다..*-light
• 반응형 테이블은 이제 각 그리드 중단점에 대한 클래스를 생성합니다. 이것은 .table-responsive당신이 사용하고 있는 것이 베타 1과 더 비슷 하다는 점에서 깨졌습니다 .table-responsive-md. 이제 .table-responsive또는 .table-responsive-{sm,md,lg,xl}필요에 따라 사용할 수 있습니다.
• 패키지 관리자로서 중단된 Bower 지원은 대안(예: Yarn 또는 npm)에 대해 더 이상 사용되지 않습니다. 자세한 내용은 bower/bower#2298 을 참조하십시오.
• 부트스트랩에는 여전히 jQuery 1.9.1 이상이 필요하지만 v3.x에서 지원하는 브라우저는 부트스트랩이 지원하고 v3.x에는 일부 보안 수정 사항이 있으므로 버전 3.x를 사용하는 것이 좋습니다.
• 사용하지 않는 .form-control-label클래스를 제거했습니다. 이 클래스를 사용한 경우 수평 양식 레이아웃에서 연관된 입력과 함께 .col-form-label수직으로 가운데에 배치된 클래스 의 복제입니다.<label>
• color-yiq속성을 포함하는 믹스인 color에서 값을 반환하는 함수로 변경하여 모든 CSS 속성에 사용할 수 있습니다. color-yiq(#000)예 를 들어 , 대신 color: color-yiq(#000);.

하이라이트

• 모달에 대한 새로운 pointer-events사용법을 도입했습니다. 외부 는 사용자 지정 클릭 처리를 위해 .modal-dialog이벤트를 통과 한 다음( 모든 클릭에 대해 수신 대기 가능) 실제 에 대해 로 대응합니다 .pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

요약

다음은 v3에서 v4로 이동할 때 알아야 할 주요 항목입니다.

브라우저 지원

• IE8, IE9 및 iOS 6 지원이 중단되었습니다. v4는 이제 IE10+ 및 iOS 7+입니다. 둘 중 하나가 필요한 사이트의 경우 v3를 사용하십시오.
• Android v5.0 Lollipop의 브라우저 및 WebView에 대한 공식 지원이 추가되었습니다. Android 브라우저 및 WebView의 이전 버전은 비공식적으로만 지원됩니다.

글로벌 변화

• Flexbox는 기본적으로 활성화되어 있습니다. 일반적으로 이것은 플로트에서 멀어지고 구성 요소에서 더 많이 이동함을 의미합니다.
• 소스 CSS 파일에 대해 Less 에서 Sass 로 전환했습니다 .
• px에서 기본 CSS 단위로 전환 rem되었지만 장치 뷰포트가 유형 크기의 영향을 받지 않기 때문에 픽셀은 여전히 ​​미디어 쿼리 및 그리드 동작에 사용됩니다.
• 전역 글꼴 크기가 에서 로 증가 14px했습니다 16px.
• 그리드 계층을 개선하여 다섯 번째 옵션(이하 더 작은 장치를 지정)을 추가하고 해당 클래스에서 인픽스를 576px제거했습니다 . -xs예: .col-6.col-sm-4.col-md-3.
• 별도의 선택적 테마를 SCSS 변수(예: )를 통해 구성 가능한 옵션으로 대체했습니다 $enable-gradients: true.
• Grunt 대신 일련의 npm 스크립트를 사용하도록 시스템을 개편했습니다. 모든 스크립트는 를 참조 package.json하거나 지역 개발 요구 사항에 대해서는 프로젝트 추가 정보를 참조하십시오.
• 부트스트랩의 응답하지 않는 사용은 더 이상 지원되지 않습니다.
• 보다 광범위한 설정 문서 및 사용자 정의 빌드를 위해 온라인 커스터마이저를 삭제했습니다.
• 일반적인 CSS 속성-값 쌍 및 여백/패딩 간격 단축키를 위한 수십 개의 새로운 유틸리티 클래스 를 추가했습니다.

그리드 시스템

• 플렉스박스로 옮겼습니다.
  • 그리드 믹스인 및 미리 정의된 클래스에서 flexbox에 대한 지원을 추가했습니다.
  • flexbox의 일부로 수직 및 수평 정렬 클래스에 대한 지원이 포함되었습니다.
• 그리드 클래스 이름과 새 그리드 계층이 업데이트되었습니다.
  • 보다 세분화된 제어를 위해 아래에 새 sm그리드 계층 을 추가했습니다. 768px이제 xs, sm, md, lg가 xl있습니다. 이것은 또한 모든 계층이 한 단계 올라갔다는 것을 의미합니다(그래서 .col-md-6v3에서 이제 .col-lg-6v4에 있음).
  • xsmin-width: 0그리드 클래스는 설정된 픽셀 값이 아니라 스타일 적용을 시작한다는 것을 보다 정확하게 나타내기 위해 중위를 필요로 하지 않도록 수정되었습니다 . 대신 .col-xs-6, 지금 .col-6입니다. 다른 모든 그리드 계층에는 인픽스가 필요합니다(예: sm).
• 그리드 크기, 믹스인 및 변수를 업데이트했습니다.
  • 그리드 거터에는 이제 Sass 맵이 있으므로 각 중단점에서 특정 거터 너비를 지정할 수 있습니다.
  • make-col-ready준비 믹스 인을 활용하도록 그리드 믹스인을 업데이트 하고 개별 열 크기 make-col를 설정하기 위해 flex및 a를 사용합니다.max-width
  • 그리드 시스템 미디어 쿼리 중단점 및 컨테이너 너비를 변경하여 새 그리드 계층을 설명 12하고 최대 너비에서 열을 균등하게 나눌 수 있도록 합니다.
  • 그리드 중단점 및 컨테이너 너비는 이제 소수의 개별 변수 대신 Sass 맵( $grid-breakpoints및 )을 통해 처리됩니다. $container-max-widths이는 @screen-*변수를 완전히 대체하고 그리드 계층을 완전히 사용자 정의할 수 있도록 합니다.
  • 미디어 쿼리도 변경되었습니다. 매번 같은 값으로 미디어 쿼리 선언을 반복하는 대신 이제 @include media-breakpoint-up/down/only. 이제 쓰는 대신 을 쓸 @media (min-width: @screen-sm-min) { ... }수 있습니다 @include media-breakpoint-up(sm) { ... }.

구성품

• 모든 것을 포괄하는 새로운 구성 요소인 카드 에 대한 패널, 축소판 및 우물이 삭제 되었습니다 .
• Glyphicons 아이콘 글꼴을 삭제했습니다. 아이콘이 필요한 경우 몇 가지 옵션은 다음과 같습니다.
  • Glyphicons 의 업스트림 버전
  • 옥티콘
  • 글꼴 굉장
  • 대안 목록은 확장 페이지 를 참조하십시오 . 추가 제안 사항이 있습니까? 이슈나 PR을 열어주세요.
• Afix jQuery 플러그인을 삭제했습니다.
  • 대신 사용하는 것이 좋습니다 position: sticky. 자세한 내용과 특정 폴리필 권장 사항 은 HTML5 항목을 참조하세요 . 한 가지 제안은 @supports그것을 구현하기 위해 규칙을 사용하는 것입니다(예: @supports (position: sticky) { ... })/
  • Affix 를 사용하여 스타일이 아닌 추가를 적용 position하는 경우 폴리필이 사용 사례를 지원하지 않을 수 있습니다. 이러한 용도를 위한 한 가지 옵션은 타사 ScrollPos-Styler 라이브러리입니다.
• 기본적으로 약간 사용자 정의된 버튼이므로 호출기 구성 요소를 삭제했습니다 .
• 거의 모든 구성 요소 를 리팩토링하여 과도하게 특정한 자식 선택자 대신 중첩되지 않은 클래스 선택자를 더 많이 사용했습니다.

구성요소별

이 목록은 v3.xx와 v4.0.0 사이의 구성 요소별 주요 변경 사항을 강조 표시합니다.

재부팅

Bootstrap 4의 새로운 기능은 Reboot 입니다. 이는 다소 독단적인 자체 재설정 스타일로 Normalize를 기반으로 하는 새로운 스타일시트입니다. 이 파일에 나타나는 선택기는 요소만 사용하며 여기에는 클래스가 없습니다. 이는 보다 모듈화된 접근 방식을 위해 구성 요소 스타일에서 재설정 스타일을 분리합니다. 여기에 포함된 가장 중요한 재설정 중 일부는 box-sizing: border-box변경, 여러 요소의 단위로 이동 em, rem링크 스타일 및 많은 양식 요소 재설정입니다.

타이포그래피

• 모든 .text-유틸리티를 _utilities.scss파일로 이동했습니다.
• .page-header유틸리티를 통해 스타일을 적용할 수 있으므로 삭제 되었습니다.
• .dl-horizontal삭제되었습니다. 대신 .rowon 을 사용하고 해당 및 자식 <dl>에서 그리드 열 클래스(또는 믹스인)를 사용합니다 .<dt><dd>
• <blockquote>요소에서 단일 클래스로 스타일을 이동하여 재설계된 인용구 .blockquote. .blockquote-reverse텍스트 유틸리티에 대한 수정자를 삭제했습니다 .
• .list-inline이제 자식 목록 항목에 새 .list-inline-item클래스가 적용되어야 합니다.

이미지

• 로 이름 이 변경 .img-responsive되었습니다 .img-fluid.
• 로 이름 .img-rounded변경.rounded
• 로 이름 .img-circle변경.rounded-circle

테이블

• 선택기 의 거의 모든 인스턴스 >가 제거되었습니다. 즉, 이제 중첩 테이블이 부모로부터 스타일을 자동으로 상속합니다. 이것은 선택자와 잠재적인 사용자 정의를 크게 단순화합니다.
• 일관성 .table-condensed을 위해 로 이름 이 변경되었습니다..table-sm
• 새로운 .table-inverse옵션을 추가했습니다.
• 추가된 테이블 헤더 수정자: .thead-default및 .thead-inverse.
• -접두사를 갖도록 컨텍스트 클래스의 이름을 변경했습니다 .table-. 따라서 .active, .success, .warning, .danger및 .info에 .table-active, .table-success, 및 . .table-warning_.table-danger.table-info

양식

• 이동된 요소가 _reboot.scss파일로 재설정됩니다.
• 로 이름 이 변경 .control-label되었습니다 .col-form-label.
• .input-lg각각 및 .input-smto .form-control-lg및 로 이름 이 변경 .form-control-sm되었습니다.
• .form-group-*단순함을 위해 수업을 중단 했습니다. .form-control-*지금 대신 클래스를 사용하십시오 .
• 블록 수준 도움말 텍스트를 삭제 .help-block하고 로 대체했습니다 . .form-text인라인 도움말 텍스트 및 기타 유연한 옵션의 경우 와 같은 유틸리티 클래스를 사용 .text-muted하십시오.
• 떨어 .radio-inline졌고 .checkbox-inline.
• 통합 .checkbox및 다양한 클래스 .radio..form-check.form-check-*
• 가로 형태 점검:
  • .form-horizontal수업 요구 사항을 삭제했습니다 .
  • .form-group더 이상 .rowvia mixin 의 스타일을 적용하지 않으므로 .row이제 수평 그리드 레이아웃(예: <div class="form-group row">)에 필요합니다.
  • s .col-form-label로 레이블을 수직으로 가운데에 새 클래스를 추가 했습니다..form-control
  • .form-row그리드 클래스를 사용하여 컴팩트 양식 레이아웃에 새로운 기능을 추가 했습니다( .rowfor .form-row및 go 교체).
• 사용자 정의 양식 지원이 추가되었습니다(확인란, 라디오, 선택 및 파일 입력용).
• .has-error, .has-warning및 클래스를 CSS 및 의사 클래스 .has-success를 통한 HTML5 양식 유효성 검사 로 대체 했습니다.:invalid:valid
• 로 이름 이 변경 .form-control-static되었습니다 .form-control-plaintext.

버튼

• 로 이름 이 변경 .btn-default되었습니다 .btn-secondary.
• 비례적으로 v3보다 훨씬 작기 때문에 .btn-xs클래스를 완전히 삭제했습니다 ..btn-sm
• jQuery 플러그인 의 상태 저장 버튼 기능 이 삭제되었습니다. button.js여기에는 $().button(string)및 $().button('reset')메서드가 포함됩니다. 대신 사용자 정의 JavaScript를 약간 사용하는 것이 좋습니다. 그러면 원하는 방식으로 정확하게 동작할 수 있다는 이점이 있습니다.
  • 플러그인의 다른 기능(버튼 체크박스, 버튼 라디오, 단일 토글 버튼)은 v4에서 유지되었습니다.
• IE9+가 지원하므로 버튼을 ' [disabled]로 변경하십시오 . 그러나 IE11에서는 기본 비활성화 필드셋이 여전히 버그가 있기 때문에 여전히 필요 합니다.:disabled:disabledfieldset[disabled]

버튼 그룹

• flexbox로 구성 요소를 다시 작성했습니다.
• 제거됨 .btn-group-justified. <div class="btn-group d-flex" role="group"></div>대체품으로 를 사용 하여 요소를 래퍼로 사용할 수 있습니다 .w-100.
• 의 제거로 인해 .btn-group-xs클래스가 완전히 삭제 .btn-xs되었습니다.
• 버튼 도구 모음에서 버튼 그룹 사이의 명시적 간격을 제거했습니다. 지금 마진 유틸리티를 사용하십시오.
• 다른 구성 요소와 함께 사용할 수 있도록 문서가 개선되었습니다.

드롭다운

• 부모 선택자에서 모든 구성 요소, 수정자 등에 대한 단일 클래스로 전환되었습니다.
• 드롭다운 메뉴에 첨부된 위쪽 또는 아래쪽 화살표와 함께 더 이상 제공되지 않도록 간소화된 드롭다운 스타일.
• <div>이제 s 또는 s 로 드롭다운을 구축할 수 있습니다 <ul>.
• 드롭 다운 항목 <a>을 기반 으로 하는 간편한 기본 제공 지원을 제공하기 위해 다시 빌드된 드롭다운 스타일 및 마크업 .<button>
• 로 이름 이 변경 .divider되었습니다 .dropdown-divider.
• 이제 드롭다운 항목에 가 필요합니다 .dropdown-item.
• 드롭다운 토글은 더 이상 명시적 <span class="caret"></span>; 이것은 이제 ::afteron CSS를 통해 자동으로 제공됩니다 .dropdown-toggle.

그리드 시스템

• 새 576px그리드 중단점을 로 추가했습니다 sm. 즉, 이제 총 5개의 계층( xs, sm, md, lg및 xl)이 있습니다.
• 더 간단한 그리드 클래스 .col-{breakpoint}-{modifier}-{size}를 위해 반응형 그리드 수정자 클래스의 이름을 에서 로 변경했습니다 ..{modifier}-{breakpoint}-{size}
• 새로운 flexbox 기반 클래스에 대한 푸시 및 풀 수정자 클래스를 삭제했습니다 order. 예를 들어 and 대신 and .col-8.push-4를 .col-4.pull-8사용 합니다..col-8.order-2.col-4.order-1
• 그리드 시스템 및 구성 요소에 대한 flexbox 유틸리티 클래스를 추가했습니다.

그룹 나열

• flexbox로 구성 요소를 다시 작성했습니다.
• 목록 그룹 항목의 링크 및 버튼 버전 스타일 지정을 위해 a.list-group-item명시적 클래스 로 대체 되었습니다..list-group-item-action
• .list-group-flush카드와 함께 사용할 수 있는 클래스가 추가되었습니다 .

모달

• flexbox로 구성 요소를 다시 작성했습니다.
• flexbox로 이동하면 더 이상 float를 사용하지 않기 때문에 헤더의 해제 아이콘 정렬이 깨질 수 있습니다. 플로팅 콘텐츠가 먼저지만 flexbox에서는 더 이상 그렇지 않습니다. 수정하려면 모달 제목 뒤에 오도록 닫기 아이콘을 업데이트하세요.
• 옵션 ( remote외부 콘텐츠를 자동으로 로드하고 모달에 삽입하는 데 사용할 수 있음)과 해당 loaded.bs.modal이벤트가 제거되었습니다. 대신 클라이언트 측 템플릿 또는 데이터 바인딩 프레임워크를 사용하거나 jQuery.load를 직접 호출하는 것이 좋습니다.

탐색

• flexbox로 구성 요소를 다시 작성했습니다.
• 중첩되지 않은 클래스를 통해 더 간단한 스타일 지정을 위해 거의 모든 >선택기를 삭제했습니다.
• 와 같은 HTML 전용 선택기 대신 s, s 및 s .nav > li > a에 대해 별도의 클래스를 사용합니다 . 이렇게 하면 HTML이 더 유연해지면서 확장성이 향상됩니다..nav.nav-item.nav-link

나브바

navbar는 정렬, 응답성 및 사용자 지정에 대한 향상된 지원을 통해 flexbox에서 완전히 다시 작성되었습니다.

• 반응형 탐색 모음 동작은 탐색 모음 을 축소할 위치를 선택 하는 필수.navbar 항목 을 통해 클래스 에 적용됩니다. 이전에는 덜 변수 수정이었고 재컴파일이 필요했습니다. .navbar-expand-{breakpoint}
• .navbar-default은(는) 지금 .navbar-light이지만 .navbar-dark동일하게 유지됩니다. 이 중 하나는 각 탐색 모음에 필요합니다. 그러나 이러한 클래스는 더 이상 background-colors를 설정하지 않습니다. 대신 본질적으로 영향을 미칩니다 color.
• Navbar는 이제 어떤 종류의 백그라운드 선언이 필요합니다. 백그라운드 유틸리티( .bg-*)에서 선택하거나 위의 light/inverse 클래스로 직접 설정하여 미친 사용자 정의를 할 수 있습니다 .
• flexbox 스타일이 주어지면 navbars는 이제 쉬운 정렬 옵션을 위해 flexbox 유틸리티를 사용할 수 있습니다.
• .navbar-toggle현재 .navbar-toggler이며 다른 스타일과 내부 마크업이 있습니다(더 이상 3개 없음 <span>).
• .navbar-form수업을 완전히 중단했습니다 . 더 이상 필요하지 않습니다. 대신 .form-inline필요에 따라 마진 유틸리티를 사용하고 적용하십시오.
• Navbar는 더 이상 margin-bottom또는 border-radius기본적으로 포함하지 않습니다. 필요에 따라 유틸리티를 사용하십시오.
• 탐색 모음이 포함된 모든 예제는 새 마크업을 포함하도록 업데이트되었습니다.

쪽수 매기기

• flexbox로 구성 요소를 다시 작성했습니다.
• 명시적 클래스( .page-item, .page-link)는 이제 .paginations 의 자손에 필요합니다.
• .pager사용자 정의 개요 버튼에 불과하므로 구성 요소를 완전히 삭제했습니다 .

빵 부스러기

• 이제 명시적 클래스 가 s .breadcrumb-item의 자손에 필요합니다..breadcrumb

라벨 및 배지

• 요소를 통합 .label하고 .badge명확하게 하고 <label>관련 구성 요소를 단순화합니다.
• .badge-pill둥근 "알약" 모양을 위한 수정자로 추가 되었습니다.
• 배지는 더 이상 목록 그룹 및 기타 구성 요소에서 자동으로 부동하지 않습니다. 이제 유틸리티 클래스가 필요합니다.
• .badge-default.badge-secondary다른 곳에서 사용되는 구성 요소 수정자 클래스와 일치 하도록 삭제 및 추가되었습니다.

패널, 축소판 및 우물

새 카드 구성 요소에 대해 완전히 삭제되었습니다.

패널

• .panel에 .card, 이제 flexbox로 구축되었습니다.
• .panel-default제거 및 교체 없음.
• .panel-group제거 및 교체 없음. .card-group대체가 아니라 다릅니다.
• .panel-heading에게.card-header
• .panel-title에 .card-title. 원하는 모양에 따라 제목 요소 또는 클래스 (예: <h3>, .h3) 또는 굵은 요소 또는 클래스(예: <strong>, <b>) 를 사용할 수도 있습니다 .font-weight-bold. 은 .card-title이름이 비슷하지만 과 다른 모양을 생성합니다 .panel-title.
• .panel-body에게.card-body
• .panel-footer에게.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning및 Sass 맵 에서 생성된 , 및 유틸리티 .panel-danger에 대해 삭제되었습니다 ..bg-.text-.border$theme-colors

진전

• .progress-bar-*상황별 클래스를 .bg-*유틸리티 로 대체 했습니다. 예를 들어 class="progress-bar progress-bar-danger"가 됩니다 class="progress-bar bg-danger".
• .active애니메이션 진행률 표시줄이 로 대체 되었습니다 .progress-bar-animated.

회전 목마

• 디자인과 스타일을 단순화하기 위해 전체 구성 요소를 점검했습니다. 재정의할 스타일, 새 표시기 및 새 아이콘이 더 적습니다.
• 모든 CSS는 중첩되지 않고 이름이 변경되어 각 클래스의 접두사가 .carousel-.
  • 캐러셀 항목의 경우 .next, .prev, .left및 .right는 이제 .carousel-item-next, .carousel-item-prev, .carousel-item-left및 .carousel-item-right입니다.
  • .item도 지금 .carousel-item입니다.
  • 이전/다음 컨트롤의 경우 현재 .carousel-control.right및 , 즉 더 이상 특정 기본 클래스가 필요하지 않습니다..carousel-control.left.carousel-control-next.carousel-control-prev
• 필요에 따라 유틸리티(예: 특정 뷰포트에 캡션 표시) 및 사용자 지정 스타일을 고려하여 반응형 스타일을 모두 제거했습니다.
• 유틸리티에 따라 캐러셀 항목의 이미지에 대한 이미지 재정의를 제거했습니다.
• 새 마크업과 스타일을 포함하도록 회전식 예제를 조정했습니다.

테이블

• 스타일이 지정된 중첩 테이블에 대한 지원이 제거되었습니다. 모든 테이블 스타일은 이제 더 간단한 선택기를 위해 v4에서 상속됩니다.
• 역 테이블 변형이 추가되었습니다.

유용

• 표시, 숨김 등:
  • 디스플레이 유틸리티를 반응형으로 만들었습니다(예: .d-none및 d-{sm,md,lg,xl}-none).
  • .hidden-*새로운 디스플레이 유틸리티 에 대한 대부분의 유틸리티를 삭제했습니다 . 예를 들어 , 대신 을 .hidden-sm-up사용 .d-sm-none합니다. .hidden-print디스플레이 유틸리티 이름 지정 체계를 사용하도록 유틸리티 이름을 변경했습니다 . 이 페이지의 반응형 유틸리티 섹션에서 자세한 정보를 확인하세요.
  • .float-{sm,md,lg,xl}-{left,right,none}반응형 수레에 대한 클래스를 추가 하고 제거 .pull-left했으며 및 에 .pull-right중복되므로 제거 했습니다..float-left.float-right
• 유형:
  • 텍스트 정렬 클래스에 반응형 변형을 추가 .text-{sm,md,lg,xl}-{left,center,right}했습니다.
• 정렬 및 간격:
  • 모든 면에 대해 새로운 반응형 여백 및 패딩 유틸리티 와 수직 및 수평 속기를 추가했습니다.
  • flexbox 유틸리티 의 보트로드를 추가 했습니다.
  • .center-block새 .mx-auto수업 을 위해 떨어 졌습니다.
• 이전 브라우저 버전에 대한 지원을 중단하도록 Clearfix가 업데이트되었습니다.

공급업체 접두사 믹스인

v3.2.0에서 더 이상 사용되지 않는 Bootstrap 3의 공급업체 접두사 mixin은 Bootstrap 4에서 제거되었습니다. Autoprefixer 를 사용하므로 더 이상 필요하지 않습니다.

다음 믹스인을 제거 했습니다 . animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform,translatetranslate3duser-select

선적 서류 비치

우리 문서도 전반적으로 업그레이드되었습니다. 아래는 다음과 같습니다.

• 우리는 여전히 Jekyll을 사용하고 있지만 혼합에 플러그인이 있습니다.
  • bugify.rb브라우저 버그 페이지 의 항목을 효율적으로 나열하는 데 사용됩니다 .
  • example.rb는 기본 highlight.rb플러그인의 사용자 지정 포크로 예제 코드를 더 쉽게 처리할 수 있습니다.
  • callout.rb이와 유사한 사용자 정의 포크이지만 특별한 문서 콜아웃을 위해 설계되었습니다.
  • jekyll-toc 은 목차를 생성하는 데 사용됩니다.
• 모든 문서 콘텐츠는 더 쉽게 편집할 수 있도록 HTML 대신 Markdown으로 다시 작성되었습니다.
• 페이지는 더 단순한 콘텐츠와 더 접근하기 쉬운 계층 구조를 위해 재구성되었습니다.
• 부트스트랩의 변수, 믹스인 등을 최대한 활용하기 위해 일반 CSS에서 SCSS로 이동했습니다.

반응형 유틸리티

모든 @screen-변수는 v4.0.0에서 제거되었습니다. media-breakpoint-up(), media-breakpoint-down()또는 media-breakpoint-only()Sass 믹스인이나 $grid-breakpointsSass 맵을 대신 사용하십시오 .

우리의 반응형 유틸리티 클래스는 명시적 유틸리티를 위해 대부분 제거되었습니다 display.

• .hidden및 클래스 는 jQuery 및 메서드 .show와 충돌하기 때문에 제거되었습니다 . 대신 속성을 전환 하거나 및 와 같은 인라인 스타일을 사용 하십시오 .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• 모든 .hidden-클래스가 제거되었으며 이름이 변경된 인쇄 유틸리티를 저장합니다.
  • v3에서 제거됨:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 알파에서 제거됨:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• 인쇄 유틸리티는 더 이상 .hidden-또는 .visible-로 시작하지 않고 로 시작 .d-print-합니다.
  • 이전 이름: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • 새 클래스: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

명시적 클래스를 사용하는 대신 .visible-*해당 화면 크기에서 요소를 숨기지 않음으로써 요소를 표시할 수 있습니다. .d-*-none하나의 클래스를 하나의 클래스와 결합 .d-*-block하여 주어진 화면 크기 간격에서만 요소를 표시할 수 있습니다(예: .d-none.d-md-block.d-xl-none중형 및 대형 장치에서만 요소 표시).

v4에서 그리드 중단점에 대한 변경은 동일한 결과를 얻기 위해 중단점을 하나 더 크게 이동해야 함을 의미합니다. 새로운 반응형 유틸리티 클래스는 요소의 가시성을 단일 연속적인 뷰포트 크기 범위로 표현할 수 없는 덜 일반적인 경우를 수용하려고 시도하지 않습니다. 이러한 경우 대신 사용자 정의 CSS를 사용해야 합니다.