Source

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 N/A 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 patrap gulung ana ing wates teks <input>utawa a <textarea>, <body>isi ing ngisor modal bakal digulung tinimbang modal dhewe. Waca bug WebKit #153856 .

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

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Dokumen HTML kita uga duwe sawetara bebaya validasi HTML sing ora pati penting lan ora penting amarga kalebu solusi kanggo bug Firefox tartamtu .