2.x ਤੋਂ 3.0 ਤੱਕ ਮਾਈਗਰੇਟ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਬੂਟਸਟਰੈਪ 3 v2.x ਦੇ ਨਾਲ ਪਿੱਛੇ ਵੱਲ ਅਨੁਕੂਲ ਨਹੀਂ ਹੈ। ਇਸ ਭਾਗ ਨੂੰ v2.x ਤੋਂ v3.0 ਤੱਕ ਅੱਪਗਰੇਡ ਕਰਨ ਲਈ ਇੱਕ ਆਮ ਗਾਈਡ ਵਜੋਂ ਵਰਤੋ। ਇੱਕ ਵਿਆਪਕ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਲਈ, ਵੇਖੋ ਕਿ v3.0 ਰੀਲੀਜ਼ ਘੋਸ਼ਣਾ ਵਿੱਚ ਨਵਾਂ ਕੀ ਹੈ।

ਮੁੱਖ ਕਲਾਸ ਬਦਲਾਅ

ਇਹ ਸਾਰਣੀ v2.x ਅਤੇ v3.0 ਦੇ ਵਿਚਕਾਰ ਸ਼ੈਲੀ ਦੇ ਬਦਲਾਅ ਦਿਖਾਉਂਦਾ ਹੈ।

ਬੂਟਸਟਰੈਪ 2.x ਬੂਟਸਟਰੈਪ 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-text
ਨਵਬਾਰ ਸਿਰਲੇਖ .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-inner N/A
ਨਵਬਾਰ ਵਰਟੀਕਲ ਡਿਵਾਈਡਰ .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-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
  • remotev3.1.0 ਤੱਕ, ਮਾਡਲ ਵਿਕਲਪ ਦੁਆਰਾ ਲੋਡ ਕੀਤੇ ਗਏ HTML ਨੂੰ ਹੁਣ ਵਿੱਚ ਦੀ ਬਜਾਏ .modal-content(v3.0.0 ਤੋਂ v3.0.3 ਤੱਕ, ਵਿੱਚ .modal) ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਗਿਆ ਹੈ .modal-body। ਇਹ ਤੁਹਾਨੂੰ ਮਾਡਲ ਦੇ ਸਿਰਲੇਖ ਅਤੇ ਫੁੱਟਰ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਬਦਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਨਾ ਕਿ ਸਿਰਫ਼ ਮਾਡਲ ਬਾਡੀ.
  • button.js ਪਲੱਗਇਨ ਦੇ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੁਣ ਉਹਨਾਂ ਦੇ ਮਾਰਕਅੱਪ data-toggle="buttons"ਦੀ ਬਜਾਏ data-toggle="buttons-checkbox"ਜਾਂ ਉਹਨਾਂ ਵਿੱਚ ਵਰਤਦੀਆਂ ਹਨ।data-toggle="buttons-radio"
  • JavaScript ਇਵੈਂਟਸ ਨੇਮਸਪੇਸ ਵਿੱਚ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਮਾਡਲ "ਸ਼ੋ" ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ, ਵਰਤੋ 'show.bs.modal'। ਟੈਬਾਂ ਲਈ "ਦਿਖਾਈ ਗਈ" ਵਰਤੋਂ 'shown.bs.tab', ਆਦਿ।

v3.0 'ਤੇ ਅੱਪਗ੍ਰੇਡ ਕਰਨ ਅਤੇ ਕਮਿਊਨਿਟੀ ਤੋਂ ਕੋਡ ਸਨਿੱਪਟ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਬੂਟਪਲਾਈ ਦੇਖੋ ।