ካብ 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
ተወሳኺ ንእሽቶ ሽቦ (<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
ፎርም ጉጅለ ምስ info .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 ቀጥታዊ መመዘኒ የለን፣ ግን ዝርዝር ጉጅለታትን s .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ድሕሪ ሕጂ ዓውደ-ጽሑፋዊ (-success,-primary,etc..) ክፍልታት የብሉን።
  • .btn.btn-defaultነቲ "ነባሪ" ዝብል መጠወቒ ንምርካብ እውን ክጥቀመሉ ኣለዎ ።
  • .rowሕጂ ፈሳሲ ኮይኑ ኣሎ።
  • ምስልታት ድሕሪ ደጊም ብነባሪ ምላሽ ኣይህቡን እዮም። ንዓቐን .img-responsiveፈሳሲ ምጥቃም ።<img>
  • እቶም ምልክታት፡ ሕጂ .glyphicon፡ ሕጂ ቅርጺ ፊደል ዝተመርኮሱ እዮም። ምልክታት እውን መሰረትን ምልክት ክፍልን የድልዮም (ንኣብነት .glyphicon .glyphicon-asterisk)።
  • ታይፕኣሄድ ተቛሪጹ ኣሎ፣ ትዊተር ታይፕሄድ ንምጥቃም ዝድግፍ ።
  • ሞዳል ማርክኣፕ ኣዝዩ ተቐይሩ ኣሎ። እቶም .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 ፕላግ-ኢን ሕጂ ክልቲኦም data-toggle="buttons"ኣብ ክንዲ data-toggle="buttons-checkbox"or ይጥቀሙdata-toggle="buttons-radio" ኣብ ምልክትኦም ይጥቀሙ።
  • ናይ ጃቫስክሪፕት ፍጻመታት ብስም ፍልልይ ኣለዎም። ንኣብነት፡ ነቲ ሞዳላዊ "ምርኣይ" ክስተት ንምሕላው፡ ን ተጠቐም 'show.bs.modal'። ንናይ "ተራእዩ" ትቦታት 'shown.bs.tab', ወዘተ ተጠቐሙ።

ንዝያዳ ሓበሬታ ብዛዕባ ናብ v3.0 ምዕባይ፡ ከምኡ’ውን ካብቲ ማሕበረሰብ ዝወጽእ ቁንጣሮ ኮድ ፡ Bootply ርአ ።