ወደ v4 በመሰደድ ላይ

Bootstrap 4 የጠቅላላው ፕሮጀክት ዋና ዳግም መፃፍ ነው። በጣም የታወቁት ለውጦች ከዚህ በታች ተጠቃለዋል ፣ ከዚያም በሚመለከታቸው አካላት ላይ የበለጠ ልዩ ለውጦች ተደርገዋል።

የተረጋጋ ለውጦች

ከቅድመ-ይሁንታ 3 ወደ እኛ የተረጋጋ v4.x ልቀት ስንሸጋገር ምንም የተበላሹ ለውጦች የሉም፣ ግን አንዳንድ ጉልህ ለውጦች አሉ።

ማተም

• ቋሚ የተሰበረ የህትመት መገልገያዎች። ከዚህ ቀደም ክፍልን መጠቀም .d-print-*ሌሎች ክፍሎችን ባልተጠበቀ ሁኔታ ይሽራል .d-*። አሁን፣ ከሌሎች የማሳያ መገልገያዎቻችን ጋር ይዛመዳሉ እና ለዚያ ሚዲያ ( @media print) ብቻ ይተገበራሉ።

• የተስፋፉ የሚገኙ የህትመት ማሳያ መገልገያዎች ከሌሎች መገልገያዎች ጋር ለማዛመድ። ቤታ 3 እና ከዚያ በላይ የነበራቸው block፣፣፣ እና . የተረጋጋ v4 ታክሏል ፣፣፣፣ እና _inline-blockinlinenoneflexinline-flextabletable-rowtable-cell

• ቋሚ የህትመት ቅድመ-እይታ በአሳሾች ላይ አዲስ የህትመት ቅጦችን ይገልፃል @page size።

ቤታ 3 ለውጦች

ቤታ 2 በቅድመ-ይሁንታ ደረጃ ላይ የኛን የብልሽት ለውጦች በብዛት ሲያይ፣ ነገር ግን አሁንም በቅድመ-ይሁንታ 3 ልቀት ውስጥ መስተካከል ያለባቸው ጥቂቶች አሉን። ከቅድመ-ይሁንታ 2 ወደ ቤታ 3 እያዘመኑ ከሆነ ወይም ከማንኛውም የቆየ የBootstrap ስሪት እነዚህ ለውጦች ይተገበራሉ።

የተለያዩ

• ጥቅም ላይ ያልዋለውን $thumbnail-transitionተለዋዋጭ ተወግዷል. ምንም ነገር አናስተላልፍም ነበር፣ ስለዚህ ተጨማሪ ኮድ ብቻ ነበር።
• የ npm ጥቅሉ ከአሁን በኋላ ከኛ ምንጭ እና የዲስት ፋይሎች ውጭ ምንም አይነት ፋይሎችን አያካትትም። በእነሱ ላይ ከታመንክ እና የእኛን ስክሪፕቶች በአቃፊው በኩል እያስኬዱ ከሆነ node_modulesየስራ ሂደትህን ማስተካከል አለብህ።

ቅጾች

• ሁለቱንም ብጁ እና ነባሪ አመልካች ሳጥኖችን እና ሬዲዮዎችን እንደገና ይፃፉ። አሁን፣ ሁለቱም የሚዛመድ የኤችቲኤምኤል መዋቅር (ውጫዊ <div>ከወንድም እህት <input>እና <label>) እና ተመሳሳይ የአቀማመጥ ቅጦች (የተደራረቡ ነባሪ፣ ከቀያሪ ክፍል ጋር መስመር ውስጥ) አላቸው። ይህ በመግቢያው ሁኔታ ላይ በመመስረት መለያውን እንድንስል ያስችለናል፣ ለባህሪው ድጋፍን ለማቅለል disabled(ቀደም ሲል የወላጅ ክፍል የሚፈልግ) እና የቅጽ ማረጋገጫችንን በተሻለ ሁኔታ ይደግፋል።

  እንደዚሁ አካል፣ background-imageበብጁ ቅጽ አመልካች ሳጥኖች እና በራዲዮዎች ላይ ብዙ ዎች ለማስተዳደር 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-textSass ተለዋዋጭነታቸው ላይ ለውጥ አግኝተዋል። ከአሁን በኋላ የጎጆ የሳስ ካርታ አይደለም እና አሁን አንድ ሕብረቁምፊ ብቻ ነው የሚሰራው - Browseአዝራሩ አሁን ከ Sass የሚመነጨው ብቸኛው የውሸት አካል ነው። ጽሑፉ Choose fileአሁን የመጣው ከ .custom-file-label.

