Source

Navigatɛriw ni minɛnw

Aw ye kunnafoni sɔrɔ navigatɔrɔw ni minɛnw kan, k’a ta bi ta la ka se kɔrɔlenw ma, minnu bɛ dɛmɛ sɔrɔ Bootstrap fɛ, ka fara fɛn dɔntaw ni buguw kan u kelen-kelen bɛɛ kama.

Navigatɛri minnu bɛ dɛmɛ

Bootstrap bɛ dɛmɛ don bɔko labanw na, minnu bɛ sabati, minnu bɛ bɔ navigatɔrɔw ni plateformes belebelew bɛɛ la. Windows kan, an bɛ Internet Explorer 10-11 / Microsoft Edge dɛmɛ .

Navigatɛri wɛrɛ minnu bɛ baara kɛ ni WebKit, Blink, walima Gecko kura ye, a kɛra k’a ɲɛsin u yɛrɛ ma walima a kɛra plateforme ka web view API fɛ, olu tɛ dɛmɛ k’a jɛya. Nka, Bootstrap ka kan (a ka c’a la) ka jira ani ka baara kɛ ka ɲɛ o navigatɛriw fana na. Dɛmɛ kunnafoni kɛrɛnkɛrɛnnen wɛrɛw bɛ sɔrɔ jukɔrɔ.

Aw bɛ se ka an ka navigatɛriw ni u bɔcogo sɔrɔ an kapackage.json :

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

An bɛ baara kɛ ni Autoprefixer ye walasa ka navigatɔrɔn dɛmɛni laɲinitaw ɲɛnabɔ CSS prefixes fɛ, o min bɛ baara kɛ ni Browserslist ye walasa ka o navigatɔrɔw bɔcogo ɲɛnabɔ. Aw ye u ka sɛbɛnw lajɛ walasa ka o baarakɛminɛnw don aw ka porozɛw kɔnɔ cogo min na.

Telefɔni selilɛriw

A ka c’a la, Bootstrap bɛ dɛmɛ don plateforme belebele kelen-kelen bɛɛ ka navigatɔrɔ defaults (navigatɛriw) labanw na. A kɔlɔsi ko proxy navigatɔrɔw (i n’a fɔ Opera Mini, Opera Mobile ka Turbo mode, UC Browser Mini, Amazon Silk) tɛ se ka baara kɛ.

Chrome ye Firefox ye Safari ye Android Navigateur & WebView ye Microsoft Edge ye baarakɛminɛn ye
Android kan A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ N/A ye Android v5.0+ bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ
iOS ye A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ N/A ye A bɛ dɛmɛ sɔrɔ
Windows 10 Mobili kɔnɔ N/A ye N/A ye N/A ye N/A ye A bɛ dɛmɛ sɔrɔ

Tabali kan navigatɛriw

O cogo kelen na, tabali-navigatɛri fanba ka bɔko labanw bɛ dɛmɛ.

Chrome ye Firefox ye Ɛntɛrinɛti Explorer Microsoft Edge ye baarakɛminɛn ye Opera ye Safari ye
Mac ye A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ N/A ye N/A ye A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ
Fenɛtiriw A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ, IE10+ A bɛ dɛmɛ sɔrɔ A bɛ dɛmɛ sɔrɔ A tɛ dɛmɛ sɔrɔ

Firefox ta fan fɛ, ka fara normal stable bɔko laban kan, an bɛ Firefox ka Extended Support Release (ESR) bɔko laban fana dɛmɛ.

O cogo la, Bootstrap ka kan ka ɲɛ ani ka taama ka ɲɛ Chromium ni Chrome la Linux kama, Firefox la Linux kama, ani Internet Explorer 9 la, hali n’u tɛ dɛmɛ sɔrɔ foroba la.

Walasa ka Bootstrap ka kan ka sɛgɛsɛgɛli kɛ ni navigatɔrɔn ka bug dɔw ye, aw ye an ka Wall of browser bugs lajɛ .

Ɛntɛrinɛti Explorer

Internet Explorer 10+ bɛ dɛmɛ sɔrɔ; IE9 ani duguma tɛ. Aw k’a dɔn ko CSS3 nafamafɛn dɔw ni HTML5 fɛn dɔw tɛ dɛmɛ bɛrɛbɛrɛ IE10 kɔnɔ, walima u bɛ nafamafɛn fɔlɔw de wajibiya walasa ka baara dafalen kɛ. Aw ye taa Can I use... la walasa ka kunnafoni wɛrɛw sɔrɔ CSS3 ni HTML5 baarakɛcogo kan navigatɛri dɛmɛni kan.

N’i ​​mago bɛ IE8-9 dɛmɛ na, i ka Bootstrap 3. O ye an ka kode suguya sabatilenba ye ani hali bi a bɛ dɛmɛ sɔrɔ an ka jɛkulu fɛ bugfix kɔrɔlenw ni sɛbɛnw caman caman cili kama. Nka, fɛn kura si tɛna fara a kan.

Modaliw ni fɛnw jigincogo mobili kan

Overflow ani scrolling (Sɛbɛnni).

Dɛmɛn min bɛ Kɛ overflow: hidden;on the <body>element ye o dan ye kosɛbɛ iOS ani Android la. Walasa k’o kɛ, n’i ye modal dɔ sanfɛla walima duguma tɛmɛ o minɛnw ka navigatɛriw dɔ la kelen na, a <body>kɔnɔkow bɛna daminɛ ka wuli. Aw ye Chrome bug #175502 ( a labɛnna Chrome v40 kɔnɔ ) ani WebKit bug #153852 lajɛ .

iOS sɛbɛnnibolow ani sɛgɛsɛgɛli

