Navigatɛriw ni minɛnw
Aw ye kunnafoni sɔrɔ navigatɛriw 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ɛɛ la.
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 belebelebaw 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 ka.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
An bɛ baara kɛ ni Autoprefixer ye walasa ka navigatɔrɔn dɛmɛni laɲinitaw ɲɛnabɔ CSS prefixw 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 | A bɛ dɛmɛ sɔrɔ | 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. Ni aw mago bɛ IE8-9 dɛmɛ na, aw bɛ Bootstrap 3 kɛ.
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ɛ .
Navbar ka fɛnw jira
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.
Kabini Safari v8.0, baara kɛli ni fixe-width .containerclass ye, o bɛ se ka kɛ sababu ye Safari ka baara kɛ ni sɛbɛnnibolo hakɛ fitinin ye min tɛ deli ka kɛ ni a bɛ sɛbɛnni kɛ. aw ye bɔko #14868 ani WebKit bug #138192 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ . Baarakɛcogo dɔ min bɛ se ka kɛ, o ye nin CSS in ye:
@media print {
.container {
width: auto;
}
}
Android ka stock navigatɔrɔ
Ka bɔ o kɛsu kɔnɔ, Android 4.1 (ani hali bɔko kura dɔw bɛ i n’a fɔ) bɛ ci ni Browser app ye i n’a fɔ ɛntɛrinɛti navigatɔrɔn sugandilen fɔlɔ (a ni Chrome tɛ kelen ye). A fɔ man di nka, Browser app bɛ ni buguri caman ye ani bɛnbaliya ni CSS ye caman na.
Menu sugandi
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ɔ .