የግቤት ቡድኖች

• የግቤት ቡድን ተጨማሪዎች አሁን ከግቤት አንፃር ለምደባቸው የተለዩ ናቸው። ጥለናል .input-group-addonእና .input-group-btnለሁለት አዳዲስ ክፍሎች፣ .input-group-prependእና .input-group-append. የእኛን ሲኤስኤስ በማቃለል አሁን አባሪ ወይም ቅድመ ዝግጅትን በግልፅ መጠቀም አለቦት። በአባሪ ወይም በቅድመ ዝግጅት ውስጥ፣ የእርስዎን አዝራሮች ሌላ ቦታ እንደሚኖሩ አድርገው ያስቀምጡ፣ ነገር ግን ጽሑፍን ጠቅልለው .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) ስለተከለከለ የተጣለ የቦወር ድጋፍ። ለዝርዝር መረጃ ቦወር/ቦወር #2298 ይመልከቱ።
• Bootstrap አሁንም jQuery 1.9.1 ወይም ከዚያ በላይ ይፈልጋል፣ ነገር ግን በ v3.x የሚደገፉ አሳሾች ቡትስትራፕ የሚደግፉት እና v3.x አንዳንድ የደህንነት መጠገኛዎች ስላሉት ስሪት 3.x እንዲጠቀሙ ይመከራሉ።
• ጥቅም ላይ ያልዋለውን .form-control-labelክፍል ተወግዷል። ይህን ክፍል ከተጠቀምክበት፣ በአግድም ቅርጽ አቀማመጦች ውስጥ ካለው ተዛማጅ ግብአት ጋር .col-form-labelበአቀባዊ ያማከለ የክፍሉ ብዜት ነበር።<label>
• ንብረቱን ካካተተው color-yiqድብልቅ 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 እና WebView ይፋዊ ድጋፍ ታክሏል። የቀደሙት የአንድሮይድ አሳሽ እና የድር እይታ ስሪቶች በይፋ ያልተደገፉ ብቻ ይቆያሉ።

ዓለም አቀፍ ለውጦች

• Flexbox በነባሪነት ነቅቷል። በአጠቃላይ ይህ ማለት ከተንሳፋፊዎች እና ከሌሎች አካላት መራቅ ማለት ነው።
• ለ CSS ፋይሎቻችን ከትንሽ ወደ Sass ተቀይሯል ።
• ከዋናው የ CSS አሃዳችን ተቀይሯል px፣ remምንም እንኳን የመሳሪያ መመልከቻዎች በአይነት መጠን ስለማይነኩ ፒክስሎች አሁንም ለሚዲያ ጥያቄዎች እና ለፍርግርግ ባህሪ ያገለግላሉ።
• የአለም ቅርጸ-ቁምፊ መጠን ከ 14pxወደ ጨምሯል 16px።
• አምስተኛውን አማራጭ ለመጨመር የታደሰ የፍርግርግ እርከኖች (ትንንሽ መሣሪያዎችን እና በታች ያሉትን አድራሻዎች ) እና መረጃውን ከነዚያ ክፍሎች 576pxአስወግደዋል ። -xsምሳሌ .col-6.col-sm-4.col-md-3፡.
• የተለየውን የአማራጭ ጭብጥ በ SCSS ተለዋዋጮች በኩል በሚዋቀሩ አማራጮች ተተክቷል (ለምሳሌ $enable-gradients: true፡)።
• ከግሩንት ይልቅ ተከታታይ የ npm ስክሪፕቶችን ለመጠቀም የተስተካከለ ስርዓት ይገንቡ። package.jsonሁሉንም ስክሪፕቶች፣ ወይም የፕሮጀክታችንን ማንበብ ለአካባቢ ልማት ፍላጎቶች ይመልከቱ ።
• ምላሽ የማይሰጥ የBootstrap አጠቃቀም ከአሁን በኋላ አይደገፍም።
• የበለጠ ሰፊ የማዋቀር ሰነዶችን እና ብጁ ግንባታዎችን በመደገፍ የመስመር ላይ ማበጀትን ጥሏል።
• ለጋራ የሲኤስኤስ ንብረት-እሴት ጥንዶች እና የኅዳግ/የማጥፊያ ክፍተት አቋራጮች በደርዘን የሚቆጠሩ አዳዲስ የመገልገያ ክፍሎችን ታክለዋል።

