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
Glyphicons .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-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).
  • Twitter Typeahead භාවිතා කිරීමට පක්ෂව Typehead ඉවත් කර ඇත .
  • Modal markup සැලකිය යුතු ලෙස වෙනස් වී ඇත. වඩා හොඳ ජංගම හැඩගැන්වීම් සහ හැසිරීම් සඳහා , , .modal-headerසහ .modal-bodyකොටස් .modal-footerදැන් ඔතා ඇත . එසේම, ඔබ තවදුරටත් ඔබේ සලකුණු කිරීම සඳහා අයදුම් නොකළ යුතුය..modal-content.modal-dialog.hide.modal
  • v3.1.0 වන විට, මොඩල් විකල්පය මඟින් පූරණය කරන ලද HTML remoteදැන් තුළට වෙනුවට .modal-content(v3.0.0 සිට v3.0.3 දක්වා, තුළට .modal) එන්නත් කරනු ලැබේ .modal-body. මොඩල් බොඩි පමණක් නොව, මොඩලයේ ශීර්ෂය සහ පාදය පහසුවෙන් වෙනස් කිරීමට මෙය ඔබට ඉඩ සලසයි.
  • button.js ප්ලගිනයේ පිරික්සුම් පෙට්ටිය සහ රේඩියෝ විශේෂාංග දැන් දෙකම භාවිතා කරන්නේ data-toggle="buttons"ඒ වෙනුවට data-toggle="buttons-checkbox"හෝ data-toggle="buttons-radio"ඒවායේ සලකුණු කිරීමේදීය.
  • ජාවාස්ක්‍රිප්ට් සිද්ධීන් නම් අවකාශයක් ඇත. උදාහරණයක් ලෙස, මාදිලියේ "පෙන්වීම" සිදුවීම හැසිරවීමට, භාවිතා කරන්න 'show.bs.modal'. ටැබ් සඳහා "පෙන්වන" භාවිතය 'shown.bs.tab', ආදිය.

v3.0 වෙත උත්ශ්‍රේණි කිරීම සහ ප්‍රජාව වෙතින් කේත කොටස් පිළිබඳ වැඩි විස්තර සඳහා, Bootply බලන්න .