Pregledači i uređaji
Saznajte više o pretraživačima i uređajima, od modernih do starih, koje podržava Bootstrap, uključujući poznate nedostatke i greške za svaki.
Podržani pretraživači
Bootstrap podržava najnovija, stabilna izdanja svih glavnih pretraživača i platformi. Na Windows -u podržavamo Internet Explorer 10-11 / Microsoft Edge .
Alternativni pretraživači koji koriste najnoviju verziju WebKit-a, Blink-a ili Gecko-a, bilo direktno ili preko API-ja za web prikaz platforme, nisu eksplicitno podržani. Međutim, Bootstrap bi (u većini slučajeva) trebao da se prikazuje i ispravno funkcioniše i u ovim pretraživačima. Konkretnije informacije o podršci date su u nastavku.
Naš podržani asortiman pretraživača i njihove verzije možete pronaći u našem.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
Koristimo Autoprefixer za upravljanje predviđenom podrškom pretraživača putem CSS prefiksa, koji koristi Browserslist za upravljanje ovim verzijama pretraživača. Konsultujte njihovu dokumentaciju kako da integrišete ove alate u svoje projekte.
Mobilni uređaji
Uopšteno govoreći, Bootstrap podržava najnovije verzije zadanih pretraživača svake glavne platforme. Imajte na umu da proxy pretraživači (kao što su Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) nisu podržani.
| Chrome | Firefox | Safari | Android pretraživač & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Podržano | Podržano | N / A | Podržan Android v5.0+ | Podržano |
| iOS | Podržano | Podržano | Podržano | N / A | Podržano |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Podržano |
Desktop pretraživači
Slično, podržane su najnovije verzije većine desktop pretraživača.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Podržano | Podržano | N / A | Podržano | Podržano | Podržano |
| Windows | Podržano | Podržano | Podržano, IE10+ | Podržano | Podržano | Nije podržan |
Za Firefox, pored najnovijeg normalnog stabilnog izdanja, podržavamo i najnoviju verziju Firefoxa s proširenom podrškom (ESR) .
Nezvanično, Bootstrap bi trebao izgledati i ponašati se dovoljno dobro u Chromiumu i Chromeu za Linux, Firefoxu za Linux i Internet Exploreru 9, iako nisu službeno podržani.
Za listu nekih grešaka pretraživača sa kojima se Bootstrap mora boriti, pogledajte naš Zid grešaka pretraživača .
Internet Explorer
Internet Explorer 10+ je podržan; IE9 i niže nije. Imajte na umu da neka CSS3 svojstva i HTML5 elementi nisu u potpunosti podržani u IE10 ili zahtijevaju svojstva s prefiksom za punu funkcionalnost. Posetite Mogu li da koristim... za detalje o podršci pretraživača za CSS3 i HTML5 funkcije. Ako vam je potrebna podrška za IE8-9, koristite Bootstrap 3.
Modali i padajući meni na mobilnom uređaju
Prelivanje i pomicanje
Podrška za overflow: hidden;element <body>je prilično ograničena u iOS-u i Androidu. U tu svrhu, kada skrolujete pored vrha ili dna modalnog u pretraživaču bilo kojeg od tih uređaja, <body>sadržaj će početi da se pomera. Pogledajte Chrome grešku #175502 (popravljeno u Chromeu v40) i WebKit grešku #153852 .
iOS tekstualna polja i pomicanje
Od iOS 9.2, dok je modal otvoren, ako je početni dodir pokretom pomicanja unutar granice tekstualnog <input>ili <textarea>, <body>sadržaj ispod modalnog će se pomicati umjesto samog modalnog. Pogledajte WebKit grešku #153856 .
Padajući meni za Navbar
Element .dropdown-backdropse ne koristi na iOS-u u navigaciji zbog složenosti z-indeksiranja. Stoga, da biste zatvorili padajuće menije u navigacijskim trakama, morate direktno kliknuti na padajući element (ili bilo koji drugi element koji će pokrenuti događaj klika u iOS-u ).
Zumiranje pretraživača
Zumiranje stranice neizbježno predstavlja artefakte renderiranja u nekim komponentama, kako u Bootstrapu, tako iu ostatku weba. Ovisno o problemu, možda ćemo ga moći riješiti (prvo pretražite, a zatim otvorite problem ako je potrebno). Međutim, mi smo skloni da ih ignorišemo jer često nemaju direktno rešenje osim hakovačkih rešenja.
Sticky :hover/ :focusna iOS -u
Iako :hoverto nije moguće na većini uređaja osjetljivih na dodir, iOS oponaša ovo ponašanje, što rezultira "ljepljivim" stilovima lebdenja koji ostaju nakon dodirivanja jednog elementa. Ovi stilovi lebdenja se uklanjaju samo kada korisnici dodirnu drugi element. Ovo ponašanje se smatra uglavnom nepoželjnim i čini se da nije problem na Android ili Windows uređajima.
Kroz naša alfa i beta izdanja v4 uključili smo nekompletan i prokomentarisan kod za uključivanje podmetača za medijski upit koji bi onemogućio stilove lebdenja u pretraživačima dodirnih uređaja koji oponašaju lebdenje. Ovaj rad nikada nije bio u potpunosti završen ili omogućen, ali da bismo izbjegli potpuni lom, odlučili smo da zastarimo ovu podlošku i zadržimo miksine kao prečice za pseudo-klase.
Štampanje
Čak i u nekim modernim pretraživačima, štampanje može biti neobično.
Od Safarija v8.0, upotreba .containerklase fiksne širine može uzrokovati da Safari koristi neobično malu veličinu fonta prilikom ispisa. Pogledajte problem #14868 i WebKit grešku #138192 za više detalja. Jedno moguće rješenje je sljedeći CSS:
@media print {
.container {
width: auto;
}
}
Android pretraživač
Izvan kutije, Android 4.1 (pa čak i neka novija izdanja očigledno) se isporučuju s aplikacijom Browser kao zadanim web pretraživačem po izboru (za razliku od Chromea). Nažalost, aplikacija Browser ima puno grešaka i nedosljednosti sa CSS-om općenito.
Odaberite meni
Na <select>elementima, Android pretraživač neće prikazati bočne kontrole ako postoji border-radiusi/ili borderprimijenjeno. (Pogledajte ovo StackOverflow pitanje za detalje.) Koristite isječak koda ispod da biste uklonili uvredljivi CSS i <select>prikazali kao element bez stila na Android pretraživaču. Korisnički agent njuškanje izbjegava smetnje u preglednicima Chrome, Safari i 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>
Želite li vidjeti primjer? Pogledajte ovaj JS Bin demo .
Validatori
Kako bi pružio najbolje moguće iskustvo starim pretraživačima i pretraživačima s greškama, Bootstrap koristi hakove CSS pretraživača na nekoliko mjesta kako bi ciljao poseban CSS na određene verzije pretraživača kako bi zaobišao greške u samim pretraživačima. Ovi hakovi razumljivo uzrokuju da se CSS validatori žale da su nevažeći. Na nekoliko mjesta koristimo i vrhunske CSS karakteristike koje još nisu u potpunosti standardizirane, ali se one koriste isključivo za progresivno poboljšanje.
Ova upozorenja o validaciji nisu bitna u praksi jer dio našeg CSS-a koji nije hakovan u potpunosti potvrđuje valjanost, a dijelovi koji nisu hakovani ne ometaju pravilno funkcioniranje dijela koji nije hakiran, stoga namjerno ignorišemo ova posebna upozorenja.
Naši HTML dokumenti također imaju neka trivijalna i beznačajna upozorenja o validaciji HTML-a zbog toga što smo uključili zaobilazno rješenje za određenu Firefox grešku .