توركۆرگۈچ ۋە ئۈسكۈنىلەر
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. | قوللىدى | قوللىدى | قوللىدى |
| 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 گە قاراڭ .
Navbar Dropdowns
بۇ .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 كۆرسەتمىسىنى تەكشۈرۈپ بېقىڭ .
دەلىللىگۈچىلەر
كونا ۋە كەمتۈك توركۆرگۈچلەرنى ئەڭ ياخشى تەجرىبە بىلەن تەمىنلەش ئۈچۈن ، Bootstrap توركۆرگۈچلەرنىڭ ئۆزىدىكى كەمتۈكلەرنى بىر تەرەپ قىلىش ئۈچۈن ، بىر قانچە ئورۇندا CSS توركۆرگۈ خاككېرلىرىنى ئىشلىتىپ ، بەزى توركۆرگۈچ نۇسخىلىرىغا ئالاھىدە CSS نى نىشانلايدۇ. بۇ خاككېرلار CSS دەلىللىگۈچىلەرنىڭ ئىناۋەتسىز ئىكەنلىكىدىن ئاغرىنىشىنى چۈشىنىشكە بولىدۇ. بىر قانچە جايدا ، بىز تېخى قېلىپلاشمىغان CSS ئىقتىدارلىرىنى ئىشلىتىمىز ، بۇلار تېخى تولۇق ئۆلچەملەشتۈرۈلمىگەن ، ئەمما بۇلار پەقەت تەدرىجىي ئىلگىرى سۈرۈش ئۈچۈن ئىشلىتىلىدۇ.
بۇ دەلىللەش ئاگاھلاندۇرۇشى ئەمەلىيەتتە مۇھىم ئەمەس ، چۈنكى بىزنىڭ CSS نىڭ خاككېرسىز قىسمى تولۇق دەلىللىنىدۇ ، خاككېرلىق بۆلەكلەر خاككېرلىق بولمىغان بۆلەكنىڭ نورمال ئىشلىشىگە دەخلى قىلمايدۇ ، شۇڭلاشقا بىز نېمە ئۈچۈن بۇ ئالاھىدە ئاگاھلاندۇرۇشلارغا قەستەن سەل قارايمىز.
بىزنىڭ HTML ھۆججىتىمىزدە ئوخشاشلا Firefox نىڭ مەلۇم بىر خاتالىق ئۈچۈن خىزمەت جەدۋىلىنى ئۆز ئىچىگە ئالغانلىقىمىز ئۈچۈن بەزى ئۇششاق ۋە ئەھمىيەتسىز HTML دەلىللەش ئاگاھلاندۇرۇشى بار .