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 ಎನ್ / ಎ
ಹುಡುಕಾಟ ರೂಪ .form-search ಎನ್ / ಎ
ಮಾಹಿತಿಯೊಂದಿಗೆ ಗುಂಪನ್ನು ರೂಪಿಸಿ .control-group.info ಎನ್ / ಎ
ಸ್ಥಿರ-ಅಗಲ ಇನ್‌ಪುಟ್ ಗಾತ್ರಗಳು .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge .form-controlಬದಲಿಗೆ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸಿ .
ಬ್ಲಾಕ್ ಮಟ್ಟದ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ .input-block-level ನೇರ ಸಮಾನತೆಯಿಲ್ಲ, ಆದರೆ ಫಾರ್ಮ್‌ಗಳ ನಿಯಂತ್ರಣಗಳು ಹೋಲುತ್ತವೆ.
ವಿಲೋಮ ಗುಂಡಿಗಳು .btn-inverse ಎನ್ / ಎ
ದ್ರವ ಸಾಲು .row-fluid .row(ಇನ್ನು ಸ್ಥಿರ ಗ್ರಿಡ್ ಇಲ್ಲ)
ಕಂಟ್ರೋಲ್ ಹೊದಿಕೆ .controls ಎನ್ / ಎ
ನಿಯಂತ್ರಣ ಸಾಲು .controls-row .rowಅಥವಾ.form-group
ನವಬಾರ್ ಒಳ .navbar-inner ಎನ್ / ಎ
ನವಬಾರ್ ಲಂಬ ವಿಭಾಜಕಗಳು .navbar .divider-vertical ಎನ್ / ಎ
ಡ್ರಾಪ್‌ಡೌನ್ ಉಪಮೆನು .dropdown-submenu ಎನ್ / ಎ
ಟ್ಯಾಬ್ ಜೋಡಣೆಗಳು .tabs-left .tabs-right .tabs-below ಎನ್ / ಎ
ಮಾತ್ರೆ ಆಧಾರಿತ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶ .pill-content .tab-content
ಮಾತ್ರೆ ಆಧಾರಿತ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಫಲಕ .pill-pane .tab-pane
ನಾವ್ ಪಟ್ಟಿಗಳು .nav-list .nav-header ನೇರ ಸಮಾನತೆಯಿಲ್ಲ, ಆದರೆ ಪಟ್ಟಿ ಗುಂಪುಗಳು ಮತ್ತು .panel-groupಗಳು ಒಂದೇ ಆಗಿರುತ್ತವೆ.
ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಇನ್‌ಲೈನ್ ಸಹಾಯ .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).
  • 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. ಇದು ಮಾದರಿಯ ದೇಹವನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ಮಾದರಿಯ ಶಿರೋಲೇಖ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಯನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
  • ಬಟನ್.js ಪ್ಲಗಿನ್‌ನ ಚೆಕ್‌ಬಾಕ್ಸ್ ಮತ್ತು ರೇಡಿಯೋ ವೈಶಿಷ್ಟ್ಯಗಳು ಈಗ ಅವುಗಳ ಮಾರ್ಕ್‌ಅಪ್ data-toggle="buttons"ಬದಲಿಗೆ data-toggle="buttons-checkbox"ಅಥವಾ ಬಳಸುತ್ತವೆ.data-toggle="buttons-radio"
  • ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಈವೆಂಟ್‌ಗಳನ್ನು ನೇಮ್‌ಸ್ಪೇಸ್ ಮಾಡಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಮಾದರಿ "ಶೋ" ಈವೆಂಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು, ಬಳಸಿ 'show.bs.modal'. ಟ್ಯಾಬ್‌ಗಳಿಗಾಗಿ "ತೋರಿಸಲಾಗಿದೆ" ಬಳಕೆ 'shown.bs.tab', ಇತ್ಯಾದಿ.

v3.0 ಗೆ ಅಪ್‌ಗ್ರೇಡ್ ಮಾಡುವ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಮತ್ತು ಸಮುದಾಯದಿಂದ ಕೋಡ್ ತುಣುಕುಗಳನ್ನು ನೋಡಿ, Bootply .