Browser jeung alat
Diajar ngeunaan browser sareng alat, ti modéren dugi ka lami, anu dirojong ku Bootstrap, kalebet quirks sareng bug anu dipikanyaho pikeun masing-masing.
browser nu dirojong
Bootstrap ngadukung panganyarna, sékrési stabil tina sadaya panyungsi sareng platform utama. Dina Windows, kami ngadukung Internet Explorer 10-11 / Microsoft Edge .
Panyungsi alternatif anu nganggo versi WebKit, Blink, atanapi Gecko pangénggalna, naha langsung atanapi ngalangkungan API tampilan wéb platform, henteu dirojong sacara eksplisit. Nanging, Bootstrap kedah (dina kalolobaan kasus) nunjukkeun sareng fungsina leres dina panyungsi ieu ogé. Inpo pangrojong anu langkung spésifik disayogikeun di handap.
Anjeun tiasa mendakan rentang browser anu dirojong sareng versina dina.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
Kami nganggo Autoprefixer pikeun nanganan pangrojong browser anu dimaksud ku awalan CSS, anu ngagunakeun Browserslist pikeun ngatur versi browser ieu. Taroskeun dokuméntasina pikeun kumaha ngahijikeun alat ieu kana proyék anjeun.
Alat sélulér
Sacara umum, Bootstrap ngadukung vérsi panganyarna tina browser standar unggal platform utama. Catet yén browser proxy (sapertos Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) teu dirojong.
| Chrome | Firefox | Safari | Browser Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Dirojong | Dirojong | N/A | Android v5.0+ dirojong | Dirojong |
| ios | Dirojong | Dirojong | Dirojong | N/A | Dirojong |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Dirojong |
panyungsi desktop
Nya kitu, versi panganyarna tina kalolobaan browser desktop dirojong.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Dirojong | Dirojong | N/A | Dirojong | Dirojong | Dirojong |
| Windows | Dirojong | Dirojong | Dirojong, IE10+ | Dirojong | Dirojong | Teu dirojong |
Pikeun Firefox, salian ti sékrési stabil normal panganyarna, kami ogé ngadukung versi Extended Support Release (ESR) Firefox panganyarna.
Sacara teu resmi, Bootstrap kedah katingali sareng kalakuanana cekap dina Chromium sareng Chrome pikeun Linux, Firefox pikeun Linux, sareng Internet Explorer 9, sanaos aranjeunna henteu didukung sacara resmi.
Pikeun daptar sababaraha bug browser nu Bootstrap kudu grapple kalawan, tingali Wall kami bug browser .
Internet Explorer
Internet Explorer 10+ dirojong; IE9 tur handap henteu. Punten perhatikeun yén sababaraha sipat CSS3 sareng elemen HTML5 henteu dirojong sapinuhna dina IE10, atanapi meryogikeun sipat awalan pikeun fungsionalitas lengkep. Didatangan Dupi abdi tiasa nganggo… pikeun detil ngeunaan rojongan browser fitur CSS3 jeung HTML5. Upami anjeun peryogi dukungan IE8-9, paké Bootstrap 3.
Modals na dropdowns on mobile
Ngabahekeun jeung ngagulung
Rojongan pikeun overflow: hidden;on <body>unsur ieu rada kawates dina ios sarta Android. Pikeun tujuan éta, nalika anjeun ngagulung ka luhur atanapi ka handap tina modal dina salah sahiji panyungsi alat éta, <body>eusina bakal mimiti ngagulung. Tempo bug Chrome #175502 (dibereskeun dina Chrome v40) jeung bug WebKit #153852 .
Widang téks ios sareng ngagulung
Dina ios 9.2, nalika modal dibuka, upami sentuhan awal gestur ngagugulung aya dina wates tékstual <input>atanapi <textarea>, <body>eusi handapeun modal bakal digulung tibatan modal sorangan. Tempo bug WebKit #153856 .
Navbar Dropdowns
Unsur .dropdown-backdrophenteu dianggo dina ios dina nav kusabab pajeulitna z-indexing. Ku kituna, pikeun nutup dropdowns dina navbars, anjeun kudu langsung klik unsur dropdown (atawa elemen séjén nu bakal seuneu acara klik dina ios ).
Ngazum browser
Ngazum halaman pasti nampilkeun rendering artefak dina sababaraha komponén, boh dina Bootstrap sareng sésana wéb. Gumantung kana masalahna, urang tiasa ngalereskeunana (milarian heula teras muka masalah upami diperyogikeun). Najan kitu, urang condong malire ieu sabab mindeng teu boga solusi langsung lian ti workarounds hacky.
Lengket :hover/ :focusdina ios
Sanaos :hoverteu mungkin dina kalolobaan alat toél, ios niru kabiasaan ieu, nyababkeun gaya hover "caket" anu tetep saatos ngetok hiji unsur. Gaya hover ieu ngan dipiceun nalika pangguna ngetok unsur anu sanés. Paripolah ieu dianggap sabagéan ageung teu dipikahoyong sareng sigana henteu janten masalah dina alat Android atanapi Windows.
Sapanjang sékrési v4 alfa sareng béta kami, kami ngalebetkeun kode anu teu lengkep sareng koméntar pikeun milih kana shim query média anu bakal nganonaktipkeun gaya hover dina browser alat toél anu niru hovering. Karya ieu henteu acan réngsé lengkep atanapi diaktipkeun, tapi pikeun ngahindarkeun pegatna lengkep, kami milih pikeun ngaleungitkeun shim ieu sareng ngajaga mixin salaku potong kompas pikeun kelas pseudo.
Nyitak
Malah dina sababaraha browser modern, percetakan tiasa quirky.
Salaku Safari v8.0, pamakéan kelas dibereskeun-lebar .containerbisa ngabalukarkeun Safari ngagunakeun ukuran font unusually leutik nalika nyitak. Tingali masalah #14868 sareng bug WebKit #138192 pikeun langkung rinci. Hiji workaround poténsial nyaéta CSS di handap ieu:
@media print {
.container {
width: auto;
}
}
browser stock Android
Out of the box, Android 4.1 (komo sababaraha sékrési anu langkung énggal) dikirimkeun sareng aplikasi Browser salaku browser wéb standar pilihan (sabalikna Chrome). Hanjakalna, aplikasi Browser ngagaduhan seueur bug sareng inconsistencies sareng CSS sacara umum.
Pilih menu
Dina <select>elemen, browser stock Android moal nembongkeun kadali samping lamun aya border-radiusna / atawa borderdilarapkeun. (Tempo sual StackOverflow ieu pikeun detil.) Paké snippet kode di handap pikeun nyoplokkeun CSS offending sarta ngajadikeun <select>salaku unsur unstyled dina browser stock Android. Agén pamaké sniffing ngahindarkeun gangguan sareng browser Chrome, Safari, sareng 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>
Hoyong ningali conto? Pariksa demo JS Bin ieu .
Validators
Pikeun masihan pangalaman anu pangsaéna pikeun panyungsi anu lami sareng buggy, Bootstrap nganggo hacks browser CSS di sababaraha tempat pikeun nargétkeun CSS khusus kana vérsi panyungsi anu tangtu pikeun ngungkulan bug dina browser éta sorangan. Hacks ieu kaharti ngabalukarkeun validators CSS ngawadul yen aranjeunna teu valid. Dina sababaraha tempat, urang ogé ngagunakeun fitur CSS bleeding-edge nu teu acan pinuh standarisasi, tapi ieu dipaké murni pikeun ningkatna progresif.
Peringatan validasi ieu henteu masalah dina prakna sabab bagian non-hacky tina CSS kami leres-leres validasi sareng bagian anu hacky henteu ngaganggu fungsi anu leres tina bagian anu henteu hacky, ku kituna urang ngahaja teu malire peringatan khusus ieu.
Dokumén HTML kami ogé gaduh sababaraha peringatan validasi HTML anu teu penting sareng teu penting kusabab kami ngalebetkeun solusi pikeun bug Firefox anu tangtu .