Prehod iz 2.x na 3.0

Bootstrap 3 ni združljiv za nazaj z različico 2.x. Uporabite ta razdelek kot splošni vodnik za nadgradnjo z v2.x na v3.0. Za širši pregled si oglejte, kaj je novega v obvestilu o izdaji v3.0.

Glavne spremembe razreda

Ta tabela prikazuje spremembe sloga med v2.x in 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 Razdeljen na.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Razdeljen na.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

Kaj je novega

Dodali smo nove elemente in spremenili nekatere obstoječe. Tukaj so novi ali posodobljeni slogi.

Element Opis
Plošče .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Seznam skupin .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifikoni .glyphicon
Jumbotron .jumbotron
Zelo majhna mreža (<768 slikovnih pik) .col-xs-*
Majhna mreža (≥768 slikovnih pik) .col-sm-*
Srednja mreža (≥992 slikovnih pik) .col-md-*
Velika mreža (≥1200 slikovnih pik) .col-lg-*
Odzivni uporabniški razredi (≥1200 slikovnih pik) .visible-lg .hidden-lg
Odmiki .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Potisni .col-sm-push-* .col-md-push-* .col-lg-push-*
Potegni .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Vnesite višine velikosti .input-sm .input-lg
Vhodne skupine .input-group .input-group-addon .input-group-btn
Kontrolniki obrazcev .form-control .form-group
Velikosti skupin gumbov .btn-group-xs .btn-group-sm .btn-group-lg
Navbar besedilo .navbar-text
Glava vrstice Navbar .navbar-header
Upravičene zavihke / tablete .nav-justified
Odzivne slike .img-responsive
Kontekstualne vrstice tabele .success .danger .warning .active .info
Kontekstualne plošče .panel-success .panel-danger .panel-warning .panel-info
Modalno .modal-dialog .modal-content
Sličica .img-thumbnail
Velikosti vodnjakov .well-sm .well-lg
Opozorilne povezave .alert-link

Kaj je odstranjeno

Naslednji elementi so bili v različici 3.0 opuščeni ali spremenjeni.

Element Odstranjeno iz 2.x 3.0 Enakovredno
Dejanja obrazca .form-actions N/A
Iskalni obrazec .form-search N/A
Oblikujte skupino z informacijami .control-group.info N/A
Vnosne velikosti s fiksno širino .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Namesto tega uporabite .form-controlin sistem mreže .
Vnos obrazca na ravni bloka .input-block-level Ni neposrednega ekvivalenta, vendar so kontrolniki obrazcev podobni.
Inverzni gumbi .btn-inverse N/A
Tekoči niz .row-fluid .row(ni več fiksne mreže)
Kontrolni ovoj .controls N/A
Nadzorna vrstica .controls-row .rowoz.form-group
Navbar notranja .navbar-inner N/A
Navpični delilniki Navbar .navbar .divider-vertical N/A
Spustni podmeni .dropdown-submenu N/A
Poravnave zavihkov .tabs-left .tabs-right .tabs-below N/A
Območje za zavihke na osnovi tablet .pill-content .tab-content
Podokno z zavihki na osnovi tablet .pill-pane .tab-pane
Nav seznami .nav-list .nav-header Ni neposrednega ekvivalenta, vendar so skupine seznamov in .panel-groups podobni.
Vgrajena pomoč za kontrolnike obrazcev .help-inline Ni natančnega ekvivalenta, je pa .help-blockpodoben.
Barve napredka brez vrstice .progress-info .progress-success .progress-warning .progress-danger Namesto tega uporabite .progress-bar-*na ..progress-bar

Dodatne opombe

Druge spremembe v v3.0 niso takoj vidne. Osnovni razredi, ključni slogi in vedenja so bili prilagojeni za prilagodljivost in naš mobilni prvi pristop. Tukaj je delni seznam:

  • Kontrolniki obrazcev, ki temeljijo na besedilu, so zdaj privzeto le minimalno oblikovani. Za barve fokusa in zaobljene vogale uporabite .form-controlrazred na elementu za slog.
  • Besedilni kontrolniki obrazca z uporabljenim .form-controlrazredom so zdaj privzeto široki 100 %. Zavijte vnose v notranjost <div class="col-*"></div>, da nadzirate širine vnosa.
  • .badgenima več kontekstualnih (-uspeh,-primarni, itd..) razredov.
  • .btnmorate uporabiti tudi .btn-defaultza pridobitev gumba "privzeto".
  • .rowzdaj je tekoča.
  • Slike se privzeto ne odzivajo več. Uporabite za velikost .img-responsivetekočine .<img>
  • Ikone zdaj .glyphicontemeljijo na pisavah. Ikone zahtevajo tudi osnovo in razred ikon (npr. .glyphicon .glyphicon-asterisk).
  • Typeahead je bil opuščen v korist uporabe Twitter Typeahead .
  • Modalna oznaka se je bistveno spremenila. .modal-headerRazdelki , .modal-body, in so .modal-footerzdaj oviti v .modal-contentin .modal-dialogza boljši mobilni stil in obnašanje. Prav tako se ne smete več nanašati .hidena .modalv svoji oznaki.
  • Od različice 3.1.0 je HTML, ki ga naloži remotemodalna možnost, zdaj vstavljen v .modal-content(od v3.0.0 do v3.0.3 v .modal) namesto v .modal-body. To vam omogoča tudi enostavno spreminjanje glave in noge modala, ne le telesa modala.
  • Funkcije potrditvenega polja in radia vtičnika button.js se zdaj uporabljajo data-toggle="buttons"namesto data-toggle="buttons-checkbox"ali data-toggle="buttons-radio"v svojih oznakah.
  • Dogodki JavaScript so v imenskem prostoru. Na primer, za obravnavo modalnega dogodka "show" uporabite 'show.bs.modal'. Za "prikazane" zavihke uporabite 'shown.bs.tab'itd.

Za več informacij o nadgradnji na v3.0 in izrezke kode iz skupnosti glejte Bootply .