Na-akwaga site na 2.x gaa na 3.0

Bootstrap 3 adabaghị azụ na v2.x. Jiri ngalaba a dịka ntuziaka izugbe maka ịkwalite site na v2.x ruo v3.0. Maka nkọwa sara mbara, hụ ihe dị ọhụrụ na ọkwa mwepụta v3.0.

Isi klaasị mgbanwe

Tebụlụ a na-egosi mgbanwe ụdị n'etiti v2.x na v3.0.

Ihe mkpuchi 2.x Ihe mkpuchi 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 Kewaa n'ime.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Kewaa n'ime.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

Kedu nke pụtara ọhụrụ

Anyị atụkwasịla ihe ọhụrụ wee gbanwee ụfọdụ ndị dị adị. Nke a bụ ụdị ọhụrụ ma ọ bụ emelitere.

Ihe Nkọwa
Ogwe .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Ndepụta otu .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Obere okporo ụzọ (<768px) .col-xs-*
Obere okporo (≥768px) .col-sm-*
Ọkara grid (≥992px) .col-md-*
Nnukwu grid (≥1200px) .col-lg-*
Klas mkpa na-anabata (≥1200px) .visible-lg .hidden-lg
Akwụsịtụ .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Kwaa .col-sm-push-* .col-md-push-* .col-lg-push-*
Dọọ .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Ntinye ogo nha .input-sm .input-lg
Otu ntinye .input-group .input-group-addon .input-group-btn
Njikwa ụdị .form-control .form-group
Nha otu bọtịnụ .btn-group-xs .btn-group-sm .btn-group-lg
Ederede navbar .navbar-text
nkụnye eji isi mee Navbar .navbar-header
Taabụ/ ọgwụ ndị ezi omume .nav-justified
Onyonyo na-anabata .img-responsive
Ahịrị okpokoro ihe gbasara okwu .success .danger .warning .active .info
Ogwe ihe atụ .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Onyonyo ntakiri .img-thumbnail
Ogo nha .well-sm .well-lg
Njikọ ntanye .alert-link

Kedu ihe ewepụrụ

Atufuru ma ọ bụ gbanwee ihe ndị a na v3.0.

Ihe Ewepụrụ na 2.x 3.0 Dakọtara
Ụdị omume .form-actions N/A
Ụdị ọchụchọ .form-search N/A
Mepụta otu nwere ozi .control-group.info N/A
Nha ntinye obosara kwụziri .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Jiri .form-controlna usoro grid kama.
Ntinye ụdị ọkwa ngọngọ .input-block-level Ọ nweghị ihe dakọtara, mana njikwa ụdị yiri ya.
bọtịnụ ntụgharị .btn-inverse N/A
Ahịrị mmiri mmiri .row-fluid .row(Ọ dịghị grid a kapịrị ọnụ ọzọ)
Ihe mkpuchi na-achịkwa .controls N/A
Na-achịkwa ahịrị .controls-row .rowma ọ bụ.form-group
Navbar n'ime .navbar-inner N/A
Ndị nkesa kwụ ọtọ navbar .navbar .divider-vertical N/A
Ndabere n'okpuru menu .dropdown-submenu N/A
Ndozi tab .tabs-left .tabs-right .tabs-below N/A
Mpaghara tabbụ dabere na pill .pill-content .tab-content
Mpempe mpaghara tabbable dabere na pill .pill-pane .tab-pane
Ndepụta ụgbọ mmiri .nav-list .nav-header Ọnweghị ihe nhata, mana otu ndepụta na .panel-groups yitere.
Enyemaka inline maka njikwa ụdị .help-inline Ọ nweghị ihe ọ bụla dabara, mana ọ .help-blockbụ otu.
Agba ọganihu na-abụghị ọkwa mmanya .progress-info .progress-success .progress-warning .progress-danger Jiri .progress-bar-*na .progress-barkama.

ndetu ndị ọzọ

Mgbanwe ndị ọzọ na v3.0 anaghị apụta ozugbo. Edozigharịrị klaasị ntọala, ụdị isi, na omume maka mgbanwe yana ụzọ izizi ekwentị anyị . Nke a bụ ndepụta akụkụ:

  • Site na ndabara, njikwa ụdị dabere na ederede ugbu a na-enweta naanị nhazi obere. Maka agba agba agba agba na akụkụ gbara okirikiri, tinye .form-controlklaasị na mmewere ka ịke.
  • Njikwa ụdị ederede dabere na .form-controlklaasị etinyere ugbu a na ndabara 100% sara mbara. Kechie ntinye n'ime <div class="col-*"></div>iji jikwaa obosara ntinye.
  • .badgeenwekwaghị klaasị gburugburu (-ihe ịga nke ọma,-isi, wdg..) klaasị.
  • .btnga-ejikwa .btn-defaultiji nweta bọtịnụ "default".
  • .rowugbu a mmiri mmiri.
  • Onyonyo anaghịzi anabata na ndabara. Jiri .img-responsivemaka <img>nha mmiri.
  • Akara ngosi, ugbu a .glyphicon, dabere na font. Akara ngosi chọkwara klaasị ntọala na akara ngosi (dịka ọmụmaatụ .glyphicon .glyphicon-asterisk).
  • Ahapụla Typehead, na-akwado iji Twitter Typehead .
  • Usoro akara agbanweela nke ukwuu. Ndị .modal-header, .modal-body, na .modal-footerngalaba ugbu a ọbọ na .modal-contentmaka .modal-dialogmma mobile styling na omume. Ọzọkwa, ị gaghị etinye akwụkwọ .hidemaka .modalakara gị.
  • Dị ka nke v3.1.0, HTML nke ejiri remotenhọrọ modal tinye ugbu a n'ime .modal-content(site na v3.0.0 ruo v3.0.3, n'ime .modal) kama ịbanye na .modal-body. Nke a na-enye gị ohere ịdị mfe ịgbanwe nkụnye eji isi mee na ụkwụ nke modal, ọ bụghị naanị ahụ modal.
  • Igbe nrịbama na njirimara redio nke bọtịnụ.js ngwa mgbakwunye ugbu a na-eji data-toggle="buttons"ma data-toggle="buttons-checkbox"ọ bụ data-toggle="buttons-radio"na akara ha.
  • Emebere Javascript aha. Dịka ọmụmaatụ, iji jikwaa mmemme “show” modal, jiri 'show.bs.modal'. Maka taabụ "gosiri" jiri 'shown.bs.tab', wdg.

Maka ozi ndị ọzọ gbasara ịkwalite v3.0, yana koodu snippets sitere na obodo, lee Bootply .