Yin hijira daga 2.x zuwa 3.0

Bootstrap 3 baya dacewa da baya tare da v2.x. Yi amfani da wannan sashe azaman jagora na gaba ɗaya don haɓakawa daga v2.x zuwa v3.0. Don ƙarin bayani, duba abin da ke sabo a cikin sanarwar sakin v3.0.

Manyan manyan canje-canje

Wannan tebur yana nuna canjin salo tsakanin v2.x da 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 Raba cikin.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Raba cikin.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

Me ke faruwa

Mun ƙara sabbin abubuwa kuma mun canza wasu da ke akwai. Anan ga sabbin salo ko sabunta salo.

Abun ciki Bayani
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Jerin ƙungiyoyi .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Karamin grid (<768px) .col-xs-*
Karamin grid (≥768px) .col-sm-*
Matsakaici Grid (≥992px) .col-md-*
Babban grid (≥1200px) .col-lg-*
Azuzuwan masu amfani (≥1200px) .visible-lg .hidden-lg
Matsaloli .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Tura .col-sm-push-* .col-md-push-* .col-lg-push-*
Ja .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Girman tsayin shigarwa .input-sm .input-lg
Ƙungiyoyin shigarwa .input-group .input-group-addon .input-group-btn
Gudanar da tsari .form-control .form-group
Girman rukuni na maɓallin .btn-group-xs .btn-group-sm .btn-group-lg
Rubutun Navbar .navbar-text
Navbar kai .navbar-header
Tabbatacce tabs / kwayoyi .nav-justified
Hotuna masu amsawa .img-responsive
Layukan tebur na yanayi .success .danger .warning .active .info
Fannin yanayi .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Hoton ɗan yatsa .img-thumbnail
To masu girma dabam .well-sm .well-lg
Hanyoyin faɗakarwa .alert-link

Me aka cire

An jefar ko canza abubuwa masu zuwa a v3.0.

Abun ciki An cire daga 2.x 3.0 Daidai
Samar da ayyuka .form-actions N/A
Binciken tsari .form-search N/A
Ƙirƙiri ƙungiya tare da bayani .control-group.info N/A
Kafaffen-girman shigarwar nisa .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Yi amfani .form-controlda tsarin grid maimakon.
Toshe hanyar shigar da matakin matakin .input-block-level Babu daidai da kai tsaye, amma sarrafa sifofi iri ɗaya ne.
Maɓallai masu juyawa .btn-inverse N/A
Layin ruwa .row-fluid .row(babu tsayayyen grid)
Sarrafa abin rufewa .controls N/A
Sarrafa layi .controls-row .rowko.form-group
Navbar ciki .navbar-inner N/A
Navbar masu raba tsaye .navbar .divider-vertical N/A
Zazzage ƙaramin menu .dropdown-submenu N/A
Daidaita tab .tabs-left .tabs-right .tabs-below N/A
Wuri na tushen kwaya .pill-content .tab-content
Kunshin yanki na tushen kwaya .pill-pane .tab-pane
Jerin Nav .nav-list .nav-header Babu daidai da kai tsaye, amma ƙungiyoyin jeri da .panel-groups suna kama da juna.
Taimakon layi don sarrafa tsari .help-inline Babu daidai daidai, amma .help-blockyana kama da haka.
Launukan ci gaban matakin da ba matakin mashaya ba .progress-info .progress-success .progress-warning .progress-danger Yi amfani .progress-bar-*a .progress-barmaimakon.

Ƙarin bayanin kula

Sauran canje-canje a cikin v3.0 ba su bayyana nan da nan ba. An daidaita azuzuwan tushe, maɓalli, da ɗabi'u don sassauƙa da tsarin wayarmu ta farko . Ga wani bangare na jeri:

  • Ta hanyar tsoho, sarrafa nau'i na tushen rubutu yanzu suna karɓar salo kaɗan kawai. Don launukan mayar da hankali da sasanninta masu zagaye, yi amfani da .form-controlajin akan kashi zuwa salo.
  • Sarrafa nau'i na tushen rubutu tare da .form-controlajin da aka yi amfani da su yanzu sun yi faɗin 100% ta tsohuwa. Kunna abubuwan shigar ciki <div class="col-*"></div>don sarrafa faɗin shigarwar.
  • .badgeba shi da azuzuwan mahallin (-nasara,-na farko, da sauransu..)
  • .btndole ne kuma a yi amfani .btn-defaultda shi don samun maɓallin "default".
  • .rowyanzu ruwa ne.
  • Hotuna ba su da amsa ta tsohuwa. Yi amfani da girman .img-responsiveruwa .<img>
  • Gumakan, yanzu .glyphicon, yanzu suna tushen font. Gumaka kuma suna buƙatar tushe da ajin gunki (misali .glyphicon .glyphicon-asterisk).
  • An jefar da Typehead, don amfani da Twitter Typehead .
  • Modal alamar ta canza sosai. A .modal-header, .modal-body, da .modal-footersassan yanzu an nannade su .modal-contentkuma .modal-dialogdon ingantacciyar salo da halayyar wayar hannu. Hakanan, bai kamata ku ƙara nema .hidea .modalcikin alamarku ba.
  • Tun daga v3.1.0, HTML ɗin da aka ɗora ta remotehanyar zaɓin modal yanzu ana allura a cikin .modal-content(daga v3.0.0 zuwa v3.0.3, cikin .modal) maimakon cikin .modal-body. Wannan yana ba ku damar sauƙin bambanta kan kai da ƙafar modal, ba kawai jikin modal ba.
  • Akwatin rajistan shiga da fasalin rediyo na plugin ɗin button.js yanzu duka suna amfani da su data-toggle="buttons"maimakon data-toggle="buttons-checkbox"ko data-toggle="buttons-radio"a cikin alamar su.
  • Abubuwan da suka faru na JavaScript an raba suna. Misali, don sarrafa yanayin “show” taron, yi amfani da 'show.bs.modal'. Don shafuka "an nuna" amfani 'shown.bs.tab', da sauransu.

Don ƙarin bayani kan haɓakawa zuwa v3.0, da snippets code daga al'umma, duba Bootply .