2.x에서 3.0으로 마이그레이션

부트스트랩 3은 v2.x와 역호환되지 않습니다. 이 섹션을 v2.x에서 v3.0으로 업그레이드하는 일반적인 가이드로 사용하십시오. 더 광범위한 개요 는 v3.0 릴리스 발표 의 새로운 기능을 참조하십시오.

주요 클래스 변경 사항

이 표는 v2.x와 v3.0 사이의 스타일 변경 사항을 보여줍니다.

부트스트랩 2.x 부트스트랩 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop 로 분할.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop 로 분할.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

새로운 기능

새로운 요소를 추가하고 일부 기존 요소를 변경했습니다. 다음은 새롭거나 업데이트된 스타일입니다.

요소 설명
패널 .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
그룹 나열 .list-group .list-group-item .list-group-item-text .list-group-item-heading
글리프콘 .glyphicon
점보트론 .jumbotron
매우 작은 그리드(<768px) .col-xs-*
작은 격자(≥768px) .col-sm-*
중간 격자(≥992px) .col-md-*
큰 격자(≥1200px) .col-lg-*
반응형 유틸리티 클래스(≥1200px) .visible-lg .hidden-lg
오프셋 .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
푸시 .col-sm-push-* .col-md-push-* .col-lg-push-*
당기다 .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
입력 높이 크기 .input-sm .input-lg
입력 그룹 .input-group .input-group-addon .input-group-btn
양식 컨트롤 .form-control .form-group
버튼 그룹 크기 .btn-group-xs .btn-group-sm .btn-group-lg
Navbar 텍스트 .navbar-text
Navbar 헤더 .navbar-header
정당화 된 탭 / 알약 .nav-justified
반응형 이미지 .img-responsive
상황별 테이블 행 .success .danger .warning .active .info
상황별 패널 .panel-success .panel-danger .panel-warning .panel-info
모달 .modal-dialog .modal-content
썸네일 이미지 .img-thumbnail
우물 크기 .well-sm .well-lg
경고 링크 .alert-link

제거된 항목

v3.0에서 다음 요소가 삭제되거나 변경되었습니다.

요소 2.x에서 제거됨 3.0 상당
양식 작업 .form-actions 해당 없음
검색 양식 .form-search 해당 없음
정보가 포함된 양식 그룹 .control-group.info 해당 없음
고정 너비 입력 크기 .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge 대신 .form-control및 그리드 시스템 을 사용하십시오 .
블록 레벨 양식 입력 .input-block-level 직접적으로 동등하지는 않지만 양식 컨트롤 은 유사합니다.
반전 버튼 .btn-inverse 해당 없음
유체 행 .row-fluid .row(더 이상 고정 그리드 없음)
래퍼를 제어 .controls 해당 없음
행을 제어 .controls-row .row또는.form-group
Navbar 내부 .navbar-inner 해당 없음
Navbar 수직 분할기 .navbar .divider-vertical 해당 없음
드롭다운 하위 메뉴 .dropdown-submenu 해당 없음
탭 정렬 .tabs-left .tabs-right .tabs-below 해당 없음
알약 기반 탭 가능 영역 .pill-content .tab-content
알약 기반 탭 가능 영역 창 .pill-pane .tab-pane
탐색 목록 .nav-list .nav-header 직접적인 등가물은 없지만 목록 그룹 과 .panel-groups 는 비슷합니다.
양식 컨트롤에 대한 인라인 도움말 .help-inline 정확히 동등하지는 않지만 .help-block유사합니다.
막대 수준이 아닌 진행 색상 .progress-info .progress-success .progress-warning .progress-danger .progress-bar-*대신 에 사용하십시오 .progress-bar.

추가 참고 사항

v3.0의 다른 변경 사항은 즉시 나타나지 않습니다. 기본 클래스, 키 스타일 및 동작은 유연성과 모바일 우선 접근 방식을 위해 조정되었습니다. 다음은 일부 목록입니다.

  • 기본적으로 텍스트 기반 양식 컨트롤은 이제 최소한의 스타일만 받습니다. 초점 색상과 둥근 모서리 .form-control의 경우 요소의 클래스를 스타일에 적용합니다.
  • 클래스가 적용된 텍스트 기반 양식 컨트롤 .form-control은 이제 기본적으로 너비가 100%입니다. <div class="col-*"></div>입력 너비를 제어하기 위해 입력을 내부로 래핑 합니다.
  • .badge더 이상 컨텍스트(-success,-primary 등) 클래스가 없습니다.
  • .btn.btn-default"기본" 버튼을 가져오는 데도 사용해야 합니다.
  • .row이제 유동적입니다.
  • 이미지는 기본적으로 더 이상 반응하지 않습니다. .img-responsive유체 <img>크기 에 사용하십시오 .
  • 이제 아이콘 .glyphicon은 글꼴 기반입니다. 아이콘에는 기본 및 아이콘 클래스(예: .glyphicon .glyphicon-asterisk)도 필요합니다.
  • Typeahead는 Twitter Typeahead 를 사용하기 위해 삭제되었습니다 .
  • 모달 마크업이 크게 변경되었습니다. 이제 더 나은 모바일 스타일 및 동작을 위해 , .modal-header및 .modal-body섹션 .modal-footer이 래핑됩니다 . 또한 마크업에서 더 이상 에 적용해서는 안 됩니다 ..modal-content.modal-dialog.hide.modal
  • v3.1.0 부터 remotemodal 옵션 에 의해 로드된 HTML 은 이제 . 이렇게 하면 모달 본문뿐만 아니라 모달의 머리글과 바닥글도 쉽게 변경할 수 있습니다..modal-content.modal.modal-body
  • button.js 플러그인의 체크박스 및 라디오 기능은 이제 마크업 data-toggle="buttons"대신 data-toggle="buttons-checkbox"또는 data-toggle="buttons-radio"마크업에서 사용합니다.
  • JavaScript 이벤트는 네임스페이스가 지정됩니다. 예를 들어 모달 "show" 이벤트를 처리하려면 'show.bs.modal'. "표시된" 탭 'shown.bs.tab'의 경우 등을 사용합니다.

v3.0으로 업그레이드하는 방법과 커뮤니티의 코드 조각에 대한 자세한 내용은 Bootply 를 참조하십시오 .