ናብ v4 ምግዓዝ

ቡትስትራፕ 4 ዓቢ ዳግመ ጽሑፍ ናይ ምሉእ ፕሮጀክት እዩ። እቶም ኣዝዮም ጐሊሖም ዝረኣዩ ለውጥታት ኣብ ታሕቲ ተጠቓሊሎም ኣለዉ፣ ድሕሪኡ ዝያዳ ፍሉይ ለውጢ ኣብ ዝምልከቶም ባእታታት ይስዕብ።

ርጉእ ለውጢ

ካብ Beta 3 ናብቲ ርጉእ v4.x ምውጻእና ምስ እንሰጋገር፡ ዝኾነ ዝሰብር ለውጢ የለን፡ ግን ገለ ርኡይ ለውጢ ኣሎ።

ሕትመት

• ዝተሰብሩ ናይ ሕትመት ዩቲሊቲታት ተኣሪሞም። ቅድሚ ሕጂ ንሓደ .d-print-*ክፍሊ ምጥቃም ንዝኾነ ካልእ ክፍሊ ብዘይተጸበናዮ መንገዲ ምተዓጽወ .d-*። ሕጂ፡ ምስ ካልኦት ናይ ምርኢት ዩቲሊቲታትና ይሰማምዑን ኣብቲ ሚድያ ጥራይ እዮም ዝምልከቱ ( @media print).

• ምስ ካልኦት ዩቲሊቲታት ንኽመሳሰሉ ዝርከቡ ናይ ሕትመት ምርኢት ዩቲሊቲታት ኣስፊሑ። ቤታ 3ን ልዕሊኡን ጥራይ block, inline-block, inline, ከምኡውን none. ርጉእ v4 ተወሰኸ flex, inline-flex, table, table-row, ከምኡውን table-cell.

• ን @page size.

ቤታ 3 ለውጢ

ቤታ 2 ኣብ ምዕራፍ ቤታ ዝበዝሕ ናይ ምብታኽ ለውጥታትና ክርኢ እንከሎ፡ ገና ግን ኣብ ምውጻእ ቤታ 3 ክእለዩ ዝግበኦም ውሑዳት ኣለዉና። እዚ ለውጥታት ካብ ቤታ 2 ወይ ዝኾነ ዝኣረገ ስሪት ቡትስትራፕ ናብ ቤታ 3 ትዕድም እንተኾንካ ይምልከቱ።

ዝተፈላለዩ

• ነቲ ኣብ ጥቕሚ ዘይውዕል $thumbnail-transitionተለዋዋጢ ኣወጊዱ። ዝኾነ ነገር ኣይንሰጋገርን ስለ ዝነበርና፡ ተወሳኺ ኮድ ጥራይ እዩ ነይሩ።
• ድሕሪ ሕጂ እቲ npm package ካብ ናትና sourceን distን ፋይላት ወጻኢ ካልእ ፋይላት ዘጠቓልል ኣይኮነን፤ ኣብኦም ተጸጊዕኩምን ስክሪፕትና ብመንገዲ እቲ node_modulesፎልደር ትሰርሑ እንተኔርኩምን፡ ዋሕዚ ስራሕኩም ከተመዓራርዩ ይግባእ።

ቅጥዕታት

• ንኽልቲኡ ብሕታዊን ነባሪን ሳጹናት ምልክትን ሬድዮታትን ዳግማይ ጽሒፉ። ሕጂ፡ ክልቲኦም ዝሰማማዕ ናይ HTML ኣቃውማ (ደጋዊ <div>ምስ ሓውን <input>) <label>ን ሓደ ዓይነት ቅዲ ኣቀማምጣን (stacked default, inline with modifier class) ኣለዎም። እዚ ድማ ነቲ ስያመ ኣብ ኩነታት ናይቲ እታዎት ተመርኲስና ቅዲ ክንገብረሉ የኽእለና፣ ንባህሪ ዝግበር ደገፍ የቃልል disabled(ቅድሚ ሕጂ ወላዲ ክፍሊ ዝሓትት ነይሩ) ከምኡ’ውን ንናይ ቅጥዒ ምጽዳቕና ብዝበለጸ ንኽድግፍ የኽእለና።

  background-imageከም ኣካል ናይዚ ፡ ኣብ ብሕታዊ ቅጥዒ ሳጹናት ምልክትን ሬድዮታትን ንብዙሓት s ንምምሕዳር ዝሕግዝ CSS ቀይርናዮ ኣለና ። ቅድሚ ሕጂ እቲ ሕጂ ዝተኣልየ .custom-control-indicatorባእታ ሕብሪ ድሕረ ባይታ፡ ምዕባለን SVG ምልክትን ነይርዎ። ነቲ ድሕረ ባይታ ምዕባለ ምምዕርራይ ማለት ሓደ ጥራይ ክትቅይሮ ኣብ ዘድልየካ እዋን ንኹሎም እቶም ምትካእ ማለት እዩ። ሕጂ .custom-control-label::before፡ ንመምላእን ምዕባለን ኣለና እሞ .custom-control-label::afterነቲ ምልክት ይሕዞ።

  ብሕታዊ ምፍታሽ ኣብ ውሽጢ መስመር ንምግባር፡ ወስኸሉ .custom-control-inline።

• ኣብ ምእታው ዝተመርኮሰ ናይ መጠወቒ ጉጅለታት ዝተመሓየሸ መምረጺ። ኣብ ክንዲ ንቅዲን ባህርን፡ ነቲ ባህሪ ንJS ባህርያት ጥራይ [data-toggle="buttons"] { }ንጥቀመሉን ንቅዲ ኣብ ሓድሽ ክፍሊ ንምርኮስን።data.btn-group-toggle

• .col-form-legendቁሩብ ዝተመሓየሸ ንምድጋፍ ተኣልዩ .col-form-label. በዚ መንገዲን .col-form-label-smኣብ ባእታታት ብቐሊሉ .col-form-label-lgክውዕል ይኽእል ።<legend>

• $custom-file-textብሕታዊ ፋይል እታዎታት ኣብ Sass ተለዋዋጢኦም ለውጢ ተቐቢሎም ። ድሕሪ ሕጂ ዝተሰነየ ካርታ ሳስ ኣይኮነን ሕጂ ድማ ሓደ ሕብረ ቃላት ጥራይ እዩ ሓይሊ ዝህብ-እቲ Browseመጠወቒ ከምቲ ሕጂ ካብ ሳስና ዝፍጠር እንኮ ናይ ሓሶት ባእታ እዩ። እቲ Choose fileጽሑፍ ሕጂ ካብቲ .custom-file-label.

እታዎታት ጉጅለታት

