Brabhsálaithe agus gléasanna
Foghlaim faoi na brabhsálaithe agus na gléasanna, ó nua-aimseartha go sean, a fhaigheann tacaíocht ó Bootstrap, lena n-áirítear cuairicí agus fabhtanna aitheanta do gach ceann acu.
Tacaíonn Bootstrap leis na heisiúintí cobhsaí is déanaí de gach mórbhrabhsálaí agus ardáin. Ar Windows, tacaímid le Internet Explorer 10-11 / Microsoft Edge .
Ní thacaítear go sainráite le brabhsálaithe eile a úsáideann an leagan is déanaí de WebKit, Blink, nó Gecko, cibé acu go díreach nó trí API amharc gréasáin an ardáin. Mar sin féin, ba cheart do Bootstrap (i bhformhór na gcásanna) taispeáint agus feidhmiú i gceart sna brabhsálaithe seo freisin. Soláthraítear faisnéis tacaíochta níos sainiúla thíos.
Is féidir leat ár raon brabhsálaithe tacaithe agus a leaganacha a fháil inárpackage.json n- :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Bainimid úsáid as Autoprefixer chun tacaíocht do bhrabhsálaí atá beartaithe a láimhseáil trí réimíreanna CSS, a úsáideann Browserslist chun na leaganacha brabhsálaí seo a bhainistiú. Féach ar a gcuid doiciméad le haghaidh conas na huirlisí seo a chomhtháthú le do thionscadail.
Go ginearálta, tacaíonn Bootstrap leis na leaganacha is déanaí de bhrabhsálaithe réamhshocraithe gach ardáin mhóra. Tabhair faoi deara nach dtugtar tacaíocht do bhrabhsálaithe seachfhreastalaí (cosúil le Opera Mini, modh Turbo Opera Mobile, UC Browser Mini, Amazon Silk).
| Chrome | Firefox | Safari | Brabhsálaí Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Tacaithe | Tacaithe | N / A | Tacaítear le Android v5.0+ | Tacaithe |
| iOS | Tacaithe | Tacaithe | Tacaithe | N / A | Tacaithe |
| Windows 10 soghluaiste | N / A | N / A | N / A | N / A | Tacaithe |
Mar an gcéanna, tacaítear leis na leaganacha is déanaí den chuid is mó de na brabhsálaithe deisce.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Tacaithe | Tacaithe | N / A | N / A | Tacaithe | Tacaithe |
| Windows | Tacaithe | Tacaithe | Tacaithe, IE10+ | Tacaithe | Tacaithe | Gan tacaíocht |
I gcás Firefox, chomh maith leis an ngnáthscaoileadh cobhsaí is déanaí, tacaímid freisin leis an leagan is déanaí den Eisiúint Tacaíochta Leathnaithe (ESR) de Firefox.
Go neamhoifigiúil, ba cheart do Bootstrap breathnú agus iompar sách maith i gCróimiam agus Chrome le haghaidh Linux, Firefox le haghaidh Linux, agus Internet Explorer 9, cé nach bhfuil tacaíocht oifigiúil acu.
Le haghaidh liosta de chuid de na fabhtanna brabhsálaí a gcaithfidh Bootstrap dul i ngleic leo, féach ar ár Wall of browser bugs .
tacaítear le Internet Explorer 10+; Níl IE9 agus síos. Tabhair faoi deara le do thoil nach dtacaítear go hiomlán le roinnt airíonna CSS3 agus eilimintí HTML5 in IE10, nó go dteastaíonn airíonna réamhshocruithe le haghaidh feidhmiúlacht iomlán. Tabhair cuairt ar An féidir liom úsáid a bhaint as… le haghaidh sonraí maidir le tacaíocht brabhsálaí do ghnéithe CSS3 agus HTML5.
Má theastaíonn tacaíocht IE8-9 uait, bain úsáid as Bootstrap 3. Is é an leagan is cobhsaí dár gcód é agus tá sé fós á thacú ag ár bhfoireann le haghaidh ceartúcháin criticiúla agus athruithe doiciméadúcháin. Ní chuirfear aon ghnéithe nua leis, áfach.
Tá tacaíocht don overflow: hidden;eilimint <body>teoranta go leor i iOS agus Android. Chuige sin, nuair a scrollaíonn tú thar barr nó bun modha i gceachtar de na brabhsálaithe gléasanna sin, <body>tosóidh an t-ábhar ag scrollú. Féach fabht Chrome #175502 (seasta in Chrome v40) agus fabht WebKit #153852 .
Amhail iOS 9.2, cé go bhfuil modúl oscailte, má tá teagmháil tosaigh gotha scrollaithe laistigh de theorainn téacsúil <input>nó <textarea>, déanfar an t- <body>ábhar faoin modh a scrollú in ionad an mhódúil féin. Féach ar fhabht WebKit #153856 .
Ní .dropdown-backdropúsáidtear an eilimint ar iOS sa nav mar gheall ar chastacht an innéacsaithe z. Mar sin, chun anuas a dhúnadh sna barraí nascleanúna, ní mór duit an eilimint anuas a chliceáil go díreach (nó ar aon eilimint eile a chuirfeadh imeacht cliceáil ar iOS ).
Tá sé dosheachanta go dtugann súmáil leathanaigh déantáin rindreála i roinnt comhpháirteanna, i Bootstrap agus sa chuid eile den ngréasán. Ag brath ar an tsaincheist, seans go mbeimid in ann í a réiteach (cuardaigh ar dtús agus ansin ceist a oscailt más gá). Mar sin féin, is gnách linn neamhaird a dhéanamh orthu seo mar is minic nach mbíonn aon réiteach díreach acu seachas réitigh sheacanta.
Cé :hovernach féidir é a dhéanamh ar fhormhór na ngléasanna tadhaill, déanann iOS aithris ar an iompar seo, agus mar thoradh air sin bíonn stíleanna “greamaitheacha” hover a leanann tar éis gné amháin a thapáil. Ní bhaintear na stíleanna hover seo ach amháin nuair a thapaíonn úsáideoirí eilimint eile. Meastar go bhfuil an iompar seo neamh-inmhianaithe den chuid is mó agus is cosúil nach fadhb é ar ghléasanna Android nó Windows.
Le linn ár n-eisiúintí v4 alfa agus béite, chuireamar cód neamhiomlán san áireamh agus rinneamar trácht ar rogha an diúltaithe i gceist le ceist meáin a dhíchumasódh stíleanna hover i mbrabhsálaithe gléasanna tadhaill a dhéanann aithris ar hovering. Níor críochnaíodh nó níor cumasaíodh an obair seo go hiomlán, ach chun briseadh iomlán a sheachaint, roghnaigh muid an shim seo a dhímheas agus na meascáin a choinneáil mar aicearraí do na pseudo-ranganna.
Fiú i roinnt brabhsálaithe nua-aimseartha, is féidir le priontáil a bheith neamhghnách.
Amhail Safari v8.0, d’fhéadfadh úsáid an ranga leithead seasta .containera chur faoi deara go n-úsáidfidh Safari clómhéid neamhghnách beag agus é ag priontáil. Féach eagrán #14868 agus WebKit fabht #138192 le haghaidh tuilleadh sonraí. Réiteach féideartha amháin is ea an CSS seo a leanas:
@media print {
.container {
width: auto;
}
}Amach as an mbosca, seoltar Android 4.1 (agus fiú roinnt eisiúintí níos nuaí de réir dealraimh) leis an aip Brabhsálaí mar an brabhsálaí gréasáin réamhshocraithe de rogha (seachas Chrome). Ar an drochuair, tá go leor fabhtanna agus neamhréireachtaí ag an app Brabhsálaí le CSS i gcoitinne.
Maidir <select>le heilimintí, ní thaispeánfaidh brabhsálaí stoc Android na taobhrialtáin má tá a border-radiusagus/nó bordercurtha i bhfeidhm. (Féach ar an gceist StackOverflow seo le haghaidh sonraí.) Bain úsáid as an mblúire de chód thíos chun an CSS ciontach a bhaint agus é a dhéanamh <select>mar eilimint gan stíl ar stocbhrabhsálaí Android. Seachnaíonn sniffing an ghníomhaire úsáideora cur isteach ar bhrabhsálaithe Chrome, Safari agus 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>Ar mhaith leat sampla a fheiceáil? Amharc ar an taispeántas JS Bin seo.
Chun an taithí is fearr is féidir a sholáthar do sheanbhrabhsálaithe agus do bhrabhsálaithe bugaí, úsáideann Bootstrap hacks brabhsálaí CSS in áiteanna éagsúla chun CSS speisialta a dhíriú ar leaganacha áirithe de bhrabhsálaí chun oibriú timpeall ar fhabhtanna sna brabhsálaithe iad féin. Is intuigthe go mbíonn na hacks seo ina gcúis le bailíochtaithe CSS gearán a dhéanamh go bhfuil siad neamhbhailí. I gcúpla áit, bainimid úsáid freisin as gnéithe tuirlingthe CSS nach bhfuil caighdeánaithe go hiomlán fós, ach ní úsáidtear iad seo ach amháin le haghaidh feabhsaithe forásach.
Ní hionann na rabhaidh bailíochtaithe seo go praiticiúil ós rud é go ndéanann an chuid neamh-hacky dár CSS bailíochtú go hiomlán agus nach gcuireann na codanna hacky isteach ar fheidhmiú ceart na coda neamhhacky, mar sin an fáth a ndéanaimid neamhaird d'aon ghnó ar na rabhaidh áirithe seo.
Tá roinnt rabhaidh bailíochtaithe HTML fánach agus neamhleanúnacha ag ár ndoiciméid HTML mar gheall ar ár gcuimsiú d'fhabht oibre le haghaidh fabht Firefox áirithe .