Aistriú ó 2.x go 3.0

Níl Bootstrap 3 comhoiriúnach ar an gcúl le v2.x. Úsáid an chuid seo mar threoir ghinearálta maidir le huasghrádú ó v2.x go v3.0. Le haghaidh forbhreathnú níos leithne, féach cad atá nua sa bhfógra scaoileadh v3.0.

Athruithe móra ranga

Taispeánann an tábla seo na hathruithe stíle idir v2.x agus 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 Scoilt isteach.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Scoilt isteach.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

Cad atá nua

Táimid tar éis gnéithe nua a chur leis agus roinnt cinn atá ann cheana féin a athrú. Seo iad na stíleanna nua nó nuashonraithe.

Eilimint Cur síos
Painéil .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Liostaigh na grúpaí .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Greille bheag bhreise (<768px) .col-xs-*
Greille bheag (≥768px) .col-sm-*
eangach mheánach (≥992px) .col-md-*
Greille mhór (≥1200px) .col-lg-*
Ranganna fóntais sofhreagracha (≥1200px) .visible-lg .hidden-lg
Fritháireamh .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Brúigh .col-sm-push-* .col-md-push-* .col-lg-push-*
Tarraingt .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Méideanna airde ionchuir .input-sm .input-lg
Grúpaí ionchuir .input-group .input-group-addon .input-group-btn
Rialuithe foirm .form-control .form-group
Méideanna grúpa cnaipí .btn-group-xs .btn-group-sm .btn-group-lg
Téacs Navbar .navbar-text
Ceanntásc Navbar .navbar-header
Cluaisíní / pills údar .nav-justified
Íomhánna sofhreagracha .img-responsive
Sraitheanna tábla comhthéacsúla .success .danger .warning .active .info
Painéil chomhthéacsúla .panel-success .panel-danger .panel-warning .panel-info
Módúil .modal-dialog .modal-content
Íomhá mionsamhla .img-thumbnail
Toisí méideanna .well-sm .well-lg
Naisc foláirimh .alert-link

Cad atá bainte

Tá na heilimintí seo a leanas tite nó athraithe in v3.0.

Eilimint Bainte as 2.x 3.0 Coibhéis
Foirm gníomhartha .form-actions N / A
Foirm chuardaigh .form-search N / A
Grúpa foirm le faisnéis .control-group.info N / A
Méideanna ionchuir ar leithead seasta .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Úsáid .form-controlagus an córas greille ina ionad.
Ionchur foirm leibhéal bloc .input-block-level Níl aon choibhéis dhíreach ann, ach tá rialuithe foirmeacha cosúil.
Cnaipí inbhéartacha .btn-inverse N / A
Sraith sreabhach .row-fluid .row(gan greille seasta níos mó)
Rialuithe fillteán .controls N / A
Rialuithe as a chéile .controls-row .rownó.form-group
Navbar istigh .navbar-inner N / A
Roinneoirí ingearacha Navbar .navbar .divider-vertical N / A
Fo-roghchlár anuas .dropdown-submenu N / A
Ailínithe cluaisíní .tabs-left .tabs-right .tabs-below N / A
Pill-bhunaithe limistéar tabable .pill-content .tab-content
Pána limistéar tabable bunaithe ar pill .pill-pane .tab-pane
Liostaí Nav .nav-list .nav-header Níl aon choibhéis dhíreach ann, ach tá liostaí grúpaí agus .panel-groups cosúil le chéile.
Cabhair inlíne le haghaidh rialuithe foirmeacha .help-inline Uimh comhionann cruinn, ach .help-blocktá sé cosúil.
Dathanna dul chun cinn gan leibhéal barra .progress-info .progress-success .progress-warning .progress-danger Bain úsáid as .progress-bar-*ar an .progress-barionad.

Nótaí breise

Níl athruithe eile ar v3.0 le feiceáil láithreach. Tá bunranganna, príomhstíleanna agus iompraíochtaí coigeartaithe le haghaidh solúbthachta agus lenár gcur chuige soghluaiste ar dtús . Seo liosta páirteach:

  • De réir réamhshocraithe, ní fhaigheann rialuithe foirm téacs-bhunaithe ach stíleáil íosta. Le haghaidh dathanna fócais agus coirnéil chothromú, cuir an .form-controlrang ar an eilimint i bhfeidhm ar an stíl.
  • Tá rialuithe foirm bunaithe ar théacs leis an .form-controlrang curtha i bhfeidhm anois 100% ar leithead de réir réamhshocraithe. Wrap ionchuir taobh istigh <div class="col-*"></div>a rialú leithead ionchuir.
  • .badgeníl ranganna comhthéacsúla (-rath,-bunscoile, srl.) ann a thuilleadh.
  • .btnNí mór a úsáid freisin .btn-defaulta fháil ar an "réamhshocraithe" a bhrú.
  • .rowis sreabhach anois.
  • Níl íomhánna sofhreagrach de réir réamhshocraithe a thuilleadh. Úsáid .img-responsivele haghaidh méid sreabhach <img>.
  • Tá na deilbhíní, anois .glyphicon, clóbhunaithe anois. Éilíonn deilbhíní freisin bonn agus rang deilbhín (m.sh. .glyphicon .glyphicon-asterisk).
  • Tá Typeahead tite, i bhfabhar úsáid a bhaint as Twitter Typeahead .
  • Tá athrú suntasach tagtha ar mharcáil mhódúil. Tá an .modal-header, .modal-body, agus .modal-footerna hailt fillte anois .modal-contentagus .modal-dialogar mhaithe le stíliú agus iompar soghluaiste níos fearr. Chomh maith leis sin, níor cheart duit iarratas .hidea dhéanamh ar .modaldo mharcáil a thuilleadh.
  • Ó v3.1.0, tá an HTML luchtaithe ag an remoterogha módúil anois instealladh isteach sa .modal-content(ó v3.0.0 go v3.0.3, isteach sa .modal) ​​in ionad isteach sa .modal-body. Ligeann sé seo duit freisin ceanntásc agus buntásc an mhodha a athrú go héasca, ní hamháin an corp módúil.
  • Úsáideann ticbhosca agus gnéithe raidió an bhreiseáin button.js anois data-toggle="buttons"in ionad data-toggle="buttons-checkbox"nó data-toggle="buttons-radio"ina mharcáil.
  • Tá spásanna ag imeachtaí JavaScript. Mar shampla, chun an t-imeacht "seó" módúil a láimhseáil, bain úsáid as 'show.bs.modal'. Le haghaidh cluaisíní "léirithe" úsáid 'shown.bs.tab', etc.

Le haghaidh tuilleadh faisnéise ar uasghrádú go v3.0, agus gearrthóga cód ón bpobal, féach Bootply .