Source

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

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

የሚደገፉ አሳሾች

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

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

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

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
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 ይህን ባህሪ ይኮርጃል፣ በዚህም ምክንያት አንድ ኤለመንት ከነካ በኋላ የሚቆዩ “ተጣብቅ” የማንዣበብ ቅጦችን ያስከትላል። እነዚህ የማንዣበብ ቅጦች የሚወገዱት ተጠቃሚዎች ሌላ አካል ሲነኩ ብቻ ነው። ይህ ባህሪ በአብዛኛው የማይፈለግ ነው ተብሎ ይታሰባል እና በአንድሮይድ ወይም በዊንዶውስ መሳሪያዎች ላይ ችግር የሌለው ይመስላል።

Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate this shim and keep the mixins as shortcuts for the pseudo-classes.

Printing

Even in some modern browsers, printing can be quirky.

As of Safari v8.0, use of the fixed-width .container class can cause Safari to use an unusually small font size when printing. See issue #14868 and WebKit bug #138192 for more details. One potential workaround is the following CSS:

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

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menu

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

<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>

Want to see an example? Check out this JS Bin demo.

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

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