Source

አሳሾች እና መሳሪያዎች

በBootstrap ስለሚደገፉ ከዘመናዊ እስከ አሮጌ ስለ አሳሾች እና መሳሪያዎች ይወቁ፣ ለእያንዳንዳቸው የሚታወቁ ስህተቶችን እና ስህተቶችን ጨምሮ።

የሚደገፉ አሳሾች

ቡትስትራፕ የሁሉም ዋና አሳሾች እና መድረኮች የቅርብ ጊዜ የተረጋጋ ልቀቶችን ይደግፋል። በዊንዶውስ ላይ ኢንተርኔት ኤክስፕሎረር 10-11 / Microsoft Edgeን እንደግፋለን ።

በቀጥታም ሆነ በመድረክ የድር እይታ ኤፒአይ የቅርብ ጊዜውን የWebKit፣ Blink ወይም Gecko ስሪት የሚጠቀሙ አማራጭ አሳሾች በግልጽ አይደገፉም። ሆኖም ቡትስትራፕ (በአብዛኛው) በእነዚህ አሳሾች ውስጥም በትክክል ማሳየት እና መስራት አለበት። የበለጠ የተለየ የድጋፍ መረጃ ከዚህ በታች ቀርቧል።

የእኛን የሚደገፉ የአሳሾች ክልል እና ስሪቶቻቸውን በእኛ ውስጥpackage.json ማግኘት ይችላሉ ።

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

የታሰበውን የአሳሽ ድጋፍ በCSS ቅድመ ቅጥያዎች ለማስተናገድ Autoprefixer እንጠቀማለን ፣ እነዚህ የአሳሽ ስሪቶችን ለማስተዳደር Browserslist ን ይጠቀማል። እነዚህን መሳሪያዎች ወደ ፕሮጀክቶችዎ እንዴት እንደሚያዋህዱ ሰነዶቻቸውን ያማክሩ።

ተንቀሳቃሽ መሳሪያዎች

በአጠቃላይ፣ ቡትስትራፕ የእያንዳንዱን ዋና የመሣሪያ ስርዓት ነባሪ አሳሾች የቅርብ ጊዜ ስሪቶችን ይደግፋል። ፕሮክሲ አሳሾች (እንደ ኦፔራ ሚኒ፣ ኦፔራ ሞባይል ቱርቦ ሁነታ፣ ዩሲ ብሮውዘር ሚኒ፣ Amazon Silk ያሉ) እንደማይደገፉ ልብ ይበሉ።

Chrome ፋየርፎክስ ሳፋሪ አንድሮይድ አሳሽ እና የድር እይታ የማይክሮሶፍት ጠርዝ
አንድሮይድ የሚደገፍ የሚደገፍ ኤን/ኤ አንድሮይድ v5.0+ ይደገፋል የሚደገፍ
iOS የሚደገፍ የሚደገፍ የሚደገፍ ኤን/ኤ የሚደገፍ
ዊንዶውስ 10 ሞባይል ኤን/ኤ ኤን/ኤ ኤን/ኤ ኤን/ኤ የሚደገፍ

የዴስክቶፕ አሳሾች

በተመሳሳይ፣ የአብዛኛው የዴስክቶፕ አሳሾች የቅርብ ጊዜ ስሪቶች ይደገፋሉ።

Chrome ፋየርፎክስ ኢንተርኔት ኤክስፕሎረር የማይክሮሶፍት ጠርዝ ኦፔራ ሳፋሪ
ማክ የሚደገፍ የሚደገፍ ኤን/ኤ ኤን/ኤ የሚደገፍ የሚደገፍ
ዊንዶውስ የሚደገፍ የሚደገፍ የሚደገፍ፣ IE10+ የሚደገፍ የሚደገፍ አይደገፍም

ለፋየርፎክስ፣ ከቅርብ ጊዜው መደበኛ የተረጋጋ ልቀት በተጨማሪ፣ የቅርብ ጊዜውን የተራዘመ የድጋፍ ልቀት (ESR) የፋየርፎክስ ስሪትንም እንደግፋለን።

በይፋ ባይሆንም ቡትስትራፕ በChromium እና Chrome ለሊኑክስ፣ ፋየርፎክስ ለሊኑክስ እና ኢንተርኔት ኤክስፕሎረር 9 ላይ በደንብ መመልከት እና ጥሩ ባህሪ ማሳየት አለበት።

ለአንዳንድ የአሳሽ ሳንካዎች ዝርዝር ቡትስትራፕ ሊታገልባቸው የሚገቡ፣ የእኛን ግድግዳ ይመልከቱ የአሳሽ ሳንካዎች ።

ኢንተርኔት ኤክስፕሎረር

ኢንተርኔት ኤክስፕሎረር 10+ ይደገፋል; IE9 እና ታች አይደለም. እባክዎን አንዳንድ የCSS3 ንብረቶች እና HTML5 አባሎች በIE10 ውስጥ ሙሉ ለሙሉ የማይደገፉ ወይም ለሙሉ ተግባር ቅድመ ቅጥያ ባህሪያት እንደሚያስፈልጋቸው ይወቁ። ስለ CSS3 እና HTML5 ባህሪያት የአሳሽ ድጋፍ ዝርዝሮችን ለማግኘት መጠቀም እችላለሁ… ን ይጎብኙ ።

የIE8-9 ድጋፍ ከፈለጉ፣ Bootstrap 3 ን ይጠቀሙ። በጣም የተረጋጋው የኮድ እትም ነው እና አሁንም ለወሳኝ ስህተቶች እና የሰነድ ለውጦች በቡድናችን ይደገፋል። ሆኖም፣ ምንም አዲስ ባህሪያት በእሱ ላይ አይታከሉም።

በሞባይል ላይ ሞዴሎች እና ተቆልቋዮች

ከመጠን በላይ መፍሰስ እና ማሸብለል

overflow: hidden;በኤለመንቱ ላይ ያለው ድጋፍ <body>በ iOS እና Android ውስጥ በጣም የተገደበ ነው። ለዚያም በእነዚያ መሳሪያዎች ማሰሻ ውስጥ የሞዳልን ከላይ ወይም ታች ሲያሸብልሉ <body>ይዘቱ መሸብለል ይጀምራል። የ Chrome ስህተት #175502 (በChrome v40 የተስተካከለ) እና WebKit bug #153852 ይመልከቱ ።

የ iOS ጽሑፍ መስኮች እና ማሸብለል

<input>ከ iOS 9.2 ጀምሮ፣ ሞዳል ክፍት ሆኖ ሳለ፣ የጥቅልል ምልክት የመጀመሪያ ንክኪ በጽሑፍ ወይም በ ወሰን ውስጥ ከሆነ <textarea>፣ <body>በሞዳል ስር ያለው ይዘት በራሱ ሞዳል ፈንታ ይሸበለላል። WebKit ስህተት #153856 ይመልከቱ ።

ኤለመንት በ .dropdown-backdropz-indexing ውስብስብነት ምክንያት በባህር ኃይል ውስጥ በ iOS ላይ ጥቅም ላይ አይውልም. ስለዚህ በ navbars ውስጥ ተቆልቋይዎችን ለመዝጋት ተቆልቋይ ኤለመንቱን (ወይም በ iOS ውስጥ የጠቅታ ክስተትን የሚያነሳ ሌላ ማንኛውም አካል) በቀጥታ ጠቅ ማድረግ አለብዎት ።

አሳሽ ማጉላት

የገጽ ማጉላት በአንዳንድ ክፍሎች፣ በBootstrap እና በተቀረው ድር ላይ ያሉ ቅርሶችን መቅረቡ የማይቀር ነው። በጉዳዩ ላይ በመመስረት፣ ልናስተካክለው እንችላለን (መጀመሪያ ይፈልጉ እና አስፈላጊ ከሆነ ችግር ይክፈቱ)። ይሁን እንጂ ብዙውን ጊዜ ከጠለፋ መፍትሔዎች ውጪ ምንም ዓይነት ቀጥተኛ መፍትሔ ስለሌላቸው እነዚህን ችላ ማለት ይቀናናል።

ተለጣፊ :hover/ :focusበ iOS ላይ

በአብዛኛዎቹ የንክኪ መሳሪያዎች ላይ የማይቻል ቢሆንም :hover፣ iOS ይህን ባህሪ ይኮርጃል፣ በዚህም ምክንያት አንድ ኤለመንት ከነካ በኋላ የሚቆዩ “ተጣብቅ” የማንዣበብ ቅጦችን ያስከትላል። እነዚህ የማንዣበብ ቅጦች የሚወገዱት ተጠቃሚዎች ሌላ አካል ሲነኩ ብቻ ነው። ይህ ባህሪ በአብዛኛው የማይፈለግ ነው ተብሎ ይታሰባል እና በአንድሮይድ ወይም በዊንዶውስ መሳሪያዎች ላይ ችግር የሌለው ይመስላል።

በእኛ v4 አልፋ እና የቅድመ-ይሁንታ ልቀቶች ውስጥ፣ ማንዣበብ በሚመስሉ የንክኪ መሣሪያ አሳሾች ውስጥ የማንዣበብ ስታይልን የሚያሰናክል የሚዲያ መጠይቅ ሺም ለመግባት ያልተሟላ እና አስተያየት ሰጥተናል። ይህ ስራ በፍፁም አልተጠናቀቀም ወይም አልነቃም ነገር ግን ሙሉ በሙሉ መሰባበርን ለማስቀረት፣ ይህንን ሺም ማስቀረት እና ድብልቆችን ለይስሙላ ክፍሎች አቋራጭ አድርገን ለማቆየት መርጠናል።

ማተም

በአንዳንድ ዘመናዊ አሳሾች ውስጥ እንኳን, ማተም አስቸጋሪ ሊሆን ይችላል.

ከSafari v8.0 ጀምሮ፣ ቋሚ ስፋት ያለው .containerክፍል መጠቀም ሳፋሪ በሚታተምበት ጊዜ ባልተለመደ ሁኔታ አነስተኛ የሆነ የቅርጸ-ቁምፊ መጠን እንዲጠቀም ሊያደርግ ይችላል። ለበለጠ ዝርዝር እትም #14868 እና WebKit bug #138192 ይመልከቱ። አንዱ መፍትሔ የሚከተለው CSS ነው።

@media print {
  .container {
    width: auto;
  }
}

አንድሮይድ የአክሲዮን አሳሽ

ከሳጥኑ ውጭ፣ አንድሮይድ 4.1 (እና አንዳንድ አዲስ የተለቀቁም ይመስላል) በአሳሹ መተግበሪያ እንደ ምርጫው ነባሪ የድር አሳሽ (ከChrome በተቃራኒ) ይልካል። እንደ አለመታደል ሆኖ፣ የአሳሹ መተግበሪያ በአጠቃላይ ከCSS ጋር ብዙ ስህተቶች እና አለመጣጣሞች አሉት።

ምናሌን ይምረጡ

በንጥረ <select>ነገሮች ላይ፣ አንድሮይድ ስቶክ አሳሽ ካለ border-radiusእና/ወይም borderከተተገበረ የጎን መቆጣጠሪያዎችን አያሳይም። (ለዝርዝሮች ይህንን የStackOverflow ጥያቄ ይመልከቱ።) አፀያፊውን ሲኤስኤስ ለማስወገድ እና <select>በአንድሮይድ የአክሲዮን አሳሽ ላይ ቅጥ የሌለው አካል ለማድረግ ከዚህ በታች ያለውን የኮድ ቅንጣቢ ይጠቀሙ። የተጠቃሚ ወኪሉ ማሽተት በChrome፣ Safari እና Mozilla አሳሾች ላይ ጣልቃ መግባትን ያስወግዳል።

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ምሳሌ ማየት ይፈልጋሉ? ይህንን የJS Bin ማሳያ ይመልከቱ።

አረጋጋጮች

ለአሮጌ እና አስቸጋሪ አሳሾች በተቻለ መጠን የተሻለውን ተሞክሮ ለማቅረብ ቡትስትራፕ በተለያዩ ቦታዎች ላይ የ CSS አሳሽ ጠለፋዎችን በመጠቀም ልዩ CSSን በተወሰኑ የአሳሽ ስሪቶች ላይ ኢላማ በማድረግ በአሳሾቹ ውስጥ ባሉ ስህተቶች ዙሪያ ለመስራት። እነዚህ ጠለፋዎች የCSS አረጋጋጮች ልክ እንዳልሆኑ ቅሬታ እንዲያሰሙ ያደርጋቸዋል። ባልና ሚስት ቦታዎች ላይ፣ ገና ሙሉ ደረጃቸውን ያልጠበቁ የደም መፍሰስ ጫፍ የሲኤስኤስ ባህሪያትን እንጠቀማለን፣ ነገር ግን እነዚህ ለሂደት መሻሻል ብቻ ያገለግላሉ።

እነዚህ የማረጋገጫ ማስጠንቀቂያዎች በተግባር ምንም አይሆኑም ምክንያቱም የኛ ሲ ኤስ ኤስ ጠለፋ ያልሆነው ክፍል ሙሉ በሙሉ ስለሚፀድቅ እና ጠላፊዎቹ ክፍሎቹ ጠላፊ ያልሆነውን ክፍል በአግባቡ ስራ ላይ ጣልቃ ስለማይገቡ እነዚህን ልዩ ማስጠንቀቂያዎች ሆን ብለን ችላ የምንለው።

የእኛ የኤችቲኤምኤል ዶክመንቶች ለተወሰነ የፋየርፎክስ ስህተት መፍትሄ በማካተታችን ምክንያት አንዳንድ ቀላል እና የማይጠቅሙ የኤችቲኤምኤል ማረጋገጫ ማስጠንቀቂያዎች አሏቸው ።