Տեղափոխում 2.x-ից 3.0

Bootstrap 3-ը հետընթաց համատեղելի չէ v2.x-ի հետ: Օգտագործեք այս բաժինը որպես v2.x-ից v3.0-ի թարմացման ընդհանուր ուղեցույց: Ավելի լայն ակնարկի համար տես, թե ինչ նորություն կա v3.0 թողարկման հայտարարության մեջ:

Խոշոր դասակարգային փոփոխություններ

Այս աղյուսակը ցույց է տալիս ոճի փոփոխությունները v2.x-ի և 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 Բաժանվել.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Բաժանվել.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

Ինչ նորություն կա

Մենք ավելացրել ենք նոր տարրեր և փոխել որոշ գոյություն ունեցող տարրեր: Ահա նոր կամ թարմացված ոճերը:

Տարր Նկարագրություն
Վահանակներ .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Թվարկեք խմբերը .list-group .list-group-item .list-group-item-text .list-group-item-heading
Գլիֆիկոններ .glyphicon
Ջամբոտրոն .jumbotron
Շատ փոքր ցանց (<768px) .col-xs-*
Փոքր ցանց (≥768px) .col-sm-*
Միջին ցանց (≥992px) .col-md-*
Մեծ ցանց (≥1200px) .col-lg-*
Պատասխանատու օգտակար դասեր (≥1200px) .visible-lg .hidden-lg
Օֆսեթներ .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Հրել .col-sm-push-* .col-md-push-* .col-lg-push-*
Քաշեք .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Մուտքի բարձրության չափերը .input-sm .input-lg
Մուտքային խմբեր .input-group .input-group-addon .input-group-btn
Ձևերի վերահսկում .form-control .form-group
Կոճակների խմբի չափերը .btn-group-xs .btn-group-sm .btn-group-lg
Navbar տեքստը .navbar-text
Navbar-ի վերնագիր .navbar-header
Արդարացված ներդիրներ / հաբեր .nav-justified
Պատասխանատու պատկերներ .img-responsive
Համատեքստային աղյուսակի տողեր .success .danger .warning .active .info
Համատեքստային վահանակներ .panel-success .panel-danger .panel-warning .panel-info
Մոդալ .modal-dialog .modal-content
Մանրապատկերի պատկեր .img-thumbnail
Հորերի չափսերը .well-sm .well-lg
Զգուշացման հղումներ .alert-link

Ինչ է հեռացվել

Հետևյալ տարրերը հեռացվել կամ փոփոխվել են v3.0-ում:

Տարր Հեռացված է 2.x-ից 3.0 համարժեք
Ձևավորել գործողություններ .form-actions N/A
Որոնման ձև .form-search N/A
Տեղեկություններով խումբ կազմեք .control-group.info N/A
Ֆիքսված լայնության մուտքային չափեր .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Փոխարենը օգտագործեք .form-controlև ցանցային համակարգը :
Արգելափակման մակարդակի ձևի մուտքագրում .input-block-level Ուղիղ համարժեք չկա, բայց ձևերի վերահսկիչները նման են:
Հակադարձ կոճակներ .btn-inverse N/A
Հեղուկի շարք .row-fluid .row(այլևս ֆիքսված ցանց չկա)
Կառավարում է փաթաթան .controls N/A
Վերահսկում է տողը .controls-row .rowկամ.form-group
Navbar ներքին .navbar-inner N/A
Navbar ուղղահայաց բաժանարարներ .navbar .divider-vertical N/A
Բացվող ենթամենյու .dropdown-submenu N/A
Ներդիրների հավասարեցում .tabs-left .tabs-right .tabs-below N/A
Հաբերի վրա հիմնված աղյուսակային տարածք .pill-content .tab-content
Հաբերի վրա հիմնված ներդիրի տարածքի ապակի .pill-pane .tab-pane
Nav ցուցակներ .nav-list .nav-header Ուղիղ համարժեք չկա, բայց ցուցակային խմբերը և .panel-groups- երը նման են:
Ներկառուցված օգնություն ձևերի վերահսկման համար .help-inline Չկա ճշգրիտ համարժեք, բայց .help-blockնման է:
Ոչ բար մակարդակի առաջընթացի գույներ .progress-info .progress-success .progress-warning .progress-danger Օգտագործեք .progress-bar-*դրա .progress-barփոխարեն:

Լրացուցիչ նշումներ

v3.0-ի այլ փոփոխություններ անմիջապես ակնհայտ չեն: Հիմնական դասերը, հիմնական ոճերը և վարքագիծը ճշգրտվել են ճկունության և մեր բջջային առաջին մոտեցման համար: Ահա մասնակի ցուցակ.

  • Լռելյայնորեն, տեքստի վրա հիմնված ձևի վերահսկիչները այժմ ստանում են միայն նվազագույն ոճավորում: Ֆոկուսային գույների և կլորացված անկյունների համար կիրառեք .form-controlդասը տարրի վրա ոճավորելու համար:
  • Կիրառված դասի հետ տեքստային ձևերի կառավարիչները .form-controlայժմ լռելյայնորեն 100% լայնություն ունեն: Փաթեթավորեք մուտքերը ներսում <div class="col-*"></div>՝ մուտքային լայնությունները վերահսկելու համար:
  • .badgeայլևս չունի համատեքստային (-հաջողություն,-տարրական և այլն) դասեր:
  • .btnպետք է օգտագործել .btn-defaultնաև «կանխադրված» կոճակը ստանալու համար:
  • .rowայժմ հեղուկ է:
  • Պատկերները լռելյայն այլևս չեն արձագանքում: Օգտագործեք .img-responsiveհեղուկի <img>չափի համար:
  • Սրբապատկերներն այժմ .glyphicon, այժմ հիմնված են տառատեսակների վրա: Սրբապատկերները պահանջում են նաև բազային և պատկերակների դաս (օրինակ՝ .glyphicon .glyphicon-asterisk):
  • Typeahead-ը հանվել է՝ հօգուտ Twitter Typeahead- ի օգտագործման :
  • Մոդալ նշումը զգալիորեն փոխվել է: , .modal-header, .modal-bodyև .modal-footerհատվածներն այժմ փաթաթված են .modal-contentև .modal-dialogավելի լավ շարժական ոճի և վարքագծի համար: Բացի այդ, դուք այլևս չպետք է դիմեք .hideձեր .modalնշագրման համար:
  • v3.1.0-ի դրությամբ, remoteմոդալ տարբերակով բեռնված HTML-ն այժմ ներարկվում է .modal-content(v3.0.0-ից մինչև v3.0.3, .modal)-ի փոխարեն .modal-body. Սա թույլ է տալիս նաև հեշտությամբ փոփոխել մոդալի վերնագիրն ու ստորագիրը, այլ ոչ միայն մոդալ մարմինը:
  • Button.js plugin-ի վանդակը և ռադիոյի գործառույթներն այժմ օգտագործվում են իրենց նշագրման data-toggle="buttons"փոխարեն data-toggle="buttons-checkbox"կամ դրանց մեջ:data-toggle="buttons-radio"
  • JavaScript-ի իրադարձությունները անվանատարածված են: Օրինակ, մոդալ «ցուցադրել» իրադարձությունը կարգավորելու համար օգտագործեք 'show.bs.modal'. «Ցուցադրված» ներդիրների համար օգտագործեք 'shown.bs.tab'և այլն:

v3.0- ի թարմացման և համայնքի կոդի հատվածների մասին լրացուցիչ տեղեկությունների համար տե՛ս Bootply :