• ናይ ምእታው ጉጅለ ኣዶናት ሕጂ ምስ ሓደ እታው ብተዛማዲ ንኣቀማምጣኦም ፍሉያት እዮም። .input-group-addonኣውሪድና ኣለና .input-group-btnንኽልተ ሓደስቲ ክፍልታት ድማ፣ .input-group-prependከምኡውን .input-group-append. ሕጂ ብግልጺ append ወይ prepend ክትጥቀም ኣለካ፣ እዚ ድማ ንመብዛሕትኡ CSSና የቃልሎ። ኣብ ውሽጢ ሓደ append ወይ prepend፡ መጠወቒታትካ ከምቲ ኣብ ካልእ ቦታ ዝህልዉ ኣቐምጦም፡ ግን ጽሑፍ ኣብ ጠቕልሎ .input-group-text።

• ሕጂ ቅዲታት ምጽዳቕ ይድገፉ ኣለዉ፣ ከምኡ’ውን ብዙሓት እታዎታት (ዋላ እኳ ኣብ ነፍሲ ወከፍ ጉጅለ ሓደ እታዎት ጥራይ ከተረጋግጽ እንተኸኣልካ)።

• ናይ ምዕባይ ክፍልታት ኣብ ወላዲ .input-groupእምበር ኣብ ውልቃዊ ቅርጺ ባእታታት ክኾኑ የብሎምን።

ቤታ 2 ይቕየር

ኣብ ቤታ ኣብ ዘለናሉ እዋን፡ ዝኾነ ይኹን ዝሰብር ለውጢ ከይህልወና ዕላማ ኣለና። ይኹን እምበር፡ ነገራት ኩሉ ግዜ ከምቲ ዝተሓሰበሉ ኣይከዱን እዮም። ካብ ቤታ 1 ናብ ቤታ 2 ክትሰጋገር ከለኻ ኣብ ኣእምሮኻ ክትሕዞም ዘለካ ስብርባር ለውጥታት ኣብ ታሕቲ ኣለዉ።

ምብታኽ

