توركۆرگۈچ ۋە ئۈسكۈنىلەر
Bootstrap قوللايدىغان توركۆرگۈچ ۋە ئۈسكۈنىلەرنى زامانىۋىدىن كوناغىچە ئۆگىنىڭ ، ھەر بىرسىگە بىلىنگەن چاتاق ۋە كەمتۈكلەرنى ئۆز ئىچىگە ئالىدۇ.
Bootstrap بارلىق ئاساسلىق توركۆرگۈچ ۋە سۇپىلارنىڭ ئەڭ يېڭى ، مۇقىم تارقىتىلىشىنى قوللايدۇ. Windows دا Internet Explorer 10-11 / Microsoft Edge نى قوللايمىز .
WebKit ، Blink ياكى Gecko نىڭ ئەڭ يېڭى نەشرىنى ئىشلىتىدىغان باشقا توركۆرگۈچلەر مەيلى بىۋاسىتە ياكى سۇپىنىڭ تور كۆرۈنۈشى API ئارقىلىق بولسۇن ، ئېنىق قوللىمايدۇ. قانداقلا بولمىسۇن ، Bootstrap (كۆپىنچە ئەھۋاللاردا) بۇ توركۆرگۈچلەردىمۇ توغرا كۆرسىتىلىشى ۋە نورمال ئىشلىشى كېرەك. تۆۋەندە تېخىمۇ ئېنىق قوللاش ئۇچۇرلىرى تەمىنلەندى.
قوللايدىغان توركۆرگۈ دائىرىمىز ۋە ئۇلارنىڭ نەشرىنى بىزدىن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"
]
بىز 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 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 9.2 دىن باشلاپ ، بىر مودېل ئوچۇق بولسىمۇ ، ئەگەر سىيرىلما قول ئىشارىسىنىڭ دەسلەپكى سېزىمچانلىقى تېكىست <input>ياكى a نىڭ دائىرىسىدە بولسا <textarea>، <body>مودېلنىڭ ئاستىدىكى مەزمۇن مودېلنىڭ ئورنىغا ئۆرۈلۈپ كېتىدۇ. WebKit خاتالىقى # 153856 گە قاراڭ .
بۇ .dropdown-backdropئېلېمېنت z- كۆرسەتكۈچنىڭ مۇرەككەپلىكى سەۋەبىدىن iOS دا ئىشلىتىلمەيدۇ. شۇڭلاشقا ، ناۋايخانىدىكى چۈشۈشنى تاقاش ئۈچۈن ، چوقۇم چۈشۈش ئېلېمېنتىنى (ياكى iOS دىكى چېكىلىش ھادىسىسىنى قوزغىتىدىغان باشقا ئېلېمېنتلارنى ) بىۋاسىتە چېكىشىڭىز كېرەك .
بەتنى چوڭايتىش مۇقەررەر ھالدا Bootstrap ۋە تورنىڭ باشقا زاپچاسلىرىدا بىر قىسىم زاپچاسلاردا سىزىلغان بۇيۇملارنى كۆرسىتىدۇ. مەسىلىگە ئاساسەن بىز ئۇنى ئوڭشىيالىشىمىز مۇمكىن (ئاۋۋال ئىزدەپ ئاندىن ئېھتىياجلىق بولغاندا مەسىلە ئاچىمىز). قانداقلا بولمىسۇن ، بىز بۇلارغا سەل قارايمىز ، چۈنكى ئۇلارنىڭ ھەمىشە خاككېرلىق خىزمەتتىن باشقا بىۋاسىتە ھەل قىلىش چارىسى يوق.
: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 كۆرسەتمىسىنى تەكشۈرۈپ بېقىڭ.
كونا ۋە كەمتۈك توركۆرگۈچلەرنى ئەڭ ياخشى تەجرىبە بىلەن تەمىنلەش ئۈچۈن ، Bootstrap توركۆرگۈچلەرنىڭ ئۆزىدىكى كەمتۈكلەرنى بىر تەرەپ قىلىش ئۈچۈن ، بىر قانچە ئورۇندا CSS توركۆرگۈ خاككېرلىرىنى ئىشلىتىپ ، بەزى توركۆرگۈچ نۇسخىلىرىغا ئالاھىدە CSS نى نىشانلايدۇ. بۇ خاككېرلار CSS دەلىللىگۈچىلەرنىڭ ئىناۋەتسىز ئىكەنلىكىدىن ئاغرىنىشىنى چۈشىنىشكە بولىدۇ. بىر قانچە جايدا ، بىز تېخى قېلىپلاشمىغان CSS ئىقتىدارلىرىنى ئىشلىتىمىز ، بۇلار تېخى تولۇق ئۆلچەملەشتۈرۈلمىگەن ، ئەمما بۇلار پەقەت تەدرىجىي ئىلگىرى سۈرۈش ئۈچۈن ئىشلىتىلىدۇ.
بۇ دەلىللەش ئاگاھلاندۇرۇشى ئەمەلىيەتتە مۇھىم ئەمەس ، چۈنكى بىزنىڭ CSS نىڭ خاككېرسىز قىسمى تولۇق دەلىللىنىدۇ ، خاككېرلىق بۆلەكلەر خاككېرلىق بولمىغان بۆلەكنىڭ نورمال ئىشلىشىگە دەخلى قىلمايدۇ ، شۇڭلاشقا بىز نېمە ئۈچۈن بۇ ئالاھىدە ئاگاھلاندۇرۇشلارغا قەستەن سەل قارايمىز.
بىزنىڭ HTML ھۆججىتىمىزدە ئوخشاشلا Firefox نىڭ مەلۇم بىر خاتالىق ئۈچۈن خىزمەت جەدۋىلىنى ئۆز ئىچىگە ئالغانلىقىمىز ئۈچۈن بەزى ئۇششاق ۋە ئەھمىيەتسىز HTML دەلىللەش ئاگاھلاندۇرۇشى بار .