Navigatè ak aparèy
Aprann sou navigatè yo ak aparèy, soti nan modèn ak ansyen, ki sipòte pa Bootstrap, ki gen ladan bizarak li te ye ak pinèz pou chak.
Sipòte navigatè yo
Bootstrap sipòte dènye, ki estab degaje tout gwo navigatè ak platfòm yo. Sou Windows, nou sipòte Internet Explorer 10-11 / Microsoft Edge .
Navigatè altènatif ki sèvi ak dènye vèsyon WebKit, Blink, oswa Gecko, kit se dirèkteman oswa atravè API web view platfòm la, pa klèman sipòte. Sepandan, Bootstrap ta dwe (nan pifò ka) montre ak fonksyone kòrèkteman nan navigatè sa yo tou. Yo bay plis enfòmasyon sou sipò espesifik anba a.
Ou ka jwenn seri navigatè ki sipòte nou yo ak vèsyon yo nan nou an.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
Nou itilize Autoprefixer pou jere sipò navigatè ki gen entansyon atravè prefiks CSS, ki itilize Browserslist pou jere vèsyon navigatè sa yo. Konsilte dokiman yo pou kijan pou entegre zouti sa yo nan pwojè ou yo.
Aparèy mobil
Anjeneral, Bootstrap sipòte dènye vèsyon navigatè default chak gwo platfòm yo. Remake byen ke navigatè proxy (tankou Opera Mini, mòd Turbo Opera Mobile a, UC Browser Mini, Amazon Silk) pa sipòte.
| Chrome | Firefox | Safari | Navigatè Android ak WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Sipòte | Sipòte | N/A | Android v5.0+ sipòte | Sipòte |
| iOS | Sipòte | Sipòte | Sipòte | N/A | Sipòte |
| Windows 10 mobil | N/A | N/A | N/A | N/A | Sipòte |
Navigatè Desktop yo
Menm jan an tou, dènye vèsyon yo nan pifò navigatè Desktop yo sipòte.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Sipòte | Sipòte | N/A | Sipòte | Sipòte | Sipòte |
| Windows | Sipòte | Sipòte | Sipòte, IE10+ | Sipòte | Sipòte | Pa sipòte |
Pou Firefox, anplis de dènye lage nòmal ki estab, nou sipòte tou dènye vèsyon Firefox (ESR) pou dènye sipò .
Ofisyèlman, Bootstrap ta dwe gade ak konpòte byen ase nan Chromium ak Chrome pou Linux, Firefox pou Linux, ak Internet Explorer 9, menmsi yo pa ofisyèlman sipòte.
Pou jwenn yon lis kèk nan ensèk navigatè yo ke Bootstrap gen pou lite ak, gade miray nou an nan pinèz navigatè yo .
Internet Explorer
Internet Explorer 10+ sipòte; IE9 ak desann se pa. Tanpri sonje ke kèk pwopriyete CSS3 ak eleman HTML5 yo pa konplètman sipòte nan IE10, oswa mande pou pwopriyete prefiks pou fonksyonalite konplè. Vizite Èske mwen ka itilize... pou plis detay sou sipò navigatè a nan karakteristik CSS3 ak HTML5. Si ou bezwen sipò IE8-9, sèvi ak Bootstrap 3.
Modèl ak dropdowns sou mobil
Debòde ak defile
Sipò pou overflow: hidden;sou <body>eleman an se byen limite nan iOS ak android. Pou sa ka fèt, lè ou pase anwo oswa anba yon modal nan nenpòt nan navigatè aparèy sa yo, <body>kontni an ap kòmanse woule. Gade ensèk Chrome #175502 (ranje nan Chrome v40) ak ensèk WebKit #153852 .
iOS jaden tèks ak defile
Depi iOS 9.2, pandan yon modal louvri, si premye manyen yon jès woulo liv se nan fwontyè yon tèks <input>oswa yon <textarea>, <body>kontni an anba modal la pral defile olye pou yo modal nan tèt li. Gade ensèk WebKit #153856 .
Navbar Dropdowns
Eleman .dropdown-backdropan pa itilize sou iOS nan nav la akòz konpleksite z-indexing. Kidonk, pou fèmen dropdowns nan navbars, ou dwe dirèkteman klike sou eleman dropdown la (oswa nenpòt lòt eleman ki pral deklanche yon evènman klike sou iOS ).
Zoom navigatè
Zooming paj inevitableman prezante zafè rann nan kèk eleman, tou de nan Bootstrap ak rès la nan entènèt la. Tou depan de pwoblèm nan, nou ka kapab ranje li (chèche an premye epi ouvri yon pwoblèm si sa nesesè). Sepandan, nou gen tandans inyore sa yo paske yo souvan pa gen okenn solisyon dirèk lòt pase solisyon Hacky.
Sticky :hover/ :focussou iOS
Pandan ke :hoverli pa posib sou pifò aparèy manyen, iOS imite konpòtman sa a, sa ki lakòz estil "kolan" ki pèsiste apre yo fin frape yon eleman. Styles hover sa yo retire sèlman lè itilizatè yo tape yon lòt eleman. Konpòtman sa a konsidere kòm lajman endezirab epi li parèt pa yon pwoblèm sou Android oswa Windows aparèy.
Pandan tout vèsyon alfa ak beta v4 nou yo, nou enkli kòd enkonplè ak kòmantè pou chwazi nan yon shim rechèch medya ki ta enfim estil hover nan navigatè aparèy manyen ki imite plan. Travay sa a pa t janm fini nèt oswa pèmèt, men pou evite kraze nèt sou tout pwen, nou te chwazi pou deprere shim sa a epi kenbe mixin yo kòm rakoursi pou pseudo-klas yo.
Enpresyon
Menm nan kèk navigatè modèn, enprime ka orijinal.
Apati Safari v8.0, itilizasyon klas lajè fiks .containerla ka lakòz Safari sèvi ak yon gwosè font ki pa nòmal lè l ap enprime. Gade pwoblèm #14868 ak ensèk WebKit #138192 pou plis detay. Yon solisyon potansyèl se CSS sa a:
@media print {
.container {
width: auto;
}
}
Navigatè stock android
Soti nan bwat la, Android 4.1 (e menm kèk nouvo degaje aparamman) bato ak app Navigatè a kòm navigatè entènèt defo chwa (kontrèman ak Chrome). Malerezman, aplikasyon navigatè a gen anpil ensèk ak enkonsistans ak CSS an jeneral.
Chwazi meni an
Sou <select>eleman, navigatè a stock android pa pral montre kontwòl yo bò si gen yon border-radiusak / oswa borderaplike. (Gade kesyon StackOverflow sa a pou plis detay.) Sèvi ak ti bout kòd ki anba a pou retire CSS ki ofanse a epi rann li <select>kòm yon eleman san stil sou navigatè stock Android a. Sniffing ajan itilizatè a evite entèferans ak navigatè Chrome, Safari ak 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>
Vle wè yon egzanp? Tcheke demonstrasyon JS Bin sa a .
Validatè
Pou bay pi bon eksperyans posib pou navigatè fin vye granmoun ak buggy, Bootstrap itilize Hack navigatè CSS nan plizyè kote pou vize CSS espesyal nan vèsyon navigatè sèten yo nan lòd yo travay sou ensèk nan navigatè yo tèt yo. Hack sa yo konprann byen lakòz validateur CSS plenyen ke yo pa valab. Nan kèk kote, nou itilize tou karakteristik CSS ki poko nòmalize nèt, men yo itilize yo piman pou amelyorasyon pwogresif.
Avètisman validation sa yo pa gen pwoblèm nan pratik paske pòsyon ki pa piki nan CSS nou an konplètman valide ak pòsyon ki piki yo pa entèfere ak fonksyone apwopriye nan pòsyon ki pa piki a, kidonk poukisa nou fè espre inyore avètisman patikilye sa yo.
Menm jan an tou, dokiman HTML nou yo gen kèk avètisman sou validation HTML ki pa gen anpil valè akòz enklizyon nou genyen yon solisyon pou yon sèten ensèk Firefox .