A’ gluasad bho 2.x gu 3.0

Chan eil Bootstrap 3 co-chòrdail air ais ri v2.x. Cleachd an earrann seo mar stiùireadh coitcheann airson ùrachadh bho v2.x gu v3.0. Airson sealladh farsaing nas fharsainge, faic na tha ùr san fhoillseachadh v3.0 release.

Atharrachaidhean mòra ann an clas

Tha an clàr seo a' sealltainn nan atharrachaidhean stoidhle eadar 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 Roinn a-steach.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Roinn a-steach.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

Dè tha ùr

Tha sinn air eileamaidean ùra a chur ris agus air feadhainn a th’ ann mu thràth atharrachadh. Seo na stoidhlichean ùra no ùraichte.

Eileamaid Tuairisgeul
Panalan .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Dèan liosta de bhuidhnean .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Grid bheag a bharrachd (<768px) .col-xs-*
Grid bheag (≥768px) .col-sm-*
Grid meadhanach (≥992px) .col-md-*
Clèithe mòr (≥1200px) .col-lg-*
Clasaichean goireasan freagairteach (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Brùth .col-sm-push-* .col-md-push-* .col-lg-push-*
Tarraing .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Meudan àirde cuir a-steach .input-sm .input-lg
Buidhnean cuir a-steach .input-group .input-group-addon .input-group-btn
Foirmean smachd a .form-control .form-group
Meud buidheann putanan .btn-group-xs .btn-group-sm .btn-group-lg
Teacs navbar .navbar-text
Ceann-cinn navbar .navbar-header
Tabaichean / pills air am fìreanachadh .nav-justified
Dealbhan freagairteach .img-responsive
Sreathan clàr co-theacsail .success .danger .warning .active .info
Pannalan co-theacsail .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Dealbh mion-dhealbh .img-thumbnail
Meudan math .well-sm .well-lg
Ceanglaichean rabhaidh .alert-link

Dè tha air a thoirt air falbh

Chaidh na h-eileamaidean a leanas a leigeil sìos no atharrachadh ann an v3.0.

Eileamaid Air a thoirt air falbh bho 2.x 3.0 Co-ionann
Foirm gnìomhan .form-actions Chan eil
Foirm lorg .form-search Chan eil
Luchdaich a-nuas am buidheann le fiosrachadh .control-group.info Chan eil
Meudan cuir a-steach leud stèidhichte .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Cleachd .form-controlagus an siostam clèithe na àite.
Cuir a-steach foirm ìre bloc .input-block-level Chan eil co-ionann dìreach ann, ach tha smachdan fhoirmean coltach.
Putanan inverse .btn-inverse Chan eil
Sreath fluid .row-fluid .row(chan eil cliath stèidhichte nas motha)
A 'cumail smachd air wrapper .controls Chan eil
Sreath smachd .controls-row .rowneo.form-group
Navbar a-staigh .navbar-inner Chan eil
Roinnean inghearach Navbar .navbar .divider-vertical Chan eil
Fo-chlàr tuiteam-sìos .dropdown-submenu Chan eil
Co-thaobhadh tab .tabs-left .tabs-right .tabs-below Chan eil
Raon tabable stèidhichte air pill .pill-content .tab-content
Pane sgìre tabable stèidhichte air pill .pill-pane .tab-pane
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • Mar v3.1.0, tha an HTML air a luchdachadh leis an remoteroghainn modal a-nis air a chuir a-steach don .modal-content(bho v3.0.0 gu v3.0.3, a-steach don .modal) an àite a-steach don fhaidhle .modal-body. Leigidh seo leat cuideachd bann-cinn is bonn-coise a’ mhodail atharrachadh gu furasta, chan e dìreach am buidheann modal.
  • Bidh am bogsa sgrùdaidh agus feartan rèidio plugan button.js a-nis a’ cleachdadh data-toggle="buttons"an àite data-toggle="buttons-checkbox"no data-toggle="buttons-radio"nan comharradh.
  • Tha ainmean aig tachartasan JavaScript. Mar eisimpleir, gus an tachartas "taisbeanadh" modal a làimhseachadh, cleachd 'show.bs.modal'. Airson tabaichean “air an sealltainn”, cleachd 'shown.bs.tab', msaa.

Airson tuilleadh fiosrachaidh mu ùrachadh gu v3.0, agus criomagan còd bhon choimhearsnachd, faic Bootply .