የፍርግርግ ስርዓት

• ወደ 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የቅድመ ዝግጅት ድብልቅን ለመጠቀም የተዘመኑ የፍርግርግ ድብልቆች እና make-colየ flexእና max-widthየግለሰብ አምድ መጠንን ለማዘጋጀት።
  • ለአዲሱ የፍርግርግ እርከን መለያ እና ዓምዶች በከፍተኛ ስፋታቸው እኩል መከፋፈላቸውን ለማረጋገጥ የፍርግርግ ስርዓት የሚዲያ መግቻ ነጥቦች እና የመያዣ ስፋቶች ተለውጠዋል 12።
  • የፍርግርግ መግቻ ነጥቦች እና የእቃ መያዢያ ስፋቶች አሁን የሚስተናገዱት በ Sass ካርታዎች በኩል ነው ( $grid-breakpointsእና $container-max-widths) ከጥቂት ተለዋዋጮች ይልቅ። እነዚህ @screen-*ተለዋዋጮችን ሙሉ በሙሉ ይተካሉ እና የፍርግርግ ደረጃዎችን ሙሉ በሙሉ እንዲያበጁ ያስችሉዎታል።
  • የሚዲያ ጥያቄዎችም ተለውጠዋል። የእኛን የሚዲያ ጥያቄ መግለጫ በእያንዳንዱ ጊዜ በተመሳሳይ ዋጋ ከመድገም ይልቅ፣ አሁን አለን @include media-breakpoint-up/down/only። አሁን, ከመጻፍ ይልቅ, መጻፍ @media (min-width: @screen-sm-min) { ... }ይችላሉ @include media-breakpoint-up(sm) { ... }.

አካላት

• የተጣሉ ፓነሎች፣ ጥፍር አከሎች እና ጉድጓዶች ለአዲስ ሁሉን አቀፍ አካል፣ ካርዶች ።
• የGlyphicons አዶ ቅርጸ-ቁምፊን ወድቋል። አዶዎች ከፈለጉ አንዳንድ አማራጮች የሚከተሉት ናቸው፡-
  • የላይኛው የ Glyphicons ስሪት
  • ኦክቲክስ
  • ፊደላት ግሩም
  • ለአማራጮች ዝርዝር የ Extend ገጽን ይመልከቱ ። ተጨማሪ ጥቆማዎች አሉዎት? እባክዎን ችግር ወይም PR ይክፈቱ።
• የ Affix jQuery ፕለጊን ተጥሏል።
  • position: stickyበምትኩ እንዲጠቀሙ እንመክራለን . ለዝርዝሮች እና የተወሰኑ የፖሊ ሙሌት ምክሮችን HTML5 ይመልከቱ ። አንዱ ጥቆማ እሱን @supportsለመተግበር ህግን መጠቀም ነው (ለምሳሌ @supports (position: sticky) { ... }፡)
  • ተጨማሪ ቅጦችን ለመተግበር Affixን እየተጠቀሙ ከነበረ position፣ ፖሊ ሙላቶች የአጠቃቀም ጉዳይዎን ላይደግፉ ይችላሉ። ለእንደዚህ አይነት አጠቃቀሞች አንዱ አማራጭ የሶስተኛ ወገን ScrollPos-Styler ቤተ-መጽሐፍት ነው።
