Source

Su'esu'e ma masini

A'oa'o e uiga i su'esu'ega ma masini, mai fa'aonaponei e o'o i le tuai, o lo'o lagolagoina e Bootstrap, e aofia ai quirks ma bugs mo ta'itasi.

Su'esu'ega lagolago

E lagolagoina e Bootstrap fa'asalalauga fou ma mautu o su'esu'ega tetele uma ma fa'avae. I luga o Windows, matou te lagolagoina Internet Explorer 10-11 / Microsoft Edge .

O isi su'esu'ega o lo'o fa'aogaina le WebKit, Blink, po'o Gecko, pe tu'u sa'o po'o ala i luga ole laiga ole upegatafa'ilagi API, e le o lagolagoina manino. Ae ui i lea, Bootstrap e tatau (i le tele o tulaga) faʻaalia ma galue saʻo i nei suʻesuʻega. O fa'amatalaga lagolago fa'apitoa o lo'o tu'uina atu i lalo.

E mafai ona e mauaina le tele o su'esu'ega lagolago ma a latou fa'aliliuga i la matoupackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

Matou te fa'aogaina le Autoprefixer e fa'atautaia ai le lagolago mo su'esu'ega e ala ile CSS prefix, lea e fa'aogaina ai le Browserslist e fa'atautaia ai nei su'esu'ega. Fa'afeso'ota'i a latou fa'amaumauga mo le tu'ufa'atasia o nei mea faigaluega i au galuega.

Masini feaveai

I le tulaga masani, e lagolagoina e Bootstrap lomiga fou o su'esu'ega fa'aletonu ta'itasi. Manatua o su'esu'ega sui (pei o le Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) e le lagolagoina.

Chrome Firefox Safari Android Su'esu'e ma WebView Microsoft Edge
Android Lagolagoina Lagolagoina N/A Android v5.0+ lagolago Lagolagoina
iOS Lagolagoina Lagolagoina Lagolagoina N/A Lagolagoina
Windows 10 Mobile N/A N/A N/A N/A Lagolagoina

Su'esu'ega Desktop

E fa'apena fo'i, o lo'o lagolagoina fo'i fa'amatalaga lata mai o le tele o su'esu'ega o le desktop.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Lagolagoina Lagolagoina N/A N/A Lagolagoina Lagolagoina
Pupuni Lagolagoina Lagolagoina Lagolago, IE10+ Lagolagoina Lagolagoina Le lagolagoina

Mo Firefox, fa'aopoopo i le fa'asalalauga fa'amaumau masani, matou te lagolagoina fo'i le fa'amatalaga lata mai o le Extended Support Release (ESR) a Firefox.

E le aloaia, Bootstrap e tatau ona foliga lelei ma amio lelei i Chromium ma Chrome mo Linux, Firefox mo Linux, ma Internet Explorer 9, e ui lava e le o lagolagoina aloaia.

Mo se lisi o nisi o masini suʻesuʻe e tatau ona tauivi ma Bootstrap, vaʻai i le matou Wall of browser bugs .

Internet Explorer

Internet Explorer 10+ e lagolagoina; IE9 ma lalo e leai. Fa'amolemole ia nofouta o nisi o meatotino CSS3 ma elemene HTML5 e le'o lagolagoina atoatoa ile IE10, pe mana'omia mea fa'apipi'i mo le fa'atinoina atoatoa. Asiasi E mafai ona ou fa'aogaina... mo fa'amatalaga ile lagolago ole su'esu'e ole CSS3 ma HTML5.

Afai e te manaʻomia le lagolago a le IE8-9, faʻaaoga le Bootstrap 3. O le faʻamaumauga sili ona mautu o la matou code ma o loʻo lagolagoina pea e la matou 'au mo faʻafitauli faʻaletonu ma suiga o faʻamaumauga. Ae ui i lea, e leai ni foliga fou o le a faʻaopoopoina i ai.

Modal ma fa'alalo i luga ole telefoni feavea'i

Taumasua ma ta'avale

Lagolago mo overflow: hidden;luga ole <body>elemene e faʻatapulaʻaina ile iOS ma le Android. I lena tulaga, pe a e taʻavale i tua i luga poʻo le pito i lalo o se auala i soʻo se tasi o na masini suʻesuʻe, o le <body>a amata ona taʻavale le anotusi. Va'ai Chrome bug #175502 (fa'amau i Chrome v40) ma WebKit bug #153852 .

iOS fanua tusitusiga ma ta'avale

E tusa ai ma le iOS 9.2, a'o tatala se auala, pe afai o le paʻi muamua o se tusi taʻavale o loʻo i totonu o le tuaoi o se tusitusiga <input>poʻo se <textarea>, o <body>mea o loʻo i lalo o le modal o le a taʻavale nai lo le auala lava ia. Va'ai WebKit bug #153856 .