Kabini iOS 9.2 la, k’a sɔrɔ modɛli dɔ dabɔlen don, ni sɛrɛkili taamasiyɛn dɔ magali fɔlɔ bɛ sɛbɛnni <input>walima a dancɛ kɔnɔ <textarea>, <body>modali jukɔrɔ kɔnɔkow bɛna sɛrɛkili modali yɛrɛ nɔ na. Aw ye WebKit buguri #153856 lajɛ .

Eleman .dropdown-backdropin tɛ baara kɛ iOS kan nav kɔnɔ k’a sababu kɛ z-indexing ka gɛlɛya ye. O cogo la, walasa ka 'dakunw Dabɔ navbarw kɔnɔ, i ka kan ka 'yɔrɔ digi k'a ɲɛsin 'yɔrɔ ma (walima fɛn wɛrɛ min bɛna 'kɔnɔnafiliko Kɛ iOS kɔnɔ ).

Navigatɛri ka zoom

Page zooming bɛ rendering artifacts jira cogo la min tɛ Se ka Lajɔ yɔrɔ dɔw la, Bootstrap ni web tɔ bɛɛ la. Ka kɛɲɛ ni ko ye, an bɛ se k’a labɛn (a ɲini fɔlɔ ka sɔrɔ ka ko dɔ da wuli ni mago bɛ o la). Nka, an ka teli ka ninnu ɲɛmajɔ bawo a ka c’a la, u tɛ ni furakɛli tilennen ye ni hacky workarounds tɛ.

Sticky :hover/ :focuskan iOS kan

Hali n’a :hovertɛ Se ka Kɛ magan-minɛn fanba kan, iOS bɛ o kɛcogo in Ladege, o bɛ Nà ni “nɔrɔ-cogo” ye minnu bɛ To sen na fɛn kelen digilen kɔ. O hover cogoyaw bɛ Bɔ dɔrɔn ni baarakɛlaw ye fɛn wɛrɛ digi. O kɛcogo in bɛ jate kosɛbɛ ko a man ɲi, wa a bɛ iko a tɛ ko ye Android walima Windows minɛnw kan.

An ka v4 alpha ni beta bɔko bɛɛ kɔnɔ, an ye kode dafalenw ni kuma fɔlenw don a kɔnɔ walasa ka sugandi ka don media query shim dɔ kɔnɔ min bɛna hover styles bali touch device browsers kɔnɔ minnu bɛ hovering ladege. Nin baara in ma ban abada ka dafa walima ka se ka kɛ, nka walasa ka kari pewu, an y’a sugandi ka nin shim in deprecate ani ka mixins mara i n’a fɔ sira surunw pseudo-classes kama.

Sɛbɛnni kɛli

Hali bi navigatɛri dɔw la, sɛbɛnni bɛ se ka kɛ fɛn ye min bɛ mɔgɔ kabakoya.

As of Safari v8.0, use of the fixed-width .container class can cause Safari to use an unusually small font size when printing. See issue #14868 and WebKit bug #138192 for more details. One potential workaround is the following CSS:

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

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menu

Elemanw kan <select>, Android stock browser tɛna kɛrɛfɛ controles jira ni a bɛ yen border-radiusani/walima bordera bɛ baara kɛ. (Aw ye nin ɲininkali StackOverflow lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.) Baara kɛ ni kode yɔrɔ dɔ ye min bɛ duguma walasa ka CSS min bɛ mɔgɔ tɔɔrɔ, o bɔ yen ani ka the <select>jira iko fɛn min ma kɛ cogo la Android stock browser kan. Baarakɛla ka lasigiden ka fiyɛli bɛ Chrome, Safari ani Mozilla navigatɔrɔw bali.

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

Aw b’a fɛ ka misali dɔ ye wa? Aw ye nin JS Bin demo in lajɛ.

Validateurs (Sɛgɛsɛgɛlikɛlaw).

Walasa ka dɔnniya ɲuman Di navigatɔrɔ kɔrɔw ni buggy (navigatɛriw) ma, Bootstrap bɛ baara Kɛ ni CSS navigatɔrɔw hakɛw ye yɔrɔ caman na walasa ka CSS kɛrɛnkɛrɛnnenw Laɲini navigatɔrɔ dɔw la walasa ka baara Kɛ ni bugw ye navigatɔrɔw yɛrɛ kɔnɔ. O hakɛw bɛ faamuya cogo min na, o bɛ kɛ sababu ye ka CSS sɛgɛsɛgɛlikɛlaw ka ŋunankan fɔ k’u tɛ tiɲɛ ye. Yɔrɔ fila-fila la, an bɛ baara Kɛ fana ni Bleeding-edge CSS fɛɛrɛw ye minnu ma Kɛ fɔlɔ ka dafa, nka ninnu bɛ Kɛ dɔrɔn ka ɲɛtaa Kɛ ɲɛtaa kama.

O dantigɛli lasɔminiw tɛ fosi ye waleyali la bawo an ka CSS yɔrɔ min tɛ haki ye, o bɛ tiɲɛni dafalen Kɛ wa haki yɔrɔ minnu tɛ haki ye, o tɛ haki yɔrɔ in baarakɛcogo ɲuman bali, o de y’a To an bɛ nin lasɔmini kɛrɛnkɛrɛnnen ninnu jatebla Kɛ k’a da Minɛ.

an ka HTML sɛbɛnw fana bɛ ni HTML tiɲɛni lasɔmini dɔw ye minnu tɛ fosi ye ani minnu tɛ foyi ɲɛ k' a sababu kɛ an ye Firefox bugu dɔ ɲɛnabɔcogo dɔ don a kɔnɔ .