Kusamuka kuchokera ku 2.x kupita ku 3.0

Bootstrap 3 sibwerera m'mbuyo yogwirizana ndi v2.x. Gwiritsani ntchito gawoli ngati kalozera wamba pakukweza kuchokera ku v2.x kupita ku v3.0. Kuti muwone mwachidule, onani zatsopano pakulengeza kwa v3.0.

Kusintha kwakukulu kwa kalasi

Gome ili likuwonetsa kusintha kwa kalembedwe pakati pa v2.x ndi 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 Gawani mkati.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Gawani mkati.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

Chatsopano ndi chiyani

Tawonjezera zatsopano ndikusintha zina zomwe zilipo kale. Nawa masitayelo atsopano kapena osinthidwa.

Chinthu Kufotokozera
Magulu .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lembani magulu .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Gridi yaying'ono yowonjezera (<768px) .col-xs-*
Gridi yaying'ono (≥768px) .col-sm-*
Gridi yapakati (≥992px) .col-md-*
Gululi wamkulu (≥1200px) .col-lg-*
Makalasi omvera othandizira (≥1200px) .visible-lg .hidden-lg
Zowonongeka .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Kankhani .col-sm-push-* .col-md-push-* .col-lg-push-*
Kokani .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Miyezo yautali wolowetsa .input-sm .input-lg
Magulu olowetsa .input-group .input-group-addon .input-group-btn
Kuwongolera mawonekedwe .form-control .form-group
Kukula kwamagulu a batani .btn-group-xs .btn-group-sm .btn-group-lg
Navbar mawu .navbar-text
Mutu wa Navbar .navbar-header
Ma tabu / mapiritsi ovomerezeka .nav-justified
Zithunzi zomvera .img-responsive
Mizere yatebulo yokhazikika .success .danger .warning .active .info
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Modali .modal-dialog .modal-content
Chithunzi chazithunzi .img-thumbnail
Ma size .well-sm .well-lg
Maulalo ochenjeza .alert-link

Zomwe zachotsedwa

Zinthu zotsatirazi zagwetsedwa kapena kusinthidwa mu v3.0.

Chinthu Zachotsedwa ku 2.x 3.0 Zofanana
Zochita za fomu .form-actions N / A
Fufuzani mawonekedwe .form-search N / A
Pangani gulu lokhala ndi zambiri .control-group.info N / A
Miyeso yolowetsa m'lifupi mwake .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gwiritsani ntchito .form-controlndi grid system m'malo mwake.
Lowetsani mawonekedwe a block level .input-block-level Palibe chofananira chachindunji, koma mawonekedwe amawu ndi ofanana.
Mabatani osintha .btn-inverse N / A
Mzere wamadzimadzi .row-fluid .row(palibenso gridi yokhazikika)
Amalamulira wrapper .controls N / A
Amawongolera mzere .controls-row .rowkapena.form-group
Navbar mkati .navbar-inner N / A
Navbar vertical dividers .navbar .divider-vertical N / A
submenu yotsitsa .dropdown-submenu N / A
Ma tabu ogwirizana .tabs-left .tabs-right .tabs-below N / A
Malo ogwiritsira ntchito mapiritsi .pill-content .tab-content
Mapiritsi okhala ndi taboble area pane .pill-pane .tab-pane
Nav mndandanda .nav-list .nav-header Palibe zofanana mwachindunji, koma mndandanda wamagulu ndi ma .panel-groups ndi ofanana.
Thandizo pa intaneti pakuwongolera mawonekedwe .help-inline Palibe chofanana, koma .help-blockchofanana.
Mitundu yopita patsogolo yopanda mipiringidzo .progress-info .progress-success .progress-warning .progress-danger Gwiritsani .progress-bar-*ntchito .progress-barm'malo mwake.

Zolemba zowonjezera

Zosintha zina mu v3.0 sizikuwoneka nthawi yomweyo. Makalasi oyambira, masitayelo ofunikira, ndi machitidwe asinthidwa kuti athe kusinthasintha komanso njira yathu yoyamba yolumikizira mafoni . Nawu mndandanda wapang'ono:

  • Mwachikhazikitso, maulamuliro otengera malemba tsopano amalandira masitayelo ochepa chabe. Kwa mitundu yolunjika ndi makona ozungulira, gwiritsani ntchito .form-controlkalasi pa chinthucho kuti chikhale kalembedwe.
  • Kuwongolera kwamawonekedwe otengera zolemba ndi .form-controlkalasi yomwe ikugwiritsidwa ntchito tsopano ndi 100% m'lifupi mwachisawawa. Mangirirani zolowetsa mkati <div class="col-*"></div>kuti muwongolere kukula kwake.
  • .badgealibenso makalasi (-kupambana, -primary, etc..)
  • .btnMuyenera kugwiritsanso ntchito .btn-defaultkuti mupeze batani la "default".
  • .rowtsopano ndi madzimadzi.
  • Zithunzi sizimayankhidwa mwachisawawa. Gwiritsani .img-responsiventchito <img>kukula kwamadzimadzi.
  • Zithunzizo, tsopano .glyphicon, zatengera zilembo. Zithunzi zimafunikanso gulu loyambira ndi lazithunzi (mwachitsanzo .glyphicon .glyphicon-asterisk).
  • Typeahead yagwetsedwa, mokomera kugwiritsa ntchito Twitter Typeahead .
  • Kuyika kwa Modal kwasintha kwambiri. The .modal-header, .modal-body, ndi .modal-footerzigawo tsopano zakutidwa .modal-contentndi .modal-dialogmasitayilo abwino a mafoni ndi machitidwe. Komanso, simuyeneranso kugwiritsa ntchito .hidepa .modalzolembera zanu.
  • Pofika pa v3.1.0, HTML yodzazidwa ndi njira ya remotemodal tsopano yalowetsedwa mu .modal-content(kuchokera ku v3.0.0 mpaka v3.0.3, kulowa mu .modal) m'malo mwa .modal-body. Izi zimakulolani kuti musinthe mosavuta mutu ndi pansi pa modal, osati thupi la modal.
  • Bokosi loyang'anira ndi mawayilesi a pulogalamu yowonjezera ya button.js tsopano onse akugwiritsa ntchito data-toggle="buttons"m'malo mwa data-toggle="buttons-checkbox"kapena data-toggle="buttons-radio"polembapo.
  • Zochitika za JavaScript zili ndi mayina. Mwachitsanzo, kuti mugwiritse ntchito "show" ya modal, gwiritsani ntchito 'show.bs.modal'. Kwa ma tabo "owonetsedwa" gwiritsani ntchito 'shown.bs.tab', ndi zina.

Kuti mudziwe zambiri za kukwezera ku v3.0, ndi ma code snippets ochokera kumudzi, onani Bootply .