Browsers thiab khoom siv
Kawm txog cov browsers thiab cov khoom siv, txij li niaj hnub mus rau qub, uas tau txais kev txhawb nqa los ntawm Bootstrap, suav nrog cov paub quirks thiab kab rau txhua tus.
Txhawb browsers
Bootstrap txhawb nqa qhov tseeb, ruaj khov tso tawm ntawm txhua qhov loj browsers thiab platforms. Ntawm Windows, peb txhawb Internet Explorer 10-11 / Microsoft Edge .
Lwm qhov browsers uas siv qhov tseeb version ntawm WebKit, Blink, lossis Gecko, txawm tias ncaj qha lossis los ntawm lub platform lub vev xaib saib API, tsis txaus siab. Txawm li cas los xij, Bootstrap yuav tsum (feem ntau) tso saib thiab ua haujlwm kom raug hauv cov browsers no thiab. Cov ntaub ntawv txhawb nqa tshwj xeeb muaj qhia hauv qab no.
Koj tuaj yeem pom peb qhov kev txhawb nqa ntawm browsers thiab lawv cov versions hauv peb.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
Peb siv Autoprefixer los lis kev txhawb nqa browser ntawm CSS prefixes, uas siv Browserslist los tswj cov browser versions. Tham nrog lawv cov ntaub ntawv rau yuav ua li cas koom ua ke cov cuab yeej no rau hauv koj qhov project.
Cov khoom siv txawb
Feem ntau hais lus, Bootstrap txhawb nqa qhov tseeb versions ntawm txhua lub platform loj lub neej ntawd browsers. Nco ntsoov tias cov browsers npe (xws li Opera Mini, Opera Mobile's Turbo hom, UC Browser Mini, Amazon Silk) tsis txaus siab.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Txhawb nqa | Txhawb nqa | N/A | Android v5.0+ txhawb nqa | Txhawb nqa |
| iOS no | Txhawb nqa | Txhawb nqa | Txhawb nqa | N/A | Txhawb nqa |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Txhawb nqa |
Desktop browsers
Ib yam li ntawd, qhov tseeb versions ntawm feem ntau desktop browsers tau txais kev txhawb nqa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Txhawb nqa | Txhawb nqa | N/A | Txhawb nqa | Txhawb nqa | Txhawb nqa |
| Qhov rai | Txhawb nqa | Txhawb nqa | Txhawb nqa, IE10+ | Txhawb nqa | Txhawb nqa | Tsis txhawb |
Rau Firefox, ntxiv rau qhov kev tso tawm ruaj khov tshiab kawg, peb kuj txhawb nqa qhov tseeb Extended Support Release (ESR) version ntawm Firefox.
Unofficially, Bootstrap yuav tsum saib thiab coj tus cwj pwm zoo txaus hauv Chromium thiab Chrome rau Linux, Firefox rau Linux, thiab Internet Explorer 9, txawm tias lawv tsis tau txais kev txhawb nqa.
Rau ib daim ntawv teev npe ntawm qee qhov browser kab mob uas Bootstrap yuav tsum tau rub nrog, saib peb phab ntsa ntawm browser kab .
Internet Explorer
Internet Explorer 10+ txhawb nqa; IE9 thiab down tsis yog. Thov nco ntsoov tias qee qhov CSS3 cov khoom thiab HTML5 cov ntsiab lus tsis txaus siab rau hauv IE10, lossis xav tau cov khoom ua ntej rau kev ua haujlwm tag nrho. Mus saib Kuv tuaj yeem siv… kom paub meej txog kev txhawb nqa browser ntawm CSS3 thiab HTML5 nta. Yog tias koj xav tau IE8-9 kev txhawb nqa, siv Bootstrap 3.
Modals thiab dropdowns ntawm mobile
Overflow thiab scrolling
Kev them nyiaj yug rau overflow: hidden;ntawm lub <body>caij yog heev txwv nyob rau hauv iOS thiab Android. Txog qhov kawg, thaum koj scroll dhau los ntawm sab saum toj lossis hauv qab ntawm lub modal hauv ob qho ntawm cov khoom siv 'browser, cov <body>ntsiab lus yuav pib scroll. Saib Chrome kab #175502 (tso nyob rau hauv Chrome v40) thiab WebKit kab #153852 .
iOS text teb thiab scrolling
Raws li ntawm iOS 9.2, thaum lub modal qhib, yog tias qhov pib kov ntawm ib qho taw qhia scroll nyob rau hauv ciam teb ntawm cov ntawv nyeem <input>lossis a <textarea>, cov <body>ntsiab lus hauv qab lub modal yuav scrolled es tsis txhob ntawm lub modal nws tus kheej. Saib WebKit kab mob #153856 .
Navbar Dropdowns
Lub .dropdown-backdropcaij tsis siv rau iOS no hauv nav vim qhov nyuaj ntawm z-indexing. Yog li, txhawm rau kaw cov dropdowns hauv navbars, koj yuav tsum ncaj qha nyem qhov poob qis (lossis lwm yam khoom uas yuav tua cov kev tshwm sim nyem hauv iOS ).
Browser zooming
Nplooj ntawv zooming inevitably nthuav qhia cov khoom cuav hauv qee cov khoom, ob qho tib si hauv Bootstrap thiab lwm lub vev xaib. Nyob ntawm qhov teeb meem, peb tuaj yeem kho nws (nrhiav ua ntej thiab tom qab ntawd qhib qhov teeb meem yog tias xav tau). Txawm li cas los xij, peb nyiam tsis quav ntsej cov no vim lawv feem ntau tsis muaj kev daws teeb meem uas tsis yog hacky workarounds.
Sticky :hover/ :focusntawm iOS
Thaum :hovertsis muaj peev xwm ntawm cov khoom siv kov feem ntau, iOS emulates tus cwj pwm no, ua rau "nqa" hover styles uas pheej mus tom qab tapping ib lub caij. Cov hom hover no tsuas yog muab tshem tawm thaum cov neeg siv coj mus rhaub lwm lub caij. Tus cwj pwm no suav tias yog qhov tsis xav tau ntau thiab zoo li tsis yog qhov teeb meem ntawm Android lossis Windows li.
Thoob plaws hauv peb cov v4 alpha thiab beta tso tawm, peb suav nrog tsis tiav thiab tawm tswv yim tawm code rau kev xaiv rau hauv cov lus nug xov xwm shim uas yuav lov tes taw hover styles nyob rau hauv kov ntaus browsers uas emulate hovering. Txoj hauj lwm no yeej tsis tau ua tiav tag nrho lossis qhib, tab sis kom tsis txhob ua tiav kev tawg, peb tau xaiv los txiav txim siab qhov no thiab khaws cov mixins ua shortcuts rau pseudo-chav kawm.
Kev luam ntawv
Txawm nyob hauv qee qhov browsers niaj hnub no, luam ntawv tuaj yeem ua qhov txawv txav.
Raws li ntawm Safari v8.0, kev siv cov chav kawm tas-dav .containertuaj yeem ua rau Safari siv qhov txawv me me font loj thaum luam ntawv. Saib qhov teeb meem #14868 thiab WebKit kab #138192 kom paub meej ntxiv. Ib qho kev daws teeb meem muaj peev xwm yog CSS hauv qab no:
@media print {
.container {
width: auto;
}
}
Android Tshuag browser
Tawm ntawm lub thawv, Android 4.1 (thiab txawm tias qee qhov kev tshaj tawm tshiab pom meej) xa nrog Browser app raws li lub vev xaib browser xaiv (tsis yog Chrome). Hmoov tsis zoo, Browser app muaj ntau cov kab thiab tsis sib xws nrog CSS feem ntau.
Xaiv cov ntawv qhia zaub mov
Ntawm <select>cov ntsiab lus, Android Tshuag browser yuav tsis tso saib cov kev tswj hwm sab yog tias muaj border-radiusthiab / lossis bordersiv. (Saib cov lus nug StackOverflow no kom paub meej.) Siv cov snippet ntawm cov cai hauv qab no kom tshem tawm CSS ua txhaum cai thiab muab cov <select>khoom ua tsis zoo ntawm Android Tshuag browser. Tus neeg siv sniffing tsis cuam tshuam nrog Chrome, Safari, thiab 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>
Xav pom ib qho piv txwv? Mus saib no JS Bin demo .
Cov validators
Txhawm rau muab qhov ua tau zoo tshaj plaws rau cov laus thiab cov neeg tsis paub browsers, Bootstrap siv CSS browser hacks hauv ntau qhov chaw txhawm rau tsom CSS tshwj xeeb rau qee qhov browser versions txhawm rau ua haujlwm nyob ib puag ncig cov kab hauv browsers lawv tus kheej. Cov hacks no nkag siab ua rau CSS validators yws tias lawv tsis raug. Nyob rau hauv ob peb qhov chaw, peb kuj siv los ntshav-ntug CSS nta uas tseem tsis tau tag nrho cov qauv, tab sis cov no yog siv dawb huv rau kev nce qib.
Cov lus ceeb toom kev lees paub no tsis muaj teeb meem hauv kev xyaum txij li qhov tsis yog hacky ntawm peb CSS tau siv tau tag nrho thiab cov feem hacky tsis cuam tshuam nrog kev ua haujlwm zoo ntawm qhov tsis yog hacky, yog li vim li cas peb txhob txwm tsis quav ntsej cov lus ceeb toom tshwj xeeb no.
Peb cov ntaub ntawv HTML ib yam li muaj qee qhov tsis tseem ceeb thiab tsis tsim nyog HTML validation ceeb toom vim peb suav nrog kev ua haujlwm rau qee yam kab mob Firefox .