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

Bootstrap 3은 v2.x와 호환되지 않습니다. 이 섹션을 v2.x에서 v3.0으로 업그레이드하는 일반 가이드로 사용하세요. 더 광범위한 개요는 v3.0 릴리스 공지에서 새로운 기능을 참조하세요.

주요 클래스 변경

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

Bootstrap 2.x Bootstrap 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
Glyphicons .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-text
내비게이션 바 헤더 .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-inner 해당 없음
내비게이션 바 수직 구분선 .navbar .divider-vertical 해당 없음
드롭다운 하위 메뉴 .dropdown-submenu 해당 없음
탭 정렬 .tabs-left .tabs-right .tabs-below 해당 없음
필 기반 탭 가능 영역 .pill-content .tab-content
필 기반 탭 가능 영역 창 .pill-pane .tab-pane
내비게이션 목록 .nav-list .nav-header 직접적인 해당 항목은 없지만 목록 그룹 및 .panel-group이 유사합니다.
양식 컨트롤용 인라인 도움말 .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,etc..) 클래스가 없습니다.
  • .btn도 "기본" 버튼을 얻으려면 .btn-default를 사용해야 합니다.
  • .row는 이제 유동입니다.
  • 이미지는 더 이상 기본적으로 반응형이 아닙니다. 유동 <img> 크기에는 .img-responsive를 사용하세요.
  • 이제 .glyphicon인 아이콘은 이제 글꼴 기반입니다. 아이콘에는 기본 클래스와 아이콘 클래스도 필요합니다(예: .glyphicon .glyphicon-asterisk).
  • Typeahead는 Twitter Typeahead를 사용하는 것으로 대체되었습니다.
  • 모달 마크업이 크게 변경되었습니다. .modal-header, .modal-body 및 .modal-footer 섹션은 이제 더 나은 모바일 스타일링과 동작을 위해 .modal-content 및 .modal-dialog로 래핑됩니다. 또한 마크업에서 .modal에 .hide를 더 이상 적용하지 않아야 합니다.
  • v3.1.0부터 remote 모달 옵션으로 로드된 HTML은 이제 .modal-body 대신 .modal-content(v3.0.0에서 v3.0.3까지는 .modal)에 주입됩니다. 이를 통해 모달 본문뿐만 아니라 모달의 헤더와 푸터도 쉽게 변경할 수 있습니다.
  • button.js 플러그인의 체크박스 및 라디오 기능은 이제 마크업에서 data-toggle="buttons-checkbox" 또는 data-toggle="buttons-radio" 대신 data-toggle="buttons"를 모두 사용합니다.
  • JavaScript 이벤트는 네임스페이스됩니다. 예를 들어, 모달 "show" 이벤트를 처리하려면 'show.bs.modal'을 사용하세요. 탭의 "shown" 이벤트에는 'shown.bs.tab' 등을 사용하세요.

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