• በመሠረቱ በትንሹ የተበጁ አዝራሮች ስለነበር የፔጀር ክፍሉን ወርውሯል ።
• ከሞላ ጎደል ሁሉንም ክፍሎች ይበልጥ የጎጆ ያልሆኑ የክፍል መራጮችን ከመጠን በላይ ልዩ ከሆኑ ልጆች መራጮች ለመጠቀም እንደገና ተሰራ።

በክፍል

ይህ ዝርዝር በ v3.xx እና v4.0.0 መካከል ባለው አካል ቁልፍ ለውጦችን ያደምቃል።

ዳግም አስነሳ

ለ Bootstrap 4 አዲስ የሆነው ዳግም ማስነሳት ነው፣ አዲስ የቅጥ ሉህ በ 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-*አሁን በምትኩ ክፍሎችን ተጠቀም ።
• ለብሎክ -ደረጃ እገዛ ጽሑፍ ተጥሎ .help-blockተካው ። .form-textለውስጠ-መስመር የእርዳታ ጽሑፍ እና ሌሎች ተለዋዋጭ አማራጮች እንደ የመገልገያ ክፍሎችን ይጠቀሙ .text-muted።
• ወድቋል .radio-inlineእና .checkbox-inline.
• የተጠናከረ .checkboxእና .radioወደ .form-checkእና የተለያዩ .form-check-*ክፍሎች።
• አግድም ቅርጾች ተስተካክለዋል፡-
  • .form-horizontalየክፍል መስፈርቱን ጥሏል ።
  • .form-groupከአሁን በኋላ ቅጦችን .rowበ mixin በኩል አይተገበርም፣ ስለዚህ .rowአሁን ለአግድም ፍርግርግ አቀማመጦች (ለምሳሌ፣ <div class="form-group row">) ያስፈልጋል።
  • .col-form-labelአዲስ ክፍል ወደ ቁመታዊ መሃል መለያዎች ከ .form-controls ጋር ታክሏል ።
  • .form-rowከፍርግርግ ክፍሎች ጋር ለተጨባጭ ቅፅ አቀማመጦች አዲስ ታክሏል ( .rowለሀ .form-rowእና ይሂዱ)።
• የተጨመሩ ብጁ ቅጾች ድጋፍ (ለአመልካች ሳጥኖች፣ ሬዲዮዎች፣ ምርጫዎች እና የፋይል ግብዓቶች)።
• በኤችቲኤምኤል 5 የማረጋገጫ ቅጽ በCSS እና በይስሙላ ክፍሎች የተተኩ .has-error፣ .has-warningእና ክፍሎች።.has-success:invalid:valid
• ተብሎ ተቀይሯል .form-control-static።.form-control-plaintext

አዝራሮች

• ተብሎ ተቀይሯል .btn-default።.btn-secondary
• በተመጣጣኝ ሁኔታ ከv3 ዎች ያነሰ በመሆኑ .btn-xsክፍሉን ሙሉ በሙሉ ወድቋል።.btn-sm
• የ jQuery ፕለጊን የግዛታዊ አዝራር ባህሪ button.jsተጥሏል። ይህ ዘዴዎችን $().button(string)እና $().button('reset')ዘዴዎችን ያጠቃልላል። በምትኩ ትንሽ ብጁ ጃቫ ስክሪፕት እንድትጠቀም እንመክርሃለን፣ ይህም እርስዎ በፈለጋችሁት መንገድ በትክክል የመምራት ጥቅም ይኖረዋል።
  • ሌሎች የፕለጊኑ ባህሪያት (የአዝራር አመልካች ሳጥኖች፣ የአዝራር ራዲዮዎች፣ ነጠላ-መቀያየር ቁልፎች) በ v4 ውስጥ እንደቆዩ ልብ ይበሉ።