• ተኣልዩ $badge-colorተለዋዋጢን ኣጠቓቕማኡን ኣብ .badge. colorኣብቲ ፣ መሰረት ብምግባር ንመርጽ ናይ ሕብሪ ንጽጽር ፋንክሽን ንጥቀም background-color፣ ስለዚ እቲ ተለዋዋጢ ኣድላዪ ኣይኮነን።
• ምስቲ ናይ CSS ተወላዲ መጽረዪ ግርጭት ንኸይሰብር grayscale()ተግባር ናብ ተባሂሉ ተቐይሩ።gray()grayscale
• .table-inverse፣ .thead-inverse፣ ከምኡውን .thead-defaultናብን .*-dark፣ .*-lightምስቲ ኣብ ካልእ ቦታታት እንጥቀመሉ ሕብርታትና ዝሰማማዕ ተሰይሙ ።
• ሕጂ መልሲ ዝህቡ ሰደቓታት ንነፍሲ ​​ወከፍ ነጥቢ ምብታኽ ሽቦ ክፍልታት ይፈጥሩ። እዚ ካብ ቤታ 1 ዝብተኽ እቲ .table-responsiveክትጥቀመሉ ዝጸናሕካ ዝያዳ .table-responsive-md. .table-responsiveሕጂ ወይ .table-responsive-{sm,md,lg,xl}ከም ኣድላይነቱ ክትጥቀሙ ትኽእሉ ኢኹም ።
• እቲ ኣመሓዳሪ ፓኬጅ ንኣማራጺታት (ንኣብነት፡ Yarn ወይ npm) ስለ ዝተኣልየ ደገፍ ቦወር ኣቋሪጹ። ንዝርዝር ሓበሬታ bower/bower#2298 ርአ።
• Bootstrap ሕጂ ውን jQuery 1.9.1 ወይ ልዕሊኡ የድልዮ እዩ፡ ግን v3.x ዝድገፉ መርበባት ሓበሬታ Bootstrap ዝድግፎም ስለዝኾኑ plus v3.x ገለ ናይ ጸጥታ መአረምታታት ስለዘለዎ ስሪት 3.x ክትጥቀሙ ትምከሩ።
• ኣብ ጥቕሚ ዘይወዓለ .form-control-labelክፍሊ ኣወጊዱ። ነዚ ክፍሊ እንተተጠቒምካሉ፡ ድፕሊኬት ናይቲ .col-form-labelክፍሊ እዩ ብቐጥታ ማእከል ዝገበረ a <label>ምስቲ ምስኡ ዝተኣሳሰር ምእታው ኣብ ኣግማድ ቅርጺ ኣቀማምጣታት።
• ነቲ color-yiqካብቲ ንብረት ዘጠቓለለ mixin colorናብ ዋጋ ዝምለስ ፋንክሽን ቀይርዎ፣ ንዝኾነ CSS ንብረት ክትጥቀመሉ የኽእለካ። ንኣብነት ኣብ ክንዲ color-yiq(#000)፡ ምጸሓፍካ color: color-yiq(#000);።

ድምቀት

• ኣብ ሞዳላት ሓድሽ pointer-eventsኣጠቓቕማ ኣተኣታትዩ። እቲ ደጋዊ ብፍጻመታት ምስ ንብሕታዊ ጠውቂ ኣተሓሕዛ .modal-dialogይሓልፍ ( ንዝኾነ ጠውቂ ጥራይ ኣብ ልዕሊ እቲ ክትሰምዕ ዘኽእል)፣ ድሕሪኡ ንጭቡጥ ምስ ይቃወሞ ።pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

መጠቃለሊ

ካብ v3 ናብ v4 ክትሰጋገር ከለኻ ክትጥንቀቐሎም እትደሊ ዓበይቲ ናይ ትኬት ኣቑሑት ኣብዚ ኣለዉ።

ናይ መርበብ ሓበሬታ ደገፍ

• IE8, IE9, ከምኡ ውን iOS 6 ዝብል ደገፍ ኣቋሪጹ። v4 ሕጂ IE10+ን iOS 7+ን ጥራይ ኮይኑ ኣሎ። ካብዞም ሓደ ንዘድልዮም መርበባት ሓበሬታ v3 ተጠቐሙ።
• ንኣንድሮይድ v5.0 Lollipop's Browser and WebView ወግዓዊ ደገፍ ተወሰኸ። ቅድሚ ሕጂ ዝነበሩ ስሪት ኣንድሮይድ ብራውዘርን ዌብቪውን ብዘይወግዓዊ መንገዲ ጥራይ እዮም ዝድገፉ።

ዓለማዊ ለውጢ

• ፍሌክስቦክስ ብነባሪ መልክዑ ተኸፊቱ ኣሎ። ብሓፈሻ እዚ ማለት ካብ ተንሳፋፊን ዝያዳን ኣብ ስግር ኣካላትና ምርሓቕ ማለት እዩ።
• ንፍልፍል CSS ፋይላትና ካብ Less ናብ Sass ተቐይሩ ።
• ካብ pxናብ remከም ቀንዲ CSS ኣሃዱና ተቐይሩ፣ ዋላ እኳ ፒክሰላት ጌና ንሕቶታት ሚድያን ባህርያት ሽቦን ይጥቀሙ ምኽንያቱ መሳርሒ ቪውፖርት ብዓይነት ዓቐን ስለዘይጽለዉ።
• ዓለማዊ ዓቐን ቅርጺ ፊደላት ካብ 14pxናብ 16px.
• ሓሙሻይ ኣማራጺ ንምውሳኽ ደረጃታት ሽቦ ኣመሓይሹ (ንኣናእሽቱ መሳርሒታት ኣብን ትሕቲን ኣድራሻ ምሃብ 576px) ከምኡ’ውን ነቲ -xsምትዕርራይ ካብቶም ክፍልታት ኣወጊዱ። ኣብነት .col-6.col-sm-4.col-md-3፡ .
• ነቲ ዝተፈለየ ኣማራጺ ቴማ ብመንገዲ SCSS ተቐያየርቲ (ንኣብነት $enable-gradients: true፡ ) ብዝውነኑ ኣማራጺታት ተኪኡዎ።
• ኣብ ክንዲ Grunt ተኸታታሊ npm ስክሪፕት ንምጥቃም ስርዓት ህንጸት ምሉእ ብምሉእ ተጸጊኑ። ንኹሉ ስክሪፕት ርአ package.json፣ ወይ ፕሮጀክትና readme ንናይ ከባቢ ልምዓት ድሌታት።
• መልሲ ዘይህብ ኣጠቓቕማ ቡትስትራፕ ድሕሪ ሕጂ ኣይድገፍን እዩ።
• ዝያዳ ሰፊሕ ናይ ምድላው ሰነዳትን ብሕታዊ ህንጻታትን ንምድጋፍ ነቲ ናይ ኦንላይን Customizer ኣውዲቕዎ።
• ንልሙዳት ጽምዲ ንብረት-ዋጋ CSSን ኣቋራጭ ርሕቀት ማርጅን/ፓዲንግን ዓሰርተታት ሓደስቲ ናይ ዩቲሊቲ ክፍልታት ተወሰኸ።

ስርዓት ሽቦ

• ናብ flexbox ተሰጋጊሩ።
  • ኣብ ግሪድ ሚክሲንን ኣቐዲሞም ዝተነጸሩ ክፍልታትን ንflexbox ዝኸውን ደገፍ ተወሰኸ።
  • ከም ኣካል ፍሌክስቦክስ፡ ንቐጥታውን ልኡላውን ኣሰላልፋ ክፍልታት ዝድግፍ ዘጠቓለለ እዩ።
• ዝተመሓየሹ ኣስማት ክፍሊ ሽቦን ሓድሽ ደረጃ ሽቦን።
  • ንዝያዳ ምቁጽጻር ግራኑላር ኣብ ታሕቲ ሓድሽ ናይ smሽቦ ደረጃ ተወሰኸ። 768pxሕጂ xs, sm, md, lg, ከምኡ ’ ውን ኣለና xl። እዚ ማለት እውን ኩሉ ደረጃ ብሓደ ደረጃ ተሃሪሙ ኣሎ ማለት እዩ (ስለዚ .col-md-6ኣብ v3 ሕጂ .col-lg-6ኣብ v4 ኣሎ)።
  • xsmin-width: 0ግሪድ ክፍልታት ቅዲታት ኣብ ዝተወሰነ ፒክሰል ዋጋ ዘይኮነስ ቅዲታት ምትግባር ከም ዝጅምሩ ብዝያዳ ብልክዕ ክውክል ከየድልዮም ተቐይሮም ኣለዉ ። ኣብ ክንዲ .col-xs-6፡ ሕጂ ’ ዩ .col-6። ኩሎም ካልኦት ደረጃታት ሽቦ ነቲ ምትዕርራይ የድልዮም (ንኣብነት፣ sm).
• ዝተመሓየሹ ዓቐናት ሽቦ፣ ሚክሲንን ተለዋዋጢ ረቛሒታትን።
  • ሕጂ ሽቦ ጐዳጉዲ ናይ ሳስ ካርታ ኣለዎም ስለዚ ኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ ፍሉይ ስፍሓት ጐዳጉዲ ክትገልጽ ትኽእል።
  • ንዝተመሓየሹ ግሪድ ሚክሲን ንሓደ make-col-readyምድላው ሚክሲን ንምጥቃምን a ን ንውልቃዊ ዓምዲ ምዕባይን make-colንምቕማጥ ።flexmax-width
  • ንሓድሽ ደረጃ ሽቦ ንምሕሳብን ዓምድታት 12ኣብ ዝለዓለ ስፍሓቶም ብማዕረ ከም ዝምቀሉ ንምርግጋጽን ዝተቐየሩ ናይ ሽቦ ስርዓት ሚድያ ሕቶ ምብታኽ ነጥብታትን ስፍሓት መትሓዚታትን።
  • ሕጂ ኣብ ክንዲ ብኣጻብዕ ዝቑጸሩ ዝተፈላለዩ ተቐያየርቲ፡ ናይ ሽቦ ምብታኽ ነጥብታትን ስፍሓት መትሓዚታትን ብመንገዲ Sass maps ( $grid-breakpointsand ) ይሕዙ። $container-max-widthsእዚኦም ነቶም @screen-*ተለዋዋጢ ረቛሒታት ምሉእ ብምሉእ ይትክእዎምን ነቶም ናይ ሽቦ ደረጃታት ምሉእ ብምሉእ ክትጥዕሞም የኽእሉኻን።
  • ናይ ሚድያ ሕቶታት እውን ተቐይሩ እዩ። ኣብ ክንዲ ኣብ ነፍሲ ወከፍ ግዜ ብተመሳሳሊ ዋጋ ናይ ሚድያ ሕቶ ኣዋጃትና እንደግሞ፡ ሕጂ @include media-breakpoint-up/down/only. ሕጂ ኣብ ክንዲ ምጽሓፍ @media (min-width: @screen-sm-min) { ... }፡ ክትጽሕፍ ትኽእል ኢኻ @include media-breakpoint-up(sm) { ... }.

ኣካላት

• ንሓድሽ ኩሉ ዘጠቓልል ኣካል ዝኸውን ካርድታት ዝኸውን ፓነላት፡ ንኣሽቱ ስእልታትን ዒላታትን ዝወደቑ .
• ናይ ግሊፊኮንስ ምልክት ቅርጺ ፊደል ኣውዲቑ። ምልክታት እንተድኣ ደሊኻ፡ ገለ ኣማራጺታት እዞም ዝስዕቡ እዮም፤
  • እቲ ንላዕሊ ዝወጽእ ስሪት ናይ ግሊፊኮንስ እዩ።
  • ኦክቲኮን (Octicons)
  • ቅርጺ ፊደል ኣዝዩ ዘደንቕ
  • ዝርዝር ኣማራጺታት ንምርካብ ኣብቲ Extend ዝብል ገጽ ርአ። ተወሳኺ ሓሳባት ኣለኩም? በጃኹም ሓደ ሕታም ወይ PR ክፈቱ።
• ነቲ Affix jQuery ዝብል ፕላግ-ኢን ኣውዲቕዎ።
  • position: stickyኣብ ክንድኡ ክትጥቀሙ ንመክር ። ንዝርዝርን ፍሉይ ናይ ፖሊፊል ለበዋታትን ኣብ HTML5 በጃኻ ምእታው ርአ ። ሓደ ሓሳብ @supportsንምትግባሩ ዝሕግዝ ሕጊ ምጥቃም እዩ (ንኣብነት @supports (position: sticky) { ... })/
  • ተወሳኺ፡ ዘይቅዲታት ንምትግባር ኣፊክስ ትጥቀም እንተኔርካ position፡ እቶም ፖሊፊልስ ንኣጠቓቕማኻ ዘይክድግፉ ይኽእሉ እዮም። ሓደ ኣማራጺ ንኸምዚ ዝኣመሰለ ኣጠቓቕማታት ናይ ሳልሳይ ወገን ስክሮልፖስ-ስታይለር ቤተ- መጻሕፍቲ እዩ።
• ብመሰረቱ ቁሩብ ዝተመጣጠነ መጠወቒታት ስለ ዝነበረ ነቲ ናይ ፔጀር ክፍሊ ኣውዲቕዎ ።
• ዳርጋ ንኹሎም ኣካላት ኣብ ክንዲ ልዕሊ ዓቐን ፍሉያት ናይ ህጻናት መምረጺታት ዝያዳ ዘይተሰፈሩ ናይ ክፍሊ መምረጺታት ንምጥቃም ዳግማይ ቅርጺ ጌሩ።

ብባእታ

እዚ ዝርዝር ኣብ መንጎ v3.xxን v4.0.0ን ብባእታ ዝግበር ቁልፊ ለውጥታት የጉልሕ።

ዳግማይ ምጅማር

ሓድሽ ኣብ Bootstrap 4 Reboot , ሓድሽ ቅዲ ጽሑፍ ኮይኑ ኣብ Normalize ብናይ ገዛእ ርእስና ብመጠኑ ርእይቶ ዘለዎም ቅዲታት ዳግመ ምትዕርራይ ዝሃንጽ እዩ። ኣብዚ ፋይል ዝረኣዩ መምረጺታት ባእታታት ጥራይ እዮም ዝጥቀሙ-ኣብዚ ዝኾነ ክፍልታት የለን። እዚ ንዝያዳ ሞዱላዊ ኣገባብ ንናይ ዳግመ ምትዕርራይ ቅዲታትና ካብ ቅዲታት ኣካላትና ይንጸሎም። ገለ ካብቶም ኣገደስቲ ዳግመ ምትዕርራይ እዚ ዘጠቓልል box-sizing: border-boxለውጢ፣ ካብ emናብ remኣሃዱታት ኣብ ብዙሓት ባእታታት ምግዓዝ፣ ቅዲታት ምትእስሳር፣ ከምኡውን ብዙሓት ናይ ቅጥዒ ባእታ ዳግመ ምትዕርራይ እዮም።

ታይፖግራፊ

• ኩሎም .text-ዩቲሊቲታት ናብቲ _utilities.scssፋይል ኣግዒዝዎም።
• ቅዲታቱ .page-headerብመንገዲ ዩቲሊቲታት ክትግበር ስለ ዝኽእል ወዲቑ።
• .dl-horizontalተደርብዩ ኣሎ። ኣብ ክንድኡስ .row፡ ኣብ ልዕሊኡን ቆልዑን <dl>ግሪድ ዓምዲ ክፍልታት (ወይ ሚክሲን) ተጠቐምን ተጠቐምን ።<dt><dd>
• ዳግማይ ዝተነድፉ ብሎክኮትስ፣ ቅዲታቶም ካብቲ <blockquote>ባእታ ናብ ሓደ ክፍሊ ብምግዓዝ፣ .blockquote. ነቲ .blockquote-reverseናይ ጽሑፍ መገልገሊታት ዝኸውን መቐየሪ ኣውዲቑ።
• .list-inlineሕጂ ደቁ ዝዝርዝሩ ነገራት እቲ ሓድሽ .list-inline-itemክፍሊ ኣብ ልዕሊኦም ተግባራዊ ክገብር ይጠልብ።

ምስልታት

• ናብ . .img-responsive_.img-fluid
• .img-roundedናብ ስሙ ተቐይሩ ።.rounded
• .img-circleናብ ስሙ ተቐይሩ ።.rounded-circle

ሰደቓታት

• ዳርጋ ኩሎም ኣጋጣሚታት ናይቲ >መምረጺ ተኣልዮም ኣለዉ፣ ማለት ሕጂ ዝተሰፍሩ ሰደቓታት ብኣውቶማቲክ ካብ ወለዶም ቅዲታት ክወርሱ እዮም። እዚ ድማ ንመምረጺታትናን ክህሉ ዝኽእል ምምዕርራይን ኣዝዩ የቃልል።
• ንጽንዓት .table-condensedናብ .table-smዝብል ስም ተቐይሩ።
• ሓድሽ .table-inverseኣማራጺ ተወሰኸ።
• ናይ ሰደቓ ርእሲ መቐየሪታት ተወሰኹ: .thead-defaultከምኡውን .thead-inverse.
• -ቅድመ-ጥብቆ ንኽህልዎም ንዓውደ-ጽሑፋዊ ክፍልታት ዳግማይ .table-ተሰይሙ። ካብዚ ብምብጋስ .active, .success, .warning, .dangerከምኡውን .infoናብ .table-active, .table-success, .table-warning, .table-dangerከምኡውን .table-info.

ቅጥዕታት

• ዝተንቀሳቐሰ ባእታ ናብቲ _reboot.scssፋይል ይምለስ።
• ናብ . .control-label_.col-form-label
• ብቕደም ተኸተል ዳግማይ ተሰይሙን .input-lgናብን ..input-sm.form-control-lg.form-control-sm
• ንቐሊልነት .form-group-*ክብል ትምህርቲ ኣቋሪጹ። .form-control-*ኣብ ክንድኡ ሕጂ ክፍልታት ተጠቐም ።
• ኣውዲቑ ብ for block-level help text .help-blockተኪእዎ ። .form-textንናይ ውሽጢ መስመር ሓገዝ ጽሑፍን ካልእ ተዓጻጻፊ ኣማራጺታትን፡ ከም .text-muted.
• ወዲቑን . .radio-inline_.checkbox-inline
• ዝተጠርነፈን .checkboxናብን ዝተፈላለዩ .radioክፍልታትን ።.form-check.form-check-*
• ልኡማት ቅጥዕታት ምሉእ ብምሉእ ተጸጊኖም፤
  • ነቲ ናይ .form-horizontalክፍሊ ረቛሒ ኣቋሪጹ።
  • .form-groupድሕሪ ደጊም ካብ .rowvia mixin ቅዲታት ኣይሰርሕን እዩ፣ ስለዚ .rowሕጂ ንኣግማድ ሽቦ ኣቀማምጣታት የድሊ (ንኣብነት፣ <div class="form-group row">).
  • ሓድሽ .col-form-labelክፍሊ ናብ ብቐጥታ ማእከል ስያመታት ብ .form-controls ተወሰኸ።
  • ሓድሽ .form-rowንውሱን ቅጥዒ ኣቀማምጣ ምስ ሽቦ ክፍልታት ተወሰኸ (ናይ .rowa .form-rowand go ናትካ ምቕያር)።
• ብሕታዊ ቅጥዕታት ደገፍ ተወሰኸ (ንሳጹናት ምልክት፣ ሬድዮታት፣ ምምራጽን ፋይል ምእታውን)።
• .has-error, .has-warning, ከምኡውን ክፍልታት ብ HTML5 .has-successቅጥዒ ምጽራይ ብመንገዲ CSS's :invalidን :validpseudo-classesን ተተኪኡ።
• ናብ . .form-control-static_.form-control-plaintext

መጠወቒታት

• ናብ . .btn-default_.btn-secondary
• .btn-xsምሉእ ብምሉእ ከምቲ ብመጠኑ ካብ v3's ኣዝዩ ዝንእስ ክላስ ኣውዲቕዎ .btn-sm።
• እቲ ስቴትፉል መጠወቒ ባህሪ ናይ button.jsjQuery ፕላግ-ኢን ተቛሪጹ ኣሎ። እዚ ድማ ነቲን $().button(string)ኣገባባትን የጠቓልል $().button('reset')። ኣብ ክንድኡ ንእሽቶ ቁንጣሮ ብሕታዊ ጃቫስክሪፕት ክትጥቀም ንመክር፣ እዚ ድማ ብልክዕ ከምቲ እትደልዮ ባህሪ ናይ ምግባር ረብሓ ክህልዎ እዩ።
  • ካልኦት ባህርያት ናይቲ ፕላግ-ኢን (ናይ መጠወቒ ምልክት ሳጹናት፡ ናይ መጠወቒ ሬድዮታት፡ ንጽል-ምቕያር መጠወቒታት) ኣብ v4 ተዓቂቦም ከምዘለዉ ኣስተውዕል።
• መጠወቒታት' [disabled]ናብ :disabledከምቲ IE9+ ዝድግፎ ምቕያር :disabled. ይኹን እምበር fieldset[disabled]ገና ኣድላዪ እዩ ምኽንያቱ ተወለድቲ ዝተሰናኸሉ ፊልድሴትስ ጌና ኣብ IE11 ስሕተት ኣለዎም ።

መጠወቒ ጉጅለ

• ንባእታ ብፍሌክስቦክስ ዳግማይ ጽሒፍዎ።
• ተኣልዩ .btn-group-justified. ከም መተካእታ <div class="btn-group d-flex" role="group"></div>ከም መጠቕለሊ ኣብ ዙርያ ባእታታት ምስ .w-100.
• ምሉእ ብምሉእ ነቲ .btn-group-xsክፍሊ ኣውዲቑ ምእላይ ናይ .btn-xs.
• ኣብ መንጎ ጉጅለታት መጠወቒ ኣብ መሳርሒታት መጠወቒታት ዘሎ ግሉጽ ርሕቀት ተኣልዩ፤ ሕጂ ማርጅን ዩቲሊቲስ ተጠቐም።
• ምስ ካልኦት ኣካላት ንኽትጥቀመሉ ዝተመሓየሸ ሰነድ።

ድሮፕዳውንድስ

• ካብ ወላዲ መምረጺታት ናብ ንጽል ክፍልታት ንኹሎም ኣካላት፣ መቐየሪታት ወዘተ ተቐይሩ።
• ድሕሪ ደጊም ንላዕሊ ወይ ንታሕቲ ዝጥምቱ ፍላጻታት ኣብቲ ንቑልቁል ዝወርድ ዝርዝር ተተሓሒዞም ንኸይልኣኹ ዝተቐለሉ ቅዲታት ምውራድ።
• <div>ድሮፕዳውንስ ሕጂ ብ s ወይ s ክህነጹ ይኽእሉ <ul>።
• ዳግማይ ዝተሃንጸ ንቑልቁል ዝወርድ ቅዲታትን ምልክትን ንቐሊልን ዝተሃንጸን ደገፍን <a>መሰረት <button>ዝገበረን ንቑልቁል ዝወርድ ነገራት ንምሃብ።
• ናብ . .divider_.dropdown-divider
• ሕጂ ንቑልቁል ዝወርድ ነገራት .dropdown-item.
• ድሕሪ ደጊም ንቑልቁል ዝወርድ ቶግልስ ግሉጽ ዘድልዮ ኣይኮነን <span class="caret"></span>; እዚ ሕጂ ብኣውቶማቲክ ብመንገዲ CSS's ::afterኣብ .dropdown-toggle.

ስርዓት ሽቦ

• ሓድሽ ናይ 576pxሽቦ ምብታኽ ነጥቢ ከም ተወሰኸ sm፣ ማለት ሕጂ ሓሙሽተ ጠቕላላ ደረጃታት ( xs, sm, md, lg, and xl) ኣለዉ።
• ነቶም ምላሽ ዝህቡ ሽቦ መቐየሪ ክፍልታት ካብ .col-{breakpoint}-{modifier}-{size}ናብ ንዝቐለሉ ክፍልታት ሽቦ ዳግማይ .{modifier}-{breakpoint}-{size}ተሰይሞም።
• ንሓደስቲ ብፍሌክስቦክስ ዝሰርሑ orderክፍልታት ዝኸውን ናይ ምድፋእን ስሕበትን መቐየሪ ክፍልታት ወዲቑ። ንኣብነት ኣብ ክንዲ .col-8.push-4and ፡ and .col-4.pull-8ምተጠቐምካ ።.col-8.order-2.col-4.order-1
• ንሽቦ ስርዓትን ኣካላትን ዝኸውን ፍሌክስቦክስ ዩቲሊቲ ክፍልታት ተወሰኸ።

ጉጅለታት ዝርዝር

• ንባእታ ብፍሌክስቦክስ ዳግማይ ጽሒፍዎ።
• ብግሉጽ a.list-group-itemክፍሊ ተተኪኡ፣ .list-group-item-action፣ ንቅዲ መላግቦን መጠወቒ ስሪት ናይ ዝርዝር ጉጅለ ነገራት።
• .list-group-flushምስ ካርድታት ንኽትጥቀመሉ ክፍሊ ተወሰኸ ።

ሞዳል ዝብል እዩ።

• ንባእታ ብፍሌክስቦክስ ዳግማይ ጽሒፍዎ።
• ናብ flexbox ምግዓዝ ኣብ ግምት ብምእታው፡ ድሕሪ ሕጂ ፍሎትስ ስለዘይንጥቀም፡ ኣብቲ ርእሲ ዘሎ ኣሰላልፋ ናይ ምብራር ምልክታት ክስበር ተኽእሎ ኣሎ። ተንሳፋፊ ትሕዝቶ ቀዳማይ ይመጽእ፡ ምስ flexbox ግን ድሕሪ ሕጂ ከምኡ ኣይኮነን። ድሕሪ ሞዳል ኣርእስታት ንኽመጹ ናይ ምብራር ምልክታትካ ኣዘምኖም ንኽእረሙ።
• እቲ remoteኣማራጺ (ኣውቶማቲክ ናይ ደገ ትሕዝቶ ናብ ሞዳል ንምጽዓንን ንምውጋእን ክጥቀመሉ ዝኽእል)ን እቲ ተዛማዲ loaded.bs.modalፍጻመን ተኣልዩ። ኣብ ክንድኡ ብወገን ዓሚል ቅጥዒ ወይ ዳታ መእሰሪ ፍሬምዎርክ ክትጥቀም ንመክር፣ ወይ ባዕልኻ jQuery.load ክትጽውዕ ።

ናቭስ

• ንባእታ ብፍሌክስቦክስ ዳግማይ ጽሒፍዎ።
• ዳርጋ ኩሎም >መምረጺታት ንዝቐለለ ቅዲ ብመንገዲ ዘይተሰፈሩ ክፍልታት ኣውዲቑ።
• ኣብ ክንዲ ከም HTML-ፍሉይ መምረጺታት ን s, s, ከምኡውን s .nav > li > aዝተፈላለዩ ክፍልታት ንጥቀም ። እዚ ድማ ንኤችቲኤምኤልካ ዝያዳ ተዓጻጻፊ ይገብሮ፡ ኣብ ርእሲኡ ድማ ምውሳኽ ምዝርጋሕ የምጽእ እዩ።.nav.nav-item.nav-link

ናቭባር

እቲ navbar ምሉእ ብምሉእ ኣብ flexbox ዳግማይ ተጻሒፉ ኣሎ ምስ ዝተመሓየሸ ደገፍ ንኣሰላልፋ፣ ምላሽ፣ ከምኡውን ምምዕርራይ።

• ምላሽ ዝህቡ ናይ ናቭባር ባህርያት ሕጂ .navbarብመንገዲ እቲ ዘድሊ .navbar-expand-{breakpoint} ኣብቲ ናቭባር ኣበይ ከም እትዓጽዎ ዝመረጽካሉ ኣቢልካ ኣብቲ ክፍሊ ይትግበሩ። ቅድሚ ሕጂ እዚ Less variable modification ዝነበረ ኮይኑ ዳግማይ ምጥርናፍ ዘድልዮ ነበረ።
• .navbar-defaultis now .navbar-light, ዋላ እኳ .navbar-darkከም ቀደሙ ይቕጽል። ኣብ ነፍሲ ወከፍ ናቭባር ሓደ ካብዚኦም የድሊ። ይኹን እምበር እዞም ክፍልታት ድሕሪ ደጊም background-colors ኣይሰርዑን እዮም፤ ኣብ ክንድኡስ ብመሰረቱ ጥራይ እዮም ዝጸልዉ color.
• ሕጂ ናቭባር ገለ ዓይነት ድሕረ ባይታ መግለጺ የድልዮም። ካብ ድሕረ ባይታ ዩቲሊቲታትና ( ) ምረጽ ወይ ድማ ምስቶም ኣብ ላዕሊ ዘለዉ ብርሃን/ተገላባጢ ክፍልታት ንዕቡድ ምምዕርራይ.bg-* ናትካ ኣቐምጥ ።
• ቅዲታት ፍሌክስቦክስ ኣብ ግምት ብምእታው፡ ሕጂ ናቭባር ንቐሊል ናይ ኣሰላልፋ ኣማራጺታት ፍሌክስቦክስ ዩቲሊቲታት ክጥቀሙ ይኽእሉ።
• .navbar-toggleሕጂ .navbar-togglerኮይኑ ዝተፈላለየ ቅዲታትን ውሽጣዊ ምልክትን ኣለዎ (ካብ ሰለስተ <span>s ንላዕሊ የለን)።
• .navbar-formምሉእ ብምሉእ ክፍሊ ኣቋሪጽዎ ። ድሕሪ ደጊም ኣድላዪ ኣይኮነን፤ ኣብ ክንድኡስ .form-inlineከም ኣድላይነቱ ማርጅን ዩቲሊቲስ ጥራይ ተጠቐሙን ተግባራዊ ግበሩን።
• ናቭባር ድሕሪ ደጊም margin-bottomወይ border-radiusብነባሪ ኣይሓውስን እዩ። ከም ኣድላይነቱ ዩቲሊቲታት ምጥቃም።
• ኩሎም ኣብነታት navbars ዝሓዙ ሓድሽ ምልክት ንኽሕዙ ተሓዲሶም ኣለዉ።

ገጽ ምሃብ

• ንባእታ ብፍሌክስቦክስ ዳግማይ ጽሒፍዎ።
• ሕጂ ኣብ ልዕሊ ዘርኢ ስ ግሉጽ ክፍልታት ( .page-item, .page-link) የድሊ ኣሎ።.pagination
• .pagerካብ ብዓል ሞያ ኣውታር መጠወቒታት ቁሩብ ንላዕሊ ስለ ዝነበረ ነቲ ክፍሊ ምሉእ ብምሉእ ኣውዲቕዎ።

ፍርስራስ እንጀራ

• ግሉጽ ክፍሊ .breadcrumb-item፡ ፡ ሕጂ ኣብ ልዕሊ ዘርኢ .breadcrumbስ

ምልክታትን ባጅን

• ምድልዳልን ካብቲ ባእታ .labelምፍላይን ተዛመድቲ ባእታታት ምቕላልን።.badge<label>
• .badge-pillንኽቡብ “ከኒና” መልክዕ ከም መቐየሪ ተወሰኸ ።
• ድሕሪ ደጊም ባጅ ኣብ ዝርዝር ጉጅለታትን ካልኦት ኣካላትን ብኣውቶማቲክ ኣይንሳፈፉን እዮም። ሕጂ ንዕኡ ዝኸውን ናይ ዩቲሊቲ ክፍልታት የድሊ ኣሎ።
• .badge-defaultኣብ .badge-secondaryካልእ ቦታታት ዝጥቀሙሉ ናይ ክፍሊ መቐየሪ ክፍልታት ንምስምማዕ ተደርብዩን ተወሰኸን።

ፓነላት፡ ንኣሽቱ ስእልታትን ዒላታትን

ንሓድሽ ናይ ካርድ ክፍሊ ምሉእ ብምሉእ ወዲቑ።

ፓነላት

• .panelto .card, ሕጂ ብflexbox ተሃኒጹ ኣሎ።
• .panel-defaultተኣልዩ መተካእታ የለን።
• .panel-groupተኣልዩ መተካእታ የለን። .card-groupመተካእታ ኣይኮነን፣ ዝተፈለየ እዩ።
• .panel-headingናብ.card-header
• .panel-titleናብ .card-title. ከከምቲ ዝደለኻዮ መልክዕ ፡ ርእሲ ባእታታት ወይ ክፍልታት (ንኣብነት <h3>, .h3) ወይ ድሙቕ ባእታታት ወይ ክፍልታት (ንኣብነት <strong>, <b>, .font-weight-bold) እውን ክትጥቀም ትኽእል ኢኻ። ኣስተውዕል .card-title፡ ብተመሳሳሊ ስም እኳ እንተተሰምየ፡ ካብ .panel-title.
• .panel-bodyናብ.card-body
• .panel-footerናብ.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ከምኡ ውን ን , , ከምኡ ውን ካብ ሳስ ካርታና ዝተፈጥሩ ዩቲሊቲታት .panel-dangerተደርብዮም ኣለዉ ።.bg-.text-.border$theme-colors

ምዕባለ

• ንዓውደ-ጽሑፋዊ .progress-bar-*ክፍልታት ብዩቲሊቲታት ተኪኡ .bg-*። ንኣብነት class="progress-bar progress-bar-danger"፡ ይኸውን class="progress-bar bg-danger".
• ንተንቀሳቓሲ .activeናይ ምዕባለ ባር ብ .progress-bar-animated.

ካሮሰል

• ንዲዛይንን ቅዲን ንምቕላል ንብምሉኡ እቲ ኣካል ምሉእ ብምሉእ ተጸጊኑ። ንዓኻ ክትሽፍኖ እትኽእል ውሑድ ቅዲታት፡ ሓደስቲ መርኣይታትን ሓደስቲ ምልክታትን ኣለዉና።
• ኩሉ CSS un-nested ተገይሩን ተሰይሙን ኣሎ፣ ነፍሲ ወከፍ ክፍሊ ብ ቅድመ-ጥብቆ ከምዘለዎ ኣረጋጊጹ .carousel-።
  • ንካሮሰል ​​ኣቑሑት፡ , .next, .prev, ሕጂ .leftድማ , , , ከምኡውን ..right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
  • .item’ ውን ሕጂ ’ ዩ .carousel-item።
  • ን prev/next ቁጽጽር፣ .carousel-control.rightand .carousel-control.leftare now .carousel-control-nextand .carousel-control-prev, ማለት ድሕሪ ደጊም ፍሉይ መሰረታዊ ክፍሊ ኣየድልዮምን እዩ።
• ኩሉ ምላሽ ዝህብ ቅዲ ኣወጊዱ፣ ንዩቲሊቲታት ምድንጓይ (ንኣብነት፣ ኣብ ዝተወሰኑ ቪውፖርትታት መግለጺታት ምርኣይ) ከምኡ’ውን ብሕታዊ ቅዲታት ከም ኣድላይነቱ።
• ኣብ ካሮሰል ኣቑሑት ንዘለዉ ምስልታት ዝግለጽ ምስሊ ተኣልዩ፣ ናብ ዩቲሊቲታት ብምድንጓይ።
• ነቲ ሓድሽ ምልክትን ቅዲታትን ንምሕዋስ ነቲ ናይ ካሮሰል ኣብነት ትዊክ ጌርዎ።

ሰደቓታት

• ንቅዲ ዘለዎም ዝተሰረቱ ሰደቓታት ዝግበር ደገፍ ተኣልዩ። ኩሎም ቅዲታት ሰደቓ ሕጂ ኣብ v4 ንዝቐለሉ መምረጺታት ይውረሱ።
• ተገላባጢ ሰደቓ ፍልልይ ተወሰኸ።

ዩቲሊቲታት

• ምርኢት፣ ሕቡእን ካልእን፤
  • ናይ ምርኢት ዩቲሊቲታት ምላሽ ዝህቡ ገይሩ (ንኣብነት፣ .d-noneከምኡውን d-{sm,md,lg,xl}-none).
  • .hidden-*ንሓደስቲ ዲስፕለይ ዩቲሊቲታት ዝኸውን ዝበዝሐ ዩቲሊቲታት ኣውዲቑ ። ንኣብነት ኣብ ክንዲ .hidden-sm-up፡ ተጠቐም .d-sm-none። .hidden-printነቲ ናይ ምርኢት ዩቲሊቲ ምጽዋዕ ስኬም ንኽጥቀሙ ነቶም ዩቲሊቲታት ዳግማይ ተሰይሞም። ተወሳኺ ሓበሬታ ኣብ ትሕቲ Responsive utilities ዝብል ክፍሊ ናይዚ ገጽ።
  • .float-{sm,md,lg,xl}-{left,right,none}ንመልሲ ዝህቡ መንሳፈፍቲ ዝኸውን ክፍልታት ተወሰኸን ተኣልዩን ከምኡ .pull-leftውን .pull-rightንሳቶም ተደራራቢ ስለ ዝኾኑ .float-leftናብን .float-right.
• ዓይነት:
  • ኣብ ናይ ጽሑፍ ኣሰላልፋ ክፍልታትና ምላሽ ዝህቡ ፍልልያት ወሲኹ .text-{sm,md,lg,xl}-{left,center,right}።
• ኣሰላልፋን ርሕቀትን፤
  • ንኹሉ ወገን ዝኸውን ሓድሽ ምላሽ ዝህብ ማርጅንን ፓዲንግን ዩቲሊቲታት ተወሰኸ ፣ ተወሳኺ ቀጥታውን ኣግማድን ኣቋራጭ ቃላት።
  • ጀልባ ጽዕነት ናይ ፍሌክስቦክስ ዩቲሊቲታት ተወሰኸ .
  • .center-blockንሓድሽ .mx-autoክፍሊ ወዲቑ ።
• ክሊርፊክስ ንኣረጊት ስሪት መርበብ ሓበሬታ ዝግበር ደገፍ ንምቁራጽ ተሓዲሱ።

ናይ ሸያጢ ቅድመ-ጥብቆ ሚክሲናት

ኣብ v3.2.0 ዝጠፍኡ ዝነበሩ ናይ ቡትስትራፕ 3 ናይ ሸያጢ ቅድመ-ጥብቆ ሚክሲናት ኣብ ቡትስትራፕ 4 ተኣልዮም ኣለዉ። Autoprefixer ስለ እንጥቀም ድሕሪ ሕጂ ኣድለይቲ ኣይኮኑን።

እዞም ዝስዕቡ ሚክሲናት ተኣልዮም : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay_ transition-duration_ transition-property_transition-timing-functiontransition-transformtranslatetranslate3duser-select

ሰነዳት ምግባር

ሰነዳትና ኣብ መላእ ቦርድ እውን ምዕባለ ረኺቡ። እቲ ትሑት ንታሕቲ ኣብዚ ኣሎ፤

• ሕጂ ውን Jekyll ንጥቀም ኣለና፡ ኣብቲ mix ግን ፕላጊናት ኣለዉና፤
  • bugify.rbኣብ ገጽ ስሕተታት መርበብ ሓበሬታና ዝርከቡ ኣታዊታት ብብቕዓት ንምዝርዛር ይጥቀመሉ ።
  • example.rbናይቲ ነባሪ highlight.rbፕላግ-ኢን ብሕታዊ ፋርኬታ እዩ፣ ንዝቐለለ ኣብነት-ኮድ ኣተሓሕዛ የኽእል።
  • callout.rbተመሳሳሊ ብሕታዊ ፋርኬታ ናይቲ እዩ፣ ግን ንፍሉያት docs callouts ናትና ዝተዳለወ እዩ።
  • jekyll-toc ትሕዝቶና ንምፍጣር ይጥቀመሉ።
• ኩሉ ትሕዝቶ docs ንቐሊል ኣርትዖት ብ Markdown (ኣብ ክንዲ HTML) ዳግማይ ተጻሒፉ ኣሎ።
• ገጻት ንዝቐለለ ትሕዝቶን ዝያዳ ዝቐርብ ስርዓተ-መሰረትን ዳግማይ ተዋዲዶም ኣለዉ።
• ካብ ስሩዕ CSS ናብ SCSS ተሰጋጊርና ንናይ Bootstrap ተለዋዋጢ ረቛሒታት፣ mixinsን ካልእን ምሉእ ብምሉእ ንምጥቃም።

ምላሽ ዝህቡ ዩቲሊቲታት

ኩሎም @screen-ተለዋዋጢ ረቛሒታት ኣብ v4.0.0 ተኣልዮም ኣለዉ። media-breakpoint-up()ኣብ ክንድኡ , media-breakpoint-down(), ወይ media-breakpoint-only()Sass mixins ወይ $grid-breakpointsSass map ተጠቐም ።

displayናትና ምላሽ ዝህቡ ናይ ዩቲሊቲ ክፍልታት ብዓቢኡ ንግልጺ ዩቲሊቲታት ዝድግፉ ተኣልዮም ኣለዉ ።

• እቶም .hiddenand classes ምስ jQuery's and methods .showስለዝተጋጨዉ ተኣልዮም ኣለዉ ። ኣብ ክንድኡስ፡ ነቲ ባህሪ ክትቅይሮ ፈትኖ ወይ ድማ ከምን ዝኣመሰሉ ናይ ውሽጢ መስመር ቅዲታት ተጠቐም ።$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• ኩሎም .hidden-ክፍልታት ተኣልዮም ኣለዉ፣ ብዘይካ እቶም ዝተቐየሩ ናይ ሕትመት ዩቲሊቲታት።
  • ካብ v3 ተኣልዩ፤.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • ካብ v4 ኣልፋስ ተኣልዩ፤.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ድሕሪ ደጊም ናይ ሕትመት መገልገሊታት ብ .hidden-ወይ ዘይጅምሩ .visible-፣ ብ .d-print-.
  • ናይ ቀደም ኣስማት: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • ሓደስቲ ክፍልታት: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

ግሉጽ ክፍልታት ኣብ ክንዲ እትጥቀም .visible-*፡ ንሓደ ባእታ ኣብቲ ዓቐን ስክሪን ብዘይምሕባእ ጥራይ ከም ዝረአ ትገብሮ። .d-*-noneሓደ ክፍሊ ምስ ሓደ .d-*-blockክፍሊ ኣወሃሂድካ ንሓደ ባእታ ኣብ ዝተዋህበ ፍልልይ ዓቐን ስክሪን ጥራይ ከተርእዮ ትኽእል ኢኻ (ንኣብነት .d-none.d-md-block.d-xl-noneነቲ ባእታ ኣብ ማእከላይን ዓበይትን መሳርሒታት ጥራይ የርኢ)።

ኣስተውዕል ኣብ v4 ኣብ ሽቦ ምብታኽ ነጥብታት ዝግበር ለውጢ ማለት ተመሳሳሊ ውጽኢት ንምርካብ ሓደ ነጥቢ ምብታኽ ዝዓበየ ክትከይድ ከምዘድልየካ ኣስተውዕል። እቶም ሓደስቲ ምላሽ ዝህቡ ዩቲሊቲ ክፍልታት ንሓደ ባእታ ርኡይነት ከም ሓደ ተተሓሒዙ ዝኸይድ ደረጃ ዓቐናት ቪውፖርት ክግለጽ ዘይክእል ውሑድ ልሙዳት ጉዳያት ንምትእንጋድ ኣይፍትኑን እዮም፤ ኣብ ክንድኡ ኣብ ከምዚ ዝኣመሰለ ኩነታት ብሕታዊ CSS ክትጥቀም ከድልየካ እዩ።