Brauserid ja seadmed
Lugege Bootstrapi toetatud brauserite ja seadmete kohta (kaasaegne ja vanani), sealhulgas kõigi teadaolevate veidruste ja vigade kohta.
Toetatud brauserid
Bootstrap toetab kõigi suuremate brauserite ja platvormide uusimaid ja stabiilseid väljalaseid . Windowsis toetame Internet Explorer 10–11 / Microsoft Edge .
Alternatiivseid brausereid, mis kasutavad WebKiti, Blinki või Gecko uusimat versiooni kas otse või platvormi veebivaate API kaudu, ei toetata. Kuid Bootstrap peaks (enamikul juhtudel) kuvama ja toimima õigesti ka nendes brauserites. Täpsem tugiteave on toodud allpool.
Meie toetatud brauserite ja nende versioonide valiku leiate meie veebisaidilt.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
Kasutame CSS-i eesliidete kaudu kavandatud brauseri toe haldamiseks Autoprefixerit , mis kasutab nende brauseri versioonide haldamiseks brauseriloendit. Lugege nende dokumentatsioonist, kuidas neid tööriistu oma projektidesse integreerida.
Mobiilseadmed
Üldiselt toetab Bootstrap iga suurema platvormi vaikebrauserite uusimaid versioone. Pange tähele, et puhverserveri brausereid (nt Opera Mini, Opera Mobile'i Turbo režiim, UC Browser Mini, Amazon Silk) ei toetata.
| Chrome | Firefox | Safari | Androidi brauser ja WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Toetatud | Toetatud | Ei kehti | Toetatud Android v5.0+ | Toetatud |
| iOS | Toetatud | Toetatud | Toetatud | Ei kehti | Toetatud |
| Windows 10 Mobile | Ei kehti | Ei kehti | Ei kehti | Ei kehti | Toetatud |
Lauaarvuti brauserid
Samamoodi toetatakse enamiku lauaarvuti brauserite uusimaid versioone.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Ooper | Safari | |
|---|---|---|---|---|---|---|
| Mac | Toetatud | Toetatud | Ei kehti | Toetatud | Toetatud | Toetatud |
| Windows | Toetatud | Toetatud | Toetatud, IE10+ | Toetatud | Toetatud | Ei toetata |
Firefoxi puhul toetame lisaks uusimale tavalisele stabiilsele versioonile ka Firefoxi uusimat laiendatud toe väljalaske (ESR) versiooni.
Mitteametlikult peaks Bootstrap Chromiumis ja Chrome'is Linuxile, Firefoxis Linuxile ja Internet Explorer 9-s piisavalt hästi välja nägema ja käituma, kuigi neid ametlikult ei toetata.
Mõne brauseri vigade loendi vaatamiseks, millega Bootstrap peab võitlema, vaadake meie brauseri vigade seina .
Internet Explorer
Toetatud on Internet Explorer 10+; IE9 ja allapoole ei ole. Pidage meeles, et IE10 ei toeta teatud CSS3 atribuute ja HTML5 elemente täielikult või vajavad täielikuks funktsionaalsuseks eesliidet. CSS3 ja HTML5 funktsioonide brauseri toe kohta lisateabe saamiseks külastage lehte Kas ma saan kasutada… . Kui vajate IE8-9 tuge, kasutage Bootstrap 3.
Modaalid ja rippmenüüd mobiilis
Ülevool ja kerimine
Elemendi tugi overflow: hidden;on <body>iOS-is ja Androidis üsna piiratud. <body>Sel eesmärgil hakkab sisu kerima, kui kerite mõlema seadme brauseris modaali üla- või alaosast mööda . Vaadake Chrome'i viga nr 175502 (parandatud versioonis Chrome v40) ja WebKiti viga nr 153852 .
iOS-i tekstiväljad ja kerimine
<input>Alates iOS 9.2-st, kui modaal on avatud, siis kui kerimisliigutuse esmane puudutus jääb teksti või i piiridesse, keritakse modaali enda asemel modaali all olevat sisu <textarea>. <body>Vaadake WebKiti viga nr 153856 .
Navibari rippmenüüd
Seda .dropdown-backdropelementi ei kasutata iOS-i navigeerimisrežiimis z-indekseerimise keerukuse tõttu. Seega peate navigeerimisribade rippmenüüde sulgemiseks klõpsama otse rippmenüü elemendil (või mis tahes muul elemendil, mis käivitab iOS-is klikisündmuse ).
Brauseri suumimine
Lehekülje suumimisel esineb nii Bootstrapis kui ka ülejäänud veebis paratamatult mõnes komponendis renderdusartefakte. Olenevalt probleemist saame selle võib-olla parandada (esmalt otsige ja seejärel vajadusel avage probleem). Siiski kipume neid ignoreerima, kuna neil pole sageli muud otsest lahendust kui häkkivad lahendused.
Kleepuv :hover/ :focusiOS-is
Kuigi :hoverenamiku puutetundlike seadmete puhul pole see võimalik, emuleerib iOS seda käitumist, mille tulemuseks on "kleepuvad" hõljutusstiilid, mis püsivad pärast ühe elemendi puudutamist. Need hõljutusstiilid eemaldatakse ainult siis, kui kasutajad puudutavad mõnda muud elementi. Seda käitumist peetakse suures osas ebasoovitavaks ja see ei tundu olevat probleem Androidi ega Windowsi seadmetes.
Kõigile meie v4 alfa- ja beetaversioonidele lisasime mittetäieliku ja kommenteeritud koodi, et valida meediumipäringu sihver, mis keelaks hõljumise stiilid puuteseadmete brauserites, mis emuleerivad hõljumist. See töö ei olnud kunagi täielikult lõpule viidud ega lubatud, kuid täieliku purunemise vältimiseks oleme otsustanud selle aluse tühistada ja jätta segud pseudoklasside otseteedeks.
Trükkimine
Isegi mõnes kaasaegses brauseris võib printimine olla omapärane.
Alates Safari v8.0-st võib fikseeritud laiusega .containerklassi kasutamine põhjustada selle, et Safari kasutab printimisel ebatavaliselt väikest kirjasuurust. Lisateabe saamiseks vaadake numbrit 14868 ja WebKiti viga nr 138192 . Üks võimalik lahendus on järgmine CSS:
@media print {
.container {
width: auto;
}
}
Androidi aktsiabrauser
Karbist väljas on Android 4.1 (ja ilmselt isegi mõned uuemad väljaanded) koos brauserirakendusega, mis on valitud vaikeveebibrauser (erinevalt Chrome'ist). Kahjuks on brauserirakendusel üldiselt CSS-iga palju vigu ja ebakõlasid.
Valige menüü
<select>Elementide puhul ei kuva Androidi aktsiabrauser külgmisi juhtnuppe, kui need on ja border-radius/või borderrakendatud. (Lisateavet leiate sellest StackOverflow küsimusest .) Kasutage allolevat koodilõiku, et eemaldada rikkuv CSS ja renderdada <select>Androidi aktsiabrauseris stiilita elemendina. Kasutajaagendi nuusutamine väldib häireid Chrome'i, Safari ja Mozilla brauserites.
<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>
Kas soovite näidet näha? Vaadake seda JS Bin'i demot .
Validaatorid
Parima võimaliku kasutuskogemuse pakkumiseks vanadele ja lollakatele brauseritele kasutab Bootstrap mitmes kohas CSS-i brauseri häkke , et sihtida teatud brauseriversioonidele spetsiaalset CSS-i, et vältida brauserite endi vigu. Need häkkimised põhjustavad arusaadavalt CSS-i valideerijatel kaebusi, et need on kehtetud. Mõnes kohas kasutame ka tipptasemel CSS-i funktsioone, mis pole veel täielikult standarditud, kuid neid kasutatakse ainult järkjärguliseks täiustamiseks.
Need valideerimishoiatused ei oma praktikas tähtsust, kuna meie CSS-i mittehäkkiv osa valideerub täielikult ja häkkivad osad ei sega mittehäkkiva osa nõuetekohast toimimist, mistõttu me neid konkreetseid hoiatusi teadlikult eirame.
Meie HTML-dokumentidel on samuti mõned triviaalsed ja ebaolulised HTML-i valideerimise hoiatused, kuna oleme kaasanud lahenduse teatud Firefoxi veale .