Browser da na'urori
Koyi game da masu bincike da na'urori, daga na zamani zuwa tsoho, waɗanda Bootstrap ke tallafawa, gami da sanannun quirks da kwari ga kowane.
Masu bincike masu goyan baya
Bootstrap yana goyan bayan sabbin, tabbatattun sakin duk manyan masu bincike da dandamali. A kan Windows, muna tallafawa Internet Explorer 10-11 / Microsoft Edge .
Madadin masu bincike waɗanda ke amfani da sabuwar sigar WebKit, Blink, ko Gecko, ko kai tsaye ko ta hanyar API ɗin kallon yanar gizo, ba su da tallafi a sarari. Koyaya, Bootstrap yakamata (a mafi yawan lokuta) nunawa kuma yayi aiki daidai a cikin waɗannan masu binciken. An bayar da ƙarin takamaiman bayanin tallafi a ƙasa.
Kuna iya nemo kewayon masu binciken mu masu goyan baya da nau'ikan su a cikin namu.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
Muna amfani da Autoprefixer don gudanar da goyan bayan da aka yi niyya ta hanyar prefixes na CSS, wanda ke amfani da Browserslist don sarrafa waɗannan nau'ikan burauzar. Tuntuɓi takardunsu don yadda ake haɗa waɗannan kayan aikin cikin ayyukanku.
Na'urorin hannu
Gabaɗaya magana, Bootstrap yana goyan bayan sabbin juzu'ai na kowane babban dandamali ta tsoho mai bincike. Lura cewa masu bincike (irin su Opera Mini, Opera Mobile's Turbo yanayin, UC Browser Mini, Amazon Silk) ba su da tallafi.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Tallafawa | Tallafawa | N/A | Android v5.0+ yana goyan bayan | Tallafawa |
| iOS | Tallafawa | Tallafawa | Tallafawa | N/A | Tallafawa |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Tallafawa |
Masu bincike na Desktop
Hakazalika, ana tallafawa sabbin nau'ikan mafi yawan masu binciken tebur.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Tallafawa | Tallafawa | N/A | Tallafawa | Tallafawa | Tallafawa |
| Windows | Tallafawa | Tallafawa | Ana goyan bayan, IE10+ | Tallafawa | Tallafawa | Ba a tallafawa |
Don Firefox, ban da sabon sabuntawa na yau da kullun na yau da kullun, muna kuma goyan bayan sabuwar sigar Taimakon Taimako (ESR) na Firefox.
Ba bisa ka'ida ba, Bootstrap ya kamata ya duba da kyau sosai a cikin Chromium da Chrome don Linux, Firefox don Linux, da Internet Explorer 9, kodayake ba a tallafa musu bisa hukuma ba.
Don jerin wasu kurakuran burauzar da Bootstrap ya yi fama da su, duba bangon bugs ɗin mu .
Internet Explorer
Internet Explorer 10+ yana da tallafi; IE9 da ƙasa ba. Da fatan za a sani cewa wasu kaddarorin CSS3 da abubuwan HTML5 ba su da cikakken goyan baya a cikin IE10, ko buƙatar kaddarorin da aka riga aka tsara don cikakken aiki. Ziyarci Zan iya amfani da… don cikakkun bayanai kan tallafin burauza na fasalolin CSS3 da HTML5. Idan kuna buƙatar tallafin IE8-9, yi amfani da Bootstrap 3.
Modals da zazzagewa akan wayar hannu
Ambaliyar ruwa da gungurawa
Taimakon overflow: hidden;akan <body>kashi yana da iyakancewa a cikin iOS da Android. Don wannan, lokacin da kuka gungura sama ko ƙasa na modal a cikin ɗaya daga cikin masu binciken na'urorin, <body>abun ciki zai fara gungurawa. Duba kwaro na Chrome #175502 (wanda aka gyara a cikin Chrome v40) da kuma bug WebKit #153852 .
IOS filayen rubutu da gungurawa
Dangane da iOS 9.2, yayin da modal ke buɗewa, idan farkon taɓawar alamar gungurawa tana cikin iyakar rubutu <input>ko a <textarea>, <body>abubuwan da ke ƙarƙashin modal ɗin za a gungurawa a maimakon modal kanta. Duba kwaro na WebKit #153856 .
Navbar Dropdowns
Ba .dropdown-backdropa yi amfani da kashi a kan iOS a cikin nav saboda sarkar z-indexing. Don haka, don rufe zazzagewa a cikin navbars, dole ne ku danna maɓallin zazzage kai tsaye (ko duk wani abu wanda zai kunna taron dannawa a cikin iOS ).
Zuƙowa mai lilo
Zuƙowa shafi babu makawa yana gabatar da kayan tarihi a wasu sassa, duka a cikin Bootstrap da sauran gidan yanar gizo. Dangane da batun, ƙila za mu iya gyara shi (bincika da farko sannan buɗe batun idan akwai buƙata). Duk da haka, muna yawan yin watsi da waɗannan saboda galibi ba su da wata mafita ta kai tsaye face abubuwan da ba su dace ba.
Sticky :hover/ :focusa kan iOS
Duk :hoverda yake ba zai yiwu ba akan yawancin na'urorin taɓawa, iOS yana yin koyi da wannan ɗabi'a, wanda ke haifar da salon shaƙatawa "mai ɗaure" wanda ke ci gaba bayan taɓa abu ɗaya. Ana cire waɗannan salon shawagi ne kawai lokacin da masu amfani suka taɓa wani abu. Ana ɗaukar wannan ɗabi'ar ba a so kuma da alama ba matsala bane akan na'urorin Android ko Windows.
A cikin fitowar mu v4 alpha da beta, mun haɗa da wanda bai cika ba kuma mun yi sharhin lamba don shiga cikin tambayar tambaya ta kafofin watsa labarai wanda zai kashe salon hover a cikin masu binciken na'urar taɓawa waɗanda ke yin koyi da shawagi. Ba a taɓa gama kammalawa ko kunna wannan aikin ba, amma don guje wa ɓarna gabaɗaya, mun zaɓi ƙaddamar da wannan shim ɗin kuma mu kiyaye mahaɗin a matsayin gajerun hanyoyi don azuzuwan ɓarna.
Bugawa
Ko da a wasu mashawartan zamani, bugu na iya zama da ban mamaki.
Dangane da Safari v8.0, amfani da ƙayyadaddun .containerajin faɗin na iya sa Safari yayi amfani da ƙaramin girman rubutu da ba a saba gani ba yayin bugawa. Duba fitowar #14868 da bug WebKit #138192 don ƙarin cikakkun bayanai. Ɗayan da za a iya magance shi shine CSS mai zuwa:
@media print {
.container {
width: auto;
}
}
Android stock browser
Daga cikin akwatin, Android 4.1 (har ma da wasu sabbin sakewa a bayyane) suna jigilar kaya tare da aikace-aikacen Browser azaman babban mai binciken gidan yanar gizo na zaɓi (saɓanin Chrome). Abin takaici, ƙa'idar Mai lilo tana da ɗimbin kwari da rashin daidaituwa tare da CSS gabaɗaya.
Zaɓi menu
A kan <select>abubuwa, mai binciken hannun jari na Android ba zai nuna ikon sarrafawa ba idan akwai border-radiusda/ko borderamfani. (Dubi wannan tambayar StackOverflow don cikakkun bayanai.) Yi amfani da snippet na lambar da ke ƙasa don cire CSS mai laifi da kuma mayar da <select>shi azaman nau'in da ba a yi masa salo ba akan mai binciken hannun jari na Android. Wakilin mai amfani yana shaka yana guje wa tsoma baki tare da Chrome, Safari, da 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>
Kuna son ganin misali? Duba wannan JS Bin demo .
Masu tabbatarwa
Domin samar da mafi kyawun yuwuwar ƙwarewa ga tsofaffi da masu bincike, Bootstrap yana amfani da hacks na masu binciken CSS a wurare da yawa don ƙaddamar da CSS na musamman zuwa wasu nau'ikan burauzar don yin aiki tare da kwari a cikin masu binciken da kansu. Waɗannan hacks a fahimta suna haifar da masu inganta CSS don yin korafin cewa ba su da inganci. A wurare biyu, muna kuma amfani da siffofin CSS masu zubar da jini waɗanda har yanzu ba a daidaita su ba, amma ana amfani da su kawai don haɓaka haɓakawa.
Waɗannan faɗakarwar tabbatarwa ba su da mahimmanci a aikace tunda ɓangaren da ba na ɓarna ba na CSS ɗinmu ya inganta cikakke kuma ɓangaren ɓarna ba sa tsoma baki tare da ingantaccen aiki na ɓangaren mara ɓarna, don haka me yasa muka yi watsi da waɗannan gargaɗin da gangan.
Dokokin mu na HTML suma suna da gargaɗin ingantattun HTML marasa mahimmanci kuma marasa amfani saboda haɗawar da muka yi don wani bug na Firefox .