Browser lan piranti
Sinau babagan browser lan piranti, saka modern nganti lawas, sing didhukung dening Bootstrap, kalebu quirks lan bug sing dikenal kanggo saben.
Browser sing didhukung
Bootstrap ndhukung rilis paling anyar lan stabil saka kabeh browser lan platform utama. Ing Windows, kita ndhukung Internet Explorer 10-11 / Microsoft Edge .
Browser alternatif sing nggunakake WebKit, Blink, utawa Gecko versi paling anyar, langsung utawa liwat API tampilan web platform, ora didhukung kanthi jelas. Nanging, Bootstrap kudu (ing umume kasus) nampilake lan bisa digunakake kanthi bener ing browser kasebut. Informasi dhukungan sing luwih spesifik diwenehake ing ngisor iki.
Sampeyan bisa nemokake macem-macem browser sing didhukung lan versi ing.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
Kita nggunakake Autoprefixer kanggo nangani dhukungan browser sing dituju liwat awalan CSS, sing nggunakake Browserslist kanggo ngatur versi browser kasebut. Rujuk dokumentasi babagan cara nggabungake alat kasebut menyang proyek sampeyan.
Piranti seluler
Umumé, Bootstrap ndhukung versi paling anyar saka saben browser standar platform utama. Elinga yen browser proxy (kayata Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) ora didhukung.
| Chrome | Firefox | Safari | Browser Android & Tampilan Web | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Didhukung | Didhukung | N/A | Android v5.0+ didhukung | Didhukung |
| iOS | Didhukung | Didhukung | Didhukung | N/A | Didhukung |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Didhukung |
Browser desktop
Kajaba iku, versi paling anyar saka akeh browser desktop didhukung.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Didhukung | Didhukung | N/A | Didhukung | Didhukung | Didhukung |
| Windows | Didhukung | Didhukung | Didhukung, IE10+ | Didhukung | Didhukung | Ora didhukung |
Kanggo Firefox, saliyane release stabil normal paling anyar, kita uga ndhukung versi Extended Support Release (ESR) Firefox paling anyar.
Ora resmi, Bootstrap kudu katon lan tumindak kanthi becik ing Chromium lan Chrome kanggo Linux, Firefox kanggo Linux, lan Internet Explorer 9, sanajan ora didhukung kanthi resmi.
Kanggo dhaptar sawetara bug browser sing kudu ditindakake Bootstrap, deleng Tembok bug browser .
Internet Explorer
Internet Explorer 10+ didhukung; IE9 lan mudhun ora. Wigati dimangerteni manawa sawetara properti CSS3 lan unsur HTML5 ora didhukung kanthi lengkap ing IE10, utawa mbutuhake sifat awalan kanggo fungsionalitas lengkap. Dolan maring Can I use… kanggo rincian babagan dhukungan browser fitur CSS3 lan HTML5. Yen sampeyan mbutuhake dhukungan IE8-9, gunakake Bootstrap 3.
Modal lan dropdown ing seluler
Overflow lan nggulung
Dhukungan kanggo overflow: hidden;unsur <body>cukup winates ing iOS lan Android. Kanggo tujuan kasebut, nalika sampeyan nggulung liwat ndhuwur utawa ngisor modal ing salah siji saka browser piranti kasebut, <body>konten kasebut bakal mulai digulung. Waca bug Chrome #175502 (didandani ing Chrome v40) lan bug WebKit #153852 .
kolom teks iOS lan nggulung
Ing iOS 9.2, nalika modal mbukak, yen tutul awal sadurunge nyeret gulung ana ing wates teks <input>utawa a <textarea>, <body>isi ing ngisor modal bakal digulung tinimbang modal dhewe. Waca bug WebKit #153856 .
Navbar Dropdowns
Unsur .dropdown-backdropiki ora digunakake ing iOS ing nav amarga kerumitan z-indeksasi. Mangkono, kanggo nutup dropdowns ing navbars, sampeyan kudu langsung klik unsur gulung mudhun (utawa unsur liyane sing bakal murub acara klik ing iOS ).
Zooming browser
Zooming kaca mesthi nampilake artefak rendering ing sawetara komponen, ing Bootstrap lan liyane ing web. Gumantung saka masalah kasebut, kita bisa uga bisa ndandani (telusuri dhisik banjur mbukak masalah yen perlu). Nanging, kita cenderung nglirwakake iki amarga asring ora duwe solusi langsung kajaba solusi hacky.
Lengket :hover/ :focusing iOS
Sanadyan :hoverora bisa ditindakake ing pirang-pirang piranti tutul, iOS niru prilaku iki, nyebabake gaya hover "lengket" sing tetep sawise nutul siji unsur. Gaya hover iki mung dibusak nalika pangguna nutul unsur liyane. Prilaku iki dianggep umume ora dikarepake lan katon ora dadi masalah ing piranti Android utawa Windows.
Saindhenging rilis v4 alpha lan beta, kita kalebu kode sing ora lengkap lan menehi komentar kanggo milih menyang shim query media sing bakal mateni gaya hover ing browser piranti tutul sing niru nglayang. Karya iki ora tau rampung utawa diaktifake kanthi lengkap, nanging kanggo ngindhari karusakan lengkap, kita wis milih kanggo ngilangi shim iki lan tetep mixin minangka trabasan kanggo kelas pseudo.
Printing
Malah ing sawetara browser modern, nyetak bisa dadi aneh.
Minangka Safari v8.0, nggunakake kelas tetep-jembaré .containerbisa nimbulaké Safari nggunakake ukuran font mboten umum cilik nalika nyetak. Deleng masalah #14868 lan bug WebKit #138192 kanggo rincian liyane. Salah sawijining solusi potensial yaiku CSS ing ngisor iki:
@media print {
.container {
width: auto;
}
}
Browser saham Android
Metu saka kothak, Android 4.1 (lan malah sawetara rilis anyar ketoke) ngirim aplikasi Browser minangka browser web standar pilihan (minangka gantos kanggo Chrome). Sayange, app Browser akeh bug lan inconsistencies karo CSS ing umum.
Pilih menu
Ing <select>unsur, browser Simpenan Android ora bakal nampilake kontrol sisih yen ana border-radiuslan / utawa borderApplied. (Waca pitakonan StackOverflow iki kanggo rincian.) Gunakake snippet kode ing ngisor iki kanggo mbusak CSS nglanggar lan nerjemahake <select>minangka unsur unstyled ing browser Simpenan Android. Agen pangguna sniffing ngindhari gangguan karo browser Chrome, Safari, lan 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>
Pengin ndeleng conto? Priksa demo JS Bin iki .
Validator
Kanggo nyedhiyakake pengalaman sing paling apik kanggo browser lawas lan buggy, Bootstrap nggunakake hack browser CSS ing sawetara panggonan kanggo ngarahake CSS khusus menyang versi browser tartamtu supaya bisa ngatasi bug ing browser kasebut. Hacks iki bisa dingerteni nyebabake validator CSS sambat yen dheweke ora sah. Ing sawetara panggonan, kita uga nggunakake fitur CSS bleeding-edge sing durung distandarisasi kanthi lengkap, nanging iki digunakake kanggo nambah progresif.
Bebaya validasi iki ora masalah ing praktik amarga bagean sing ora diretas saka CSS kita wis divalidasi kanthi lengkap lan bagean sing diretas ora ngganggu fungsi sing bener saka bagean sing ora diretas, mula kita sengaja nglirwakake bebaya tartamtu kasebut.
Dokumen HTML kita uga duwe sawetara bebaya validasi HTML sing ora pati penting lan ora penting amarga kalebu solusi kanggo bug Firefox tartamtu .