2.x'ten 3.0'a geçiş

Bootstrap 3, v2.x ile geriye dönük uyumlu değildir. Bu bölümü, v2.x'ten v3.0'a yükseltmek için genel bir kılavuz olarak kullanın. Daha geniş bir genel bakış için v3.0 sürüm duyurusundaki yeniliklere bakın.

Büyük sınıf değişiklikleri

Bu tablo, v2.x ve v3.0 arasındaki stil değişikliklerini gösterir.

Önyükleme 2.x Önyükleme 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 Böl.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Böl.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

Ne var ne yok

Yeni öğeler ekledik ve mevcut olanlardan bazılarını değiştirdik. İşte yeni veya güncellenmiş stiller.

eleman Tanım
Paneller .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Liste grupları .list-group .list-group-item .list-group-item-text .list-group-item-heading
glifonlar .glyphicon
Jumbotron .jumbotron
Ekstra küçük ızgara (<768 piksel) .col-xs-*
Küçük ızgara (≥768 piksel) .col-sm-*
Orta ızgara (≥992 piksel) .col-md-*
Büyük ızgara (≥1200 piksel) .col-lg-*
Duyarlı yardımcı program sınıfları (≥1200 piksel) .visible-lg .hidden-lg
Ofsetler .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
İtmek .col-sm-push-* .col-md-push-* .col-lg-push-*
Çekmek .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Giriş yüksekliği boyutları .input-sm .input-lg
Giriş grupları .input-group .input-group-addon .input-group-btn
Form kontrolleri .form-control .form-group
Düğme grubu boyutları .btn-group-xs .btn-group-sm .btn-group-lg
gezinme çubuğu metni .navbar-text
gezinme çubuğu başlığı .navbar-header
Yaslanmış sekmeler / haplar .nav-justified
Duyarlı görüntüler .img-responsive
Bağlamsal tablo satırları .success .danger .warning .active .info
bağlamsal paneller .panel-success .panel-danger .panel-warning .panel-info
kalıcı .modal-dialog .modal-content
Küçük resim .img-thumbnail
Kuyu boyutları .well-sm .well-lg
Uyarı bağlantıları .alert-link

Ne kaldırıldı

Aşağıdaki öğeler v3.0'da kaldırıldı veya değiştirildi.

eleman 2.x'ten kaldırıldı 3.0 Eşdeğeri
Form eylemleri .form-actions Yok
Arama Formu .form-search Yok
Bilgi içeren form grubu .control-group.info Yok
Sabit genişlikte giriş boyutları .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge .form-controlBunun yerine ızgara sistemini kullanın .
Blok seviyesi form girişi .input-block-level Doğrudan eşdeğeri yoktur, ancak form kontrolleri benzerdir.
Ters düğmeler .btn-inverse Yok
sıvı sıra .row-fluid .row(artık sabit ızgara yok)
Kontroller sarmalayıcı .controls Yok
Kontroller satırı .controls-row .rowveya.form-group
gezinme çubuğu iç .navbar-inner Yok
Navbar dikey bölücüler .navbar .divider-vertical Yok
Açılır alt menü .dropdown-submenu Yok
Sekme hizalamaları .tabs-left .tabs-right .tabs-below Yok
Hap bazlı sekmeli alan .pill-content .tab-content
Hap bazlı sekmeli alan bölmesi .pill-pane .tab-pane
Gezinme listeleri .nav-list .nav-header Doğrudan eşdeğeri yoktur, ancak liste grupları ve .panel-groups benzerdir.
Form kontrolleri için satır içi yardım .help-inline Tam eşdeğeri yoktur, ancak .help-blockbenzerdir.
Çubuk düzeyinde olmayan ilerleme renkleri .progress-info .progress-success .progress-warning .progress-danger .progress-bar-*Bunun yerine kullanın .progress-bar.

Ek Notlar

v3.0'daki diğer değişiklikler hemen belirgin değildir. Temel sınıflar, temel stiller ve davranışlar, esneklik ve mobil öncelikli yaklaşımımız için ayarlandı. İşte kısmi bir liste:

  • Varsayılan olarak, metin tabanlı form denetimleri artık yalnızca minimal stil alır. Odak renkleri ve yuvarlatılmış köşeler için, öğedeki .form-controlsınıfı stile uygulayın.
  • Uygulanan sınıfla birlikte metin tabanlı form kontrolleri .form-controlartık varsayılan olarak %100 geniştir. <div class="col-*"></div>Giriş genişliklerini kontrol etmek için girişleri içeriye sarın .
  • .badgeartık bağlamsal (-success,-primary,vb..) sınıfları yok.
  • .btn.btn-default"varsayılan" düğmesini almak için de kullanmalısınız .
  • .rowartık akışkandır.
  • Görüntüler artık varsayılan olarak yanıt vermiyor. .img-responsiveAkışkan <img>boyutu için kullanın .
  • Simgeler .glyphiconartık yazı tipi tabanlıdır. Simgeler ayrıca bir taban ve simge sınıfı gerektirir (örn .glyphicon .glyphicon-asterisk. ).
  • Typeahead, Twitter Typeahead kullanımı lehine düşürüldü .
  • Modal işaretleme önemli ölçüde değişti. , .modal-headerve .modal-bodybölümleri artık daha iyi mobil stil ve davranış için .modal-footersarmalanmıştır . Ayrıca, işaretlemenizde artık başvurmamalısınız ..modal-content.modal-dialog.hide.modal
  • v3.1.0'dan itibaren, modal seçenek tarafından yüklenen remoteHTML artık . Bu, yalnızca modal gövdesini değil, modun üstbilgisini ve altbilgisini de kolayca değiştirmenize olanak tanır..modal-content.modal.modal-body
  • button.js eklentisinin onay kutusu ve radyo özellikleri artık işaretlemeleri data-toggle="buttons"yerine data-toggle="buttons-checkbox"veya data-toggle="buttons-radio"işaretlemelerinde kullanılıyor.
  • JavaScript olayları ad alanlıdır. Örneğin, kalıcı "show" olayını işlemek için 'show.bs.modal'. "Gösterilen" sekmeler için 'shown.bs.tab'vb.

v3.0'a yükseltme ve topluluktan kod parçacıkları hakkında daha fazla bilgi için bkz . Bootply .