Migrasi saka 2.x menyang 3.0

Bootstrap 3 ora kompatibel karo v2.x. Gunakake bagean iki minangka pandhuan umum kanggo nganyarke saka v2.x kanggo v3.0. Kanggo ringkesan sing luwih jembar, deleng apa sing anyar ing woro-woro rilis v3.0.

Owah-owahan kelas utama

Tabel iki nuduhake owah-owahan gaya antarane v2.x lan 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 Dibagi menyang.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dibagi menyang.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

Apa anyar

Kita wis nambah unsur anyar lan ngganti sawetara sing wis ana. Punika gaya anyar utawa dianyari.

unsur Katrangan
Panel .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Dhaptar klompok .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Kothak ekstra cilik (<768px) .col-xs-*
Kothak cilik (≥768px) .col-sm-*
Kothak medium (≥992px) .col-md-*
Kothak gedhe (≥1200px) .col-lg-*
Kelas utilitas responsif (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Narik .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Ukuran dhuwur input .input-sm .input-lg
Klompok input .input-group .input-group-addon .input-group-btn
Kontrol formulir .form-control .form-group
Ukuran klompok tombol .btn-group-xs .btn-group-sm .btn-group-lg
Navbar teks .navbar-text
Navbar header .navbar-header
Tab / pil sing dibenerake .nav-justified
Gambar responsif .img-responsive
Larik tabel kontekstual .success .danger .warning .active .info
Panel kontekstual .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Gambar cilik .img-thumbnail
Inggih ukuran .well-sm .well-lg
pranala tandha .alert-link

Apa sing dibusak

Unsur ing ngisor iki wis dropped utawa diganti ing v3.0.

unsur Dibusak saka 2.x 3.0 Setara
Tumindak wangun .form-actions N/A
Formulir telusuran .form-search N/A
Nggawe grup kanthi info .control-group.info N/A
Ukuran input jembar tetep .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gunakake .form-controllan sistem kothak tinimbang.
Input formulir level blok .input-block-level Ora setara langsung, nanging kontrol formulir padha.
Tombol kuwalik .btn-inverse N/A
Cairan baris .row-fluid .row(ora ana grid tetep)
Kontrol bungkus .controls N/A
Kontrol baris .controls-row .rowutawa.form-group
Navbar batin .navbar-inner N/A
Pembagi vertikal Navbar .navbar .divider-vertical N/A
Submenu gulung mudhun .dropdown-submenu N/A
Alignments tab .tabs-left .tabs-right .tabs-below N/A
Area tabable adhedhasar pil .pill-content .tab-content
Panel area tabable adhedhasar pil .pill-pane .tab-pane
dhaptar Nav .nav-list .nav-header Ora padha langsung, nanging dhaptar grup lan .panel-groups padha.
Bantuan inline kanggo kontrol formulir .help-inline Ora padha persis, nanging .help-blockpadha.
Warna kemajuan non-bar-level .progress-info .progress-success .progress-warning .progress-danger Gunakake .progress-bar-*ing .progress-bartinimbang.

Cathetan tambahan

Owah-owahan liyane ing v3.0 ora langsung katon. Kelas dhasar, gaya utama, lan prilaku wis disetel kanggo keluwesan lan pendekatan pisanan seluler kita. Punika dhaptar parsial:

  • Kanthi gawan, kontrol formulir adhedhasar teks saiki mung nampa gaya minimal. Kanggo werna fokus lan sudhut dibunderaké, aplikasi .form-controlkelas ing unsur kanggo gaya.
  • Kontrol formulir adhedhasar teks kanthi .form-controlkelas sing diterapake saiki ambane 100% kanthi standar. Lebokake input ing jero <div class="col-*"></div>kanggo ngontrol lebar input.
  • .badgeora ana maneh kelas kontekstual (-success,-primary, etc.).
  • .btnuga kudu digunakake .btn-defaultkanggo njaluk tombol "standar".
  • .rowsaiki cair.
  • Gambar ora responsif maneh kanthi standar. Gunakake kanggo ukuran .img-responsivecairan .<img>
  • Ikon, saiki .glyphicon, saiki adhedhasar font. Ikon uga mbutuhake kelas dhasar lan lambang (contone .glyphicon .glyphicon-asterisk).
  • Typeahead wis dibuwang, kanggo nggunakake Twitter Typeahead .
  • Markup modal wis owah sacara signifikan. Bagian .modal-header, .modal-body, lan .modal-footerbagean saiki wis dibungkus .modal-contentlan .modal-dialogkanggo gaya lan prilaku seluler sing luwih apik. .hideUga, sampeyan ora kudu ditrapake maneh .modaling markup sampeyan.
  • Ing v3.1.0, HTML sing dimuat dening remoteopsi modal saiki disuntikake menyang .modal-content(saka v3.0.0 kanggo v3.0.3, menyang .modal) tinimbang menyang .modal-body. Iki ngidini sampeyan uga gampang beda-beda header lan footer saka modal, ora mung awak modal.
  • Fitur kothak lan radio saka plugin button.js saiki digunakake data-toggle="buttons"tinimbang data-toggle="buttons-checkbox"utawa data-toggle="buttons-radio"ing markup.
  • Acara JavaScript diwenehi spasi. Contone, kanggo nangani acara "show" modal, gunakake 'show.bs.modal'. Kanggo tab "dituduhake" nggunakake 'shown.bs.tab', etc.

Kanggo informasi luwih lengkap babagan upgrade kanggo v3.0, lan kode snippet saka masyarakat, se Bootply .