E .dropdown-backdrople fa'aogaina le elemene ile iOS ile nav ona o le lavelave ole z-indexing. O lea la, ina ia tapunia pa'ū i lalo navbars, e tatau ona e kiliki saʻo le pa'ū elemene elemene (poʻo soʻo se isi elemene e faʻapupulaina ai se kiliki mea na tupu i iOS ).

Su'ega su'esu'e

O le fa'aliga o itulau e mautinoa lava e fa'aalia ai le tu'uina atu o mea taulima i nisi vaega, i totonu o Bootstrap ma isi vaega o le upega tafa'ilagi. Faʻalagolago i le mataupu, atonu e mafai ona matou faʻaleleia (saili muamua ona tatala lea o se mataupu pe a manaʻomia). Ae ui i lea, e masani ona tatou le amanaiaina nei mea ona e masani ona leai ni fofo tuusaʻo e ese mai i le hacky workarounds.

Pipi :hover/ :focusluga iOS

E ui ina :hoverle mafai i le tele o masini pa'i, iOS e fa'ata'ita'i i lenei amio, e i'u ai i sitaili fa'apipi'i "pi'i" e fa'aauau pea pe a uma ona tata se tasi elemene. O nei sitaili fa'afefe e na'o le aveeseina pe a o'o e tagata fa'aoga se isi elemene. O lenei amio e manatu tele e le mana'omia ma e foliga mai e le o se fa'afitauli i masini Android po'o Windows.

I la matou fa'asalalauga uma o le v4 alpha ma le beta, na matou fa'aofia ai le fa'ailoga e le'i atoatoa ma fa'ailoa mai mo le filifili i totonu o se fa'amatalaga fa'asalalau fa'asalalau e fa'amalo ai sitaili fa'afefe i masini su'esu'e masini e fa'aa'oa'o i le fa'afefe. O lenei galuega e leʻi maeʻa atoatoa pe mafai, ae ina ia aloese mai le malepelepe atoatoa, ua matou filifili e faʻaumatia lenei shim ma faʻatumauina faʻafefiloi e fai ma ala pupuu mo vasega faʻailoga.

Lomitusi

E oo lava i nisi suʻesuʻega faʻaonaponei, lolomi e mafai ona faʻafefe.

E pei o le Safari v8.0, o le fa'aogaina o le .containervasega fa'amautu-lautele e mafai ona fa'aogaina ai e Safari se fa'aoga la'ititi la'ititi pe a lolomi. Va'ai le lomiga #14868 ma WebKit bug #138192 mo nisi fa'amatalaga. O se tasi e mafai ona faʻaogaina o le CSS lea:

@media print {
  .container {
    width: auto;
  }
}

Su'esu'e oloa Android

I fafo atu o le pusa, Android 4.1 (ma e oʻo lava i nisi faʻasalalauga fou e foliga mai) faʻatasi ma le Browser app e avea o le upega tafaʻilagi le lelei o filifiliga (e ese mai le Chrome). O le mea e leaga ai, o le Browser app e tele naua ma faʻalavelave ma le CSS lautele.

Filifili le lisi

I luga o <select>elemene, o le a le faʻaalia e le suʻesuʻega o oloa a le Android le faʻatonuga o le itu pe a iai se border-radiusma / pe borderfaʻaaogaina. (Vaai i lenei fesili StackOverflow mo faʻamatalaga.) Faʻaaoga le snippet of code o loʻo i lalo e aveese ai le CSS solitulafono ma faʻaalia <select>e avea o se elemene e le faʻaalia i luga o le suʻega o oloa Android. Ole sogisogi ole tagata fa'aoga e aloese mai le fa'alavelave ile Chrome, Safari, ma Mozilla browsers.

<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>

E te fia va'ai i se fa'ata'ita'iga? Siaki lenei JS Bin demo.

Tagata fa'amaonia

Ina ia mafai ona maua le poto masani sili ona lelei i suʻesuʻega tuai ma taʻavale, e faʻaogaina e Bootstrap hacks suʻesuʻe CSS i le tele o nofoaga e faʻatatau ai le CSS faʻapitoa i nisi o suʻega suʻesuʻe ina ia mafai ai ona faʻaogaina faʻamau i totonu o latou lava suʻesuʻega. O nei hacks ma le malamalama e mafua ai ona faitio tagata faʻamaonia CSS e le aoga. I ni nofoaga se lua, matou te fa'aogaina fo'i vaega CSS e le'i fa'ata'atia atoatoa, ae o lo'o fa'aogaina mo le fa'aleleia atili.

O nei lapataiga faʻamaonia e le afaina i le faʻatinoga talu ai o le vaega e le-hacky o la tatou CSS e faʻamaonia atoatoa ma o vaega hacky e le faʻalavelave i le faʻaogaina lelei o le vaega e le-hacky, o le mea lea tatou te le amanaiaina ai nei lapataiga faapitoa.

O a matou HTML docs foi e iai ni lapataiga faʻamaonia HTML e le taua ma e le taua ona o lo matou faʻaofiina o se fofo mo se pusa Firefox patino .