• አዝራሮችን [disabled]ወደ :disabledIE9+ ድጋፍ ይቀይሩ :disabled። ነገር fieldset[disabled]ግን አሁንም አስፈላጊ ነው ምክንያቱም ቤተኛ የተሰናከሉ የመስክ ስብስቦች በ IE11 ውስጥ አሁንም ችግር አለባቸው ።

የአዝራር ቡድን

• አካልን በ flexbox እንደገና ይፃፉ።
• ተወግዷል .btn-group-justified። እንደ ምትክ <div class="btn-group d-flex" role="group"></div>በንጥረ ነገሮች ዙሪያ እንደ መጠቅለያ መጠቀም ይችላሉ .w-100.
• .btn-group-xsሙሉ በሙሉ የተሰጠውን ክፍል አቋርጧል .btn-xs።
• በአዝራሮች የመሳሪያ አሞሌዎች ውስጥ በአዝራሮች ቡድኖች መካከል ግልጽ የሆነ ክፍተት ተወግዷል; የኅዳግ መገልገያዎችን አሁን ተጠቀም።
• ከሌሎች አካላት ጋር ለመጠቀም የተሻሻለ ሰነድ።

መውረድ

• ከወላጅ መራጮች ወደ ነጠላ ክፍሎች ለሁሉም ክፍሎች፣ መቀየሪያዎች፣ ወዘተ ተቀይሯል።
• ቀለል ያሉ ተቆልቋይ ቅጦች ከተቆልቋይ ምናሌው ጋር በማያያዝ ወደ ላይ ወይም ወደ ታች የሚመለከቱ ቀስቶች እንዳይላኩ
• መውረድ በ <div>s ወይም <ul>s አሁን መገንባት ይቻላል።
• <a>ቀላል፣ አብሮገነብ እና <button>የተቆልቋይ ንጥሎችን ድጋፍ ለማቅረብ የተቆልቋይ ስታይል እና ምልክት ማድረጊያን እንደገና ገንባ ።
• ተብሎ ተቀይሯል .divider።.dropdown-divider
• የማውረድ ዕቃዎች አሁን ያስፈልጋቸዋል .dropdown-item።
• የማውረድ መቀየሪያዎች ከአሁን በኋላ ግልጽነት አያስፈልጋቸውም <span class="caret"></span>; ይህ አሁን በቀጥታ በ CSS በኩል ::afterይቀርባል .dropdown-toggle።

የፍርግርግ ስርዓት

• አዲስ 576pxየፍርግርግ መግቻ ነጥብ እንደ ታክሏል sm፣ ይህም ማለት አሁን አምስት ጠቅላላ እርከኖች አሉ ( xs, sm, md, lgእና xl)።
• .col-{breakpoint}-{modifier}-{size}ምላሽ ሰጪ የፍርግርግ ማሻሻያ ክፍሎችን .{modifier}-{breakpoint}-{size}ለቀላል የፍርግርግ ክፍሎች እንደገና ተሰይሟል።
• ለአዲሱ flexbox-powered orderክፍሎች የግፋ እና የመጎተት ትምህርት። ለምሳሌ፣ በምትኩ .col-8.push-4እና .col-4.pull-8፣ ትጠቀማለህ .col-8.order-2እና .col-4.order-1.
• ለግሪድ ሲስተም እና አካላት የፍሌክስቦክስ መገልገያ ክፍሎች ታክለዋል።

ቡድኖችን ዘርዝር

• አካልን በ flexbox እንደገና ይፃፉ።
• የዝርዝር ቡድን ንጥሎችን አገናኝ እና የአዝራር ስሪቶች a.list-group-itemግልጽ በሆነ ክፍል ተተካ ።.list-group-item-action
• .list-group-flushከካርዶች ጋር ለመጠቀም ክፍል ታክሏል ።

ሞዳል

• አካልን በ flexbox እንደገና ይፃፉ።
• ወደ flexbox ከተወሰዱ በኋላ፣ ተንሳፋፊዎችን ስለማንጠቀም በርዕሱ ውስጥ ያሉ የስንብት አዶዎችን ማስተካከል ሊሰበር ይችላል። የተንሳፈፈ ይዘት መጀመሪያ ይመጣል፣ ነገር ግን በ flexbox ያ ከአሁን በኋላ ጉዳዩ አይደለም። ከሞዳል አርእስቶች በኋላ እንዲመጡ የማሰናበት አዶዎችዎን ያዘምኑ።
• አማራጩ remote(ውጫዊ ይዘትን በራስ ሰር ለመጫን እና ወደ ሞዳል ለማስገባት ጥቅም ላይ ሊውል ይችላል) እና ተጓዳኝ loaded.bs.modalክስተቱ ተወግዷል። በምትኩ ከደንበኛ-ጎን ቴምፕሊንግ ወይም የውሂብ ማሰሪያ ማዕቀፍ ወይም jQuery.load እራስዎ በመደወል እንመክራለን።

ናቪስ

• አካልን በ flexbox እንደገና ይፃፉ።
• >የጎጆ ባልሆኑ ክፍሎች በኩል ለቀላል የቅጥ አሰራር ሁሉንም መራጮች ተጥሏል ።
• እንደ ኤችቲኤምኤል-ተኮር መራጮች ይልቅ ለ s፣ s እና s .nav > li > aየተለየ ክፍሎችን እንጠቀማለን ። ይህ የአንተን ኤችቲኤምኤል የበለጠ ተለዋዋጭ ያደርገዋል እና የተጨመረው ቅልጥፍናን ያመጣል።.nav.nav-item.nav-link

ናቭባር

የ navbar አሰላለፍ፣ ምላሽ ሰጪነት እና ማበጀት በተሻሻለ ድጋፍ በፍሌክስ ሳጥን ውስጥ ሙሉ በሙሉ ተጽፏል።

• ምላሽ ሰጪ የ navbar ባህሪያት አሁን በሚያስፈልገው.navbar በኩል የናቭባርን የት እንደሚወድቁ በመረጡት ክፍል ላይ ይተገበራሉ። ከዚህ ቀደም ይህ ትንሽ ተለዋዋጭ ማሻሻያ እና እንደገና ማጠናቀር አስፈላጊ ነበር። .navbar-expand-{breakpoint}
• .navbar-defaultአሁን ነው .navbar-light, ምንም እንኳን .navbar-darkአሁንም ቢሆን. ከእነዚህ ውስጥ አንዱ በእያንዳንዱ ናቭባር ላይ ያስፈልጋል። ይሁን እንጂ እነዚህ ክፍሎች ከአሁን በኋላ background-colors ማዘጋጀት አይችሉም; ይልቁንም እነሱ በመሠረቱ ላይ ብቻ ተጽዕኖ ያሳድራሉ color.
• Navbars አሁን የሆነ ዓይነት የጀርባ መግለጫ ያስፈልጋቸዋል። ለዕብድ ማበጀት ከኛ የጀርባ መገልገያዎች ( .bg-*) ይምረጡ ወይም ከላይ ባሉት የብርሃን/ተገላቢጦሽ ክፍሎች የራስዎን ያዘጋጁ ።
• ከFlexbox ቅጦች አንጻር፣ navbars አሁን ለቀላል አሰላለፍ አማራጮች የflexbox መገልገያዎችን መጠቀም ይችላሉ።
• .navbar-toggleአሁን ነው .navbar-togglerእና የተለያዩ ቅጦች እና ውስጣዊ መለያዎች አሉት (ከእንግዲህ ሶስት <span>ሰከንድ የለም)።
• .navbar-formክፍሉን ሙሉ በሙሉ ተወው . ከአሁን በኋላ አስፈላጊ አይደለም; በምትኩ፣ .form-inlineእንደ አስፈላጊነቱ የኅዳግ መገልገያዎችን ብቻ ተጠቀም።
• Navbars ከአሁን በኋላ አያካትቱም margin-bottomወይም border-radiusበነባሪነት። እንደ አስፈላጊነቱ መገልገያዎችን ይጠቀሙ.
• Navbarsን የሚያሳዩ ሁሉም ምሳሌዎች አዲስ ምልክት ማድረጊያን ለማካተት ተዘምነዋል።

ፔጅኒሽን

• አካልን በ flexbox እንደገና ይፃፉ።
• ግልጽ ክፍሎች ( .page-item፣ .page-link) አሁን በ .paginations ዘሮች ላይ ያስፈልጋሉ።
• ክፍሉ ከተበጁ የዝርዝር .pagerአዝራሮች ትንሽ ስለሚበልጥ ሙሉ ለሙሉ ተጥሏል።

የዳቦ ፍርፋሪ

• ግልጽ ክፍል፣ .breadcrumb-itemአሁን በ .breadcrumbs ዘሮች ላይ ያስፈልጋል

መለያዎች እና ባጆች

• የተዋሃደ .labelእና .badgeከኤለመንቱ ለመለየት <label>እና ተዛማጅ ክፍሎችን ለማቃለል.
• .badge-pillለተጠጋጋ “ክኒን” እይታ እንደ መቀየሪያ ታክሏል ።
• ባጆች ከአሁን በኋላ በዝርዝር ቡድኖች እና ሌሎች አካላት ውስጥ በራስ ሰር አይንሳፈፉም። ለዚያ የመገልገያ ክፍሎች አሁን ያስፈልጋሉ።
• .badge-default.badge-secondaryሌላ ቦታ ጥቅም ላይ ውሎ ወደ ግጥሚያ ክፍል መቀየሪያ ክፍሎች ተጥሏል እና ታክሏል።

ፓነሎች፣ ድንክዬዎች እና ጉድጓዶች

ለአዲሱ የካርድ አካል ሙሉ በሙሉ ተጥሏል።

ፓነሎች

• .panelወደ .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-colorsSass ካርታ የተፈጠሩ ናቸው.

እድገት

• የአውድ .progress-bar-*ክፍሎችን .bg-*በመገልገያዎች ተተኩ። ለምሳሌ ፣ class="progress-bar progress-bar-danger"ይሆናል class="progress-bar bg-danger"።
• ለአኒሜሽን .activeየሂደት አሞሌዎች በ ተተካ .progress-bar-animated።

ካሩሰል

• ዲዛይን እና የቅጥ አሰራርን ለማቃለል ሙሉውን ክፍል ተሻሽሏል። እርስዎ የሚሽሩበት ያነሱ ቅጦች፣ አዲስ አመልካቾች እና አዲስ አዶዎች አሉን።
• እያንዳንዱ ክፍል በቅድመ-ቅጥያ መያዙን በማረጋገጥ ሁሉም ሲኤስኤስ ያልተሰየመ እና የተቀየረ ነው .carousel-።
  • ለካሮሴል ዕቃዎች .next፣፣፣፣ እና አሁን .prev፣፣፣ እና ናቸው ።.left.right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
  • .itemአሁን ደግሞ ነው .carousel-item.
  • ለቅድመ/ቀጣይ ቁጥጥሮች፣ .carousel-control.rightእና .carousel-control.leftአሁን .carousel-control-nextእና ናቸው .carousel-control-prev፣ ይህም ማለት ከአሁን በኋላ የተለየ የመሠረት ክፍል አያስፈልጋቸውም።
• ሁሉንም ምላሽ ሰጪ ቅጥ ተወግዷል፣ ወደ መገልገያዎች (ለምሳሌ፣ በተወሰኑ የእይታ ቦታዎች ላይ መግለጫ ጽሑፎችን ማሳየት) እና እንደ አስፈላጊነቱ ብጁ ቅጦች።
• የተወገደ ምስል በካሩሰል እቃዎች ውስጥ ያሉ ምስሎችን ይሽራል፣ ወደ መገልገያዎች በማስተላለፍ ላይ።
• አዲሱን ምልክት ማድረጊያ እና ቅጦችን ለማካተት የCarousel ምሳሌን አሻሽሏል።

ጠረጴዛዎች

• በቅጥ የተሰሩ የጎጆ ጠረጴዛዎች ድጋፍ ተወግዷል። ሁሉም የሰንጠረዥ ቅጦች አሁን ለቀላል መራጮች በ v4 ተወርሰዋል።
• የተገላቢጦሽ ሰንጠረዥ ተለዋጭ ታክሏል።

መገልገያዎች

• አሳይ፣ የተደበቀ እና ሌሎችም፦
  • የማሳያ መገልገያዎችን ምላሽ ሰጭ (ለምሳሌ፣ .d-noneእና d-{sm,md,lg,xl}-none)።
  • .hidden-*ለአዲስ ማሳያ መገልገያዎች ብዙ መገልገያዎችን ጥሏል ። ለምሳሌ, በምትኩ .hidden-sm-up, ይጠቀሙ .d-sm-none. የማሳያውን .hidden-printየመገልገያ መሰየሚያ ዘዴ ለመጠቀም መገልገያዎቹን እንደገና ሰይመዋል። በዚህ ገጽ ምላሽ ሰጪ መገልገያዎች ክፍል ስር ተጨማሪ መረጃ ።
  • .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ክፍል ተጥሏል ።
• የቆዩ የአሳሽ ስሪቶች ድጋፍን ለመጣል Clearfix ተዘምኗል።

የአቅራቢ ቅድመ ቅጥያ ድብልቅ

በv3.2.0 ውስጥ የተቋረጡት የቡትስትራፕ 3 አቅራቢ ቅድመ ቅጥያ ድብልቅ፣ በ Bootstrap 4 ውስጥ ተወግደዋል። Autoprefixer ስለምንጠቀም ከአሁን በኋላ አስፈላጊ አይደሉም።

የሚከተሉት ድብልቆች ተወግደዋል : animation,,,,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

ሰነድ

የእኛ ሰነድ በቦርዱ ላይም ማሻሻያ አግኝቷል። ዝቅተኛው እዚህ አለ

• አሁንም ጄኪልን እየተጠቀምን ነው፣ ነገር ግን በድብልቅ ውስጥ ተሰኪዎች አሉን፡
  • bugify.rbበአሳሽ ሳንካ ገጻችን ላይ ያሉትን ግቤቶች በብቃት ለመዘርዘር ይጠቅማል ።
  • example.rbhighlight.rbቀላል የምሳሌ ኮድ አያያዝን የሚፈቅድ የነባሪው ተሰኪ ብጁ ሹካ ነው ።
  • callout.rbየዚያ ተመሳሳይ ብጁ ሹካ ነው፣ ግን ለልዩ ሰነዶች ጥሪዎች የተነደፈ።
  • jekyll-toc የእኛን የይዘት ሠንጠረዥ ለማምረት ያገለግላል።
• ለቀላል አርትዖት ሁሉም የሰነዶች ይዘት በማርክdown (ከኤችቲኤምኤል ፈንታ) እንደገና ተጽፏል።
• ገፆች ለቀላል ይዘት እና ይበልጥ ሊቀረብ የሚችል ተዋረድ ተዘጋጅተዋል።
• የBootstrap ተለዋዋጮችን፣ ሚክሌክስን እና ሌሎችንም ሙሉ በሙሉ ለመጠቀም ከመደበኛው CSS ወደ SCSS ተንቀሳቅሰናል።

ምላሽ ሰጪ መገልገያዎች

ሁሉም @screen-ተለዋዋጮች በ v4.0.0 ተወግደዋል። media-breakpoint-up()በምትኩ የ ,, media-breakpoint-down()ወይም media-breakpoint-only()Sass mixins ወይም $grid-breakpointsSass ካርታ ይጠቀሙ ።

የእኛ ምላሽ ሰጪ የፍጆታ ክፍሎች በአብዛኛው ተወግደዋል ግልጽ የሆኑ displayመገልገያዎችን ይደግፋል።

• .hiddenክፍሎቹ እና .showክፍሎቹ የተወገዱት ከ jQuery እና ዘዴዎች ጋር ስለሚጋጩ $(...).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 መጠቀም ያስፈልግዎታል።