Source

توركۆرگۈچ ۋە ئۈسكۈنىلەر

Bootstrap قوللايدىغان توركۆرگۈچ ۋە ئۈسكۈنىلەرنى زامانىۋىدىن كوناغىچە ئۆگىنىڭ ، ھەر بىرسىگە بىلىنگەن چاتاق ۋە كەمتۈكلەرنى ئۆز ئىچىگە ئالىدۇ.

قوللايدىغان توركۆرگۈچ

Bootstrap بارلىق ئاساسلىق توركۆرگۈچ ۋە سۇپىلارنىڭ ئەڭ يېڭى ، مۇقىم تارقىتىلىشىنى قوللايدۇ. Windows دا Internet Explorer 10-11 / Microsoft Edge نى قوللايمىز .

WebKit ، Blink ياكى Gecko نىڭ ئەڭ يېڭى نەشرىنى ئىشلىتىدىغان باشقا توركۆرگۈچلەر مەيلى بىۋاسىتە ياكى سۇپىنىڭ تور كۆرۈنۈشى API ئارقىلىق بولسۇن ، ئېنىق قوللىمايدۇ. قانداقلا بولمىسۇن ، Bootstrap (كۆپىنچە ئەھۋاللاردا) بۇ توركۆرگۈچلەردىمۇ توغرا كۆرسىتىلىشى ۋە نورمال ئىشلىشى كېرەك. تۆۋەندە تېخىمۇ ئېنىق قوللاش ئۇچۇرلىرى تەمىنلەندى.

قوللايدىغان توركۆرگۈ دائىرىمىز ۋە ئۇلارنىڭ نەشرىنى بىزدىن.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

بىز Autoprefixer ئارقىلىق CSS ئالدى قوشۇلغۇچىسى ئارقىلىق كۆز يۈگۈرتكۈچ قوللاشنى بىر تەرەپ قىلىمىز ، بۇ توركۆرگۈچ نەشرىنى باشقۇرۇش ئۈچۈن توركۆرگۈچ تىزىملىكى ئىشلىتىدۇ. بۇ قوراللارنى تۈرلىرىڭىزگە قانداق بىرلەشتۈرۈش توغرىسىدىكى ھۆججەتلىرىنى كۆرۈڭ.

كۆچمە ئۈسكۈنىلەر

ئومۇمەن قىلىپ ئېيتقاندا ، Bootstrap ھەر بىر ئاساسلىق سۇپىنىڭ سۈكۈتتىكى توركۆرگۈلىرىنىڭ ئەڭ يېڭى نەشرىنى قوللايدۇ. شۇنىڭغا دىققەت قىلىڭكى ، ۋاكالەتچى توركۆرگۈچلەر (مەسىلەن Opera Mini ، Opera Mobile نىڭ Turbo ھالىتى ، UC تور كۆرگۈچ Mini ، ئامازون يىپەك) نى قوللىمايدۇ.

Chrome Firefox Safari ئاندىرويىد توركۆرگۈ ۋە WebView Microsoft Edge
Android قوللىدى قوللىدى N / A. Android v5.0 + قوللىدى قوللىدى
iOS قوللىدى قوللىدى قوللىدى N / A. قوللىدى
Windows 10 Mobile N / A. N / A. N / A. N / A. قوللىدى

ئۈستەل يۈزى توركۆرگۈلىرى

ئوخشاشلا ، كۆپىنچە ئۈستەل يۈزى توركۆرگۈلىرىنىڭ ئەڭ يېڭى نەشرىنى قوللايدۇ.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac قوللىدى قوللىدى N / A. N / A. قوللىدى قوللىدى
Windows قوللىدى قوللىدى قوللىدى ، IE10 + قوللىدى قوللىدى قوللىمايدۇ

Firefox غا نىسبەتەن ، ئەڭ يېڭى نورمال مۇقىم ئېلان قىلىنغاندىن باشقا ، بىز يەنە Firefox نىڭ ئەڭ يېڭى كېڭەيتىلگەن ياردەم ئېلان قىلىش (ESR) نۇسخىسىنى قوللايمىز.

رەسمىي بولمىغان ئەھۋالدا ، Bootstrap رەسمىي ھالدا قوللىمىسىمۇ ، Linux ئۈچۈن Chromium ۋە Chrome ، Linux ئۈچۈن Firefox ۋە Internet Explorer 9 دە يېتەرلىك ھەرىكەت قىلىشى كېرەك.

Bootstrap بىر تەرەپ قىلىشقا تىگىشلىك بىر قىسىم توركۆرگۈچ كەمتۈكلىرىنىڭ تىزىملىكى ئۈچۈن تور كۆرگۈ كەمتۈكلىرى تېمىمىزنى كۆرۈڭ .

Internet Explorer

Internet Explorer 10+ نى قوللايدۇ. IE9 and down is not. شۇنىڭغا دىققەت قىلىڭكى ، بىر قىسىم CSS3 خۇسۇسىيەتلىرى ۋە HTML5 ئېلېمېنتلىرى IE10 دا تولۇق قوللىمايدۇ ياكى تولۇق ئىقتىدار ئۈچۈن ئالدىنئالا خاسلىق تەلەپ قىلىدۇ. زىيارەت مەن CSS3 ۋە HTML5 ئىقتىدارلىرىنىڭ توركۆرگۈ قوللىشى توغرىسىدىكى تەپسىلاتلارنى ئىشلىتەمدىم؟ ئەگەر IE8-9 قوللاشقا ئېھتىياجلىق بولسىڭىز ، Bootstrap 3 نى ئىشلىتىڭ.

كۆچمە تېلېفوندىكى مودېللار ۋە تۆۋەنلەشلەر

تولۇپ-تاشقان

IOS ۋە ئاندروئىدتا ئېلېمېنتنى قوللاش overflow: hidden;بىر <body>قەدەر چەكلىك. بۇنىڭ ئۈچۈن ، سىز بۇ ئۈسكۈنىلەرنىڭ ھەر قانداق توركۆرگۈدە مودېلنىڭ ئۈستى ياكى ئاستىدىن ئۆتۈپ كەتسىڭىز ، <body>مەزمۇن ئۆرلەشكە باشلايدۇ. Chrome bug # 175502 ( Chrome v40 دا مۇقىملاشتۇرۇلغان) ۋە WebKit خاتالىقى # 153852 گە قاراڭ .

iOS تېكىست مەيدانى ۋە سىيرىلىش

IOS 9.2 دىن باشلاپ ، بىر مودېل ئوچۇق بولسىمۇ ، ئەگەر سىيرىلما قول ئىشارىسىنىڭ دەسلەپكى سېزىمچانلىقى تېكىست <input>ياكى a نىڭ دائىرىسىدە بولسا <textarea>، <body>مودېلنىڭ ئاستىدىكى مەزمۇن مودېلنىڭ ئورنىغا ئۆرۈلۈپ كېتىدۇ. WebKit خاتالىقى # 153856 گە قاراڭ .

بۇ .dropdown-backdropئېلېمېنت z- كۆرسەتكۈچنىڭ مۇرەككەپلىكى سەۋەبىدىن iOS دا ئىشلىتىلمەيدۇ. شۇڭلاشقا ، ناۋايخانىدىكى چۈشۈشنى تاقاش ئۈچۈن ، چوقۇم چۈشۈش ئېلېمېنتىنى (ياكى iOS دىكى چېكىلىش ھادىسىسىنى قوزغىتىدىغان باشقا ئېلېمېنتلارنى ) بىۋاسىتە چېكىشىڭىز كېرەك .

توركۆرگۈچ چوڭايتىش

بەتنى چوڭايتىش مۇقەررەر ھالدا Bootstrap ۋە تورنىڭ باشقا زاپچاسلىرىدا بىر قىسىم زاپچاسلاردا سىزىلغان بۇيۇملارنى كۆرسىتىدۇ. مەسىلىگە ئاساسەن بىز ئۇنى ئوڭشىيالىشىمىز مۇمكىن (ئاۋۋال ئىزدەپ ئاندىن ئېھتىياجلىق بولغاندا مەسىلە ئاچىمىز). قانداقلا بولمىسۇن ، بىز بۇلارغا سەل قارايمىز ، چۈنكى ئۇلارنىڭ ھەمىشە خاككېرلىق خىزمەتتىن باشقا بىۋاسىتە ھەل قىلىش چارىسى يوق.

IOS :hover_ :focus_

:hoverكۆپىنچە سېزىمچان ئۈسكۈنىلەردە مۇمكىن بولمىسىمۇ ، iOS بۇ ھەرىكەتنى تەقلىد قىلىپ ، بىر ئېلېمېنتنى چەككەندىن كېيىنمۇ «يېپىشقاق» ئايلىنىش ئۇسلۇبىنى كەلتۈرۈپ چىقىرىدۇ . ئىشلەتكۈچىلەر باشقا ئېلېمېنتنى چەككەندىلا بۇ خىل يۆتكىلىش ئۇسلۇبى ئۆچۈرۈلىدۇ. بۇ قىلمىش ئاساسەن ياقتۇرمايدىغان دەپ قارىلىدۇ ھەمدە ئاندىرويىد ياكى Windows ئۈسكۈنىلىرىدە مەسىلە يوقتەك قىلىدۇ.

V4 ئالفا ۋە سىناق نەشرىمىزنىڭ ھەممىسىدە ، مېدىيا سۈرۈشتۈرۈش تالونىنى تاللاشنىڭ تولۇق بولمىغان ۋە ئىزاھلانغان كودلىرىنى ئۆز ئىچىگە ئالدۇق. بۇ ئەسەر ئەزەلدىن تولۇق تاماملانمىغان ياكى قوزغىتىلمىغان ، ئەمما تولۇق بۇزۇلۇشتىن ساقلىنىش ئۈچۈن ، بىز بۇ شىلىمنى ئەمەلدىن قالدۇرۇپ ، ئارىلاشمىلارنى ساختا دەرسلەرنىڭ تېزلەتمىسى قىلىپ ساقلاشنى تاللىدۇق.

بېسىش

بەزى زامانىۋى توركۆرگۈچلەردىمۇ بېسىش چاتاق بولىدۇ.

Safari v8.0 دىن باشلاپ ، مۇقىم كەڭلىك .containerسىنىپىنى ئىشلىتىش Safari نى بېسىپ چىقارغاندا ئادەتتىن تاشقىرى كىچىك خەت نۇسخىسىنى ئىشلىتىشىنى كەلتۈرۈپ چىقىرىدۇ. تېخىمۇ كۆپ تەپسىلات ئۈچۈن # 14868 ۋە WebKit خاتالىقى # 138192 دىن كۆرۈڭ. بىر يوشۇرۇن خىزمەت ئۇسۇلى تۆۋەندىكى CSS:

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

ئاندىرويىد پايچېكى

رامكا ئىچىدە ، ئاندىرويىد 4.1 (ھەتتا بەزى يېڭى نەشرى ئېلان قىلىنغان) توركۆرگۈ دېتالىنى كۆڭۈلدىكى توركۆرگۈ سۈپىتىدە تاللايدۇ (Chrome غا ئوخشىمايدۇ). بەختكە قارشى ، توركۆرگۈچ دېتالىدا CSS بىلەن نۇرغۇن خاتالىق ۋە ماسلاشماسلىق بار.

تىزىملىكنى تاللاڭ

ئېلېمېنتلاردا ، ئاندىرويىد پاي چېكى تور <select>كۆرگۈسى ئەگەر border-radiusۋە ياكى borderقوللىنىلغان بولسا يان كونترولنى كۆرسەتمەيدۇ. (تەپسىلاتىنى بۇ StackOverflow سوئالىغا قاراڭ .) تۆۋەندىكى كود پارچىلىرىنى ئىشلىتىپ ، رەنجىگەن CSS نى ئۆچۈرۈۋېتىڭ ھەمدە <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 كۆرسەتمىسىنى تەكشۈرۈپ بېقىڭ .

دەلىللىگۈچىلەر

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.

بىزنىڭ HTML ھۆججىتىمىزدە ئوخشاشلا Firefox نىڭ مەلۇم بىر خاتالىق ئۈچۈن خىزمەت جەدۋىلىنى ئۆز ئىچىگە ئالغانلىقىمىز ئۈچۈن بەزى ئۇششاق ۋە ئەھمىيەتسىز HTML دەلىللەش ئاگاھلاندۇرۇشى بار .