ከ2.x ወደ 3.0 በመሰደድ ላይ

Bootstrap 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 .jumbotron
ተጨማሪ ትንሽ ፍርግርግ (<768px) .col-xs-*
አነስተኛ ፍርግርግ (≥768 ፒክስል) .col-sm-*
መካከለኛ ፍርግርግ (≥992 ፒክስል) .col-md-*
ትልቅ ፍርግርግ (≥1200 ፒክስል) .col-lg-*
ምላሽ ሰጪ የመገልገያ ክፍሎች (≥1200 ፒክስል) .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-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 Typehead ን ለመጠቀም በመደገፍ የታይፕ ራስ ተጥሏል ።
  • የሞዳል ምልክት በከፍተኛ ሁኔታ ተለውጧል። የ .modal-header፣፣ .modal-bodyእና .modal-footerክፍሎች አሁን ተጠቅልለዋል .modal-contentእና .modal-dialogለተሻለ የሞባይል ቅጥ እና ባህሪ። እንዲሁም፣ ከአሁን በኋላ በምልክት ማድረጊያዎ ውስጥ .hideማመልከት የለብዎትም።.modal
  • ከ v3.1.0 ጀምሮ፣ በሞዳል አማራጩ የተጫነው ኤችቲኤምኤል 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 ን ይመልከቱ ።