Gerok û cîhazên
Fêrbûna gerok û cîhazên, ji nûjen heya kevn, ku ji hêla Bootstrap ve têne piştgirî kirin, ji bo her yekê qurs û xeletiyên naskirî hene.
Gerokên piştgirî kirin
Bootstrap serbestberdanên herî paşîn, aram ên hemî gerok û platformên sereke piştgirî dike. Li ser Windows, em piştgirî didin Internet Explorer 10-11 / Microsoft Edge .
Gerokên alternatîf ên ku guhertoya herî dawî ya WebKit, Blink, an Gecko bikar tînin, çi rasterast an jî bi riya API-ya dîtina webê ya platformê, bi eşkere nayê piştgirî kirin. Lêbelê, Bootstrap divê (di pir rewşan de) di van gerokan de jî rast nîşan bide û bixebite. Agahdariya piştevaniya taybetî ya li jêr tê peyda kirin.
Hûn dikarin rêza gerokên me yên piştgirî û guhertoyên wan di nav me de.browserslistrc file
bibînin :
# 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
Em Autoprefixer bikar tînin da ku desteka gerokê ya armanckirî bi navgîniya pêşgirên CSS-ê vebigirin, ya ku Browerslist bikar tîne da ku van guhertoyên gerokê birêve bibe. Ji bo ku hûn van amûran di projeyên xwe de çawa yek bikin, bi belgeyên wan re şêwir bikin.
Amûrên mobîl
Bi gelemperî, Bootstrap guhertoyên herî paşîn ên gerokên xwerû yên her platforma sereke piştgirî dike. Têbînî ku gerokên proxy (wek Opera Mini, moda Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) nayên piştgirî kirin.
Chrome | Firefox | Safari | Geroka Android & WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | Piştgirî kirin | Piştgirî kirin | N/A | Android v5.0+ piştgirî | Piştgirî kirin |
iOS | Piştgirî kirin | Piştgirî kirin | Piştgirî kirin | N/A | Piştgirî kirin |
Windows 10 Mobile | N/A | N/A | N/A | N/A | Piştgirî kirin |
Gerokên sermaseyê
Bi heman rengî, guhertoyên herî dawî yên piraniya gerokên sermaseyê têne piştgirî kirin.
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opîra | Safari | |
---|---|---|---|---|---|---|
Mac | Piştgirî kirin | Piştgirî kirin | N/A | Piştgirî kirin | Piştgirî kirin | Piştgirî kirin |
Windows | Piştgirî kirin | Piştgirî kirin | Piştgirî, IE10+ | Piştgirî kirin | Piştgirî kirin | Ne piştgirî kirin |
Ji bo Firefox, ji bilî serbestberdana asayî ya herî paşîn, em piştgirî didin guhertoya herî dawî ya berdana Piştgiriya Berfireh (ESR) ya Firefox.
Nefermî, Bootstrap divê li Chromium û Chrome ji bo Linux, Firefox ji bo Linux, û Internet Explorer 9 têra xwe baş xuya bike û tevbigere, her çend ew bi fermî nayên piştgirî kirin.
Ji bo navnîşek hin xeletiyên gerokê ku Bootstrap neçar e ku bi wan re mijûl bibe, li Dîwarê xeletiyên gerokê binêrin .
Internet Explorer
Internet Explorer 10+ tê piştgirî kirin; IE9 û jêr ne. Ji kerema xwe hay ji xwe hebin ku hin taybetmendiyên CSS3 û hêmanên HTML5 di IE10 de bi tevahî nayên piştgirî kirin, an ji bo fonksiyona tevahî taybetmendiyên pêşgir hewce ne. Ji bo hûrguliyên li ser piştgirîya gerokê ya taybetmendiyên CSS3 û HTML5, biçin Ez dikarim bikar bînim… . Heke hûn piştgiriya IE8-9 hewce ne, Bootstrap 3 bikar bînin.
Modal û dakêşanên li ser mobîl
Zêdebûn û gerandin
Piştgiriya overflow: hidden;
li ser <body>
hêmanê di iOS û Android-ê de pir kêm e. Ji bo wê armancê, gava ku hûn di gerokên van cîhazan de ji jor an binê modalekê derbas bikin, <body>
naverok dê dest bi gerokê bike. Binêre xeletiya Chrome #175502 (di Chrome v40 de hatî rast kirin) û xeletiya WebKit #153852 .
Zeviyên nivîsê yên iOS û gerok
Ji iOS 9.2-ê ve, dema ku modalek vekirî ye, ger pêla destpêkê ya jestek gerokê di nav sînorê nivîsarek <input>
an a- ê de be <textarea>
, dê <body>
naveroka li binê modalê li şûna modal bixwe were gerandin. Binêre xeletiya WebKit #153856 .
Navbar Dropdowns
Element .dropdown-backdrop
ji ber tevliheviya z-indekskirinê li ser iOS-ê di nav de nayê bikar anîn. Bi vî rengî, ji bo girtina dakêşanên di navbaran de, divê hûn rasterast li ser hêmana dakêşanê bikirtînin (an jî hêmanek din a ku dê bûyerek klîk di iOS-ê de bişewitîne ).
Browser zoom
Zêdekirina rûpelan bi neçarî di hin pêkhateyan de, hem di Bootstrap û hem jî di tevna tevnerê de, hunerên renderkirinê pêşkêşî dike. Bi pirsgirêkê ve girêdayî, dibe ku em karibin wê rast bikin (pêşî bigerin û heke hewce be pirsgirêkek vekin). Lêbelê, em mêl dikin ku vana paşguh bikin ji ber ku ew bi gelemperî ji bilî rêgezên hacky ti çareseriyek rasterast tune.
Asteng :hover
/ :focus
li ser iOS
Digel :hover
ku li ser piraniya cîhazên destikê ne mumkin e, iOS vê tevgerê dişibihîne, di encamê de şêwazên hoverê yên "zeliqandî" çêdibin ku piştî lêdana yek hêmanek dom dikin. Van şêwazên hover tenê dema ku bikarhêner hêmanek din tap dikin têne rakirin. Ev tevger bi piranî nexwestî tê hesibandin û xuya dike ku ne pirsgirêkek li ser cîhazên Android an Windows-ê ye.
Di seranserê weşanên alpha û beta yên v4 de, me kodek netemam û şîrove kir ji bo vebijarkek pirsiyara medyayê ya ku dê şêwazên hoverê di gerokên cîhaza pêwendiyê de yên ku hejandinê dişibîne neçalak bike. Ev xebat tu carî bi tevahî nehat qedandin an çalak kirin, lê ji bo ku em ji şikestinek bêkêmasî dûr nekevin, me hilbijart ku em vê şimayê pûç bikin û mîksan wekî kurtebirên ji bo çînên pseudo bihêlin.
Çapnivîs
Tewra di hin gerokên nûjen de, çapkirin dibe ku qeşeng be.
Li gorî Safari v8.0, karanîna pola-firehiya sabît .container
dikare bibe sedem ku Safari dema çapkirinê mezinahiyek tîpek piçûk a bêhempa bikar bîne. Ji bo bêtir agahdarî li pirsgirêka #14868 û xeletiya WebKit #138192 binêre. Yek çareseriyek potansiyel CSS-ya jêrîn e:
@media print {
.container {
width: auto;
}
}
geroka stock Android
Ji derveyî qutiyê, Android 4.1 (û tewra hin serbestberdanên nûtir jî diyar e) bi sepana Gerokê re wekî geroka webê ya xwerû ya bijartî tê şandin (li hember Chrome). Mixabin, sepana Gerokê bi gelemperî bi CSS-ê re gelek xeletî û nakokî hene.
Menu hilbijêre
Li ser <select>
hêmanan, gerokek stokê ya Android-ê ger hebe border-radius
û/an border
were sepandin dê kontrolên alî nîşan nede. (Ji bo hûragahiyan li vê pirsa StackOverflow binêre.) Parçeya kodê ya li jêr bikar bînin da ku CSS- <select>
ya sûcdar rakin û li ser geroka stokê ya Android-ê wekî hêmanek bê şêwaz bikin. Sniffing nûnerê bikarhêner ji destwerdana gerokên Chrome, Safari û Mozilla dûr dikeve.
<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>
Dixwazin mînakek bibînin? Vê demoya JS Bin kontrol bikin .
Validators
Ji bo ku ezmûna çêtirîn gengaz ji gerokên kevn û xelet re peyda bike, Bootstrap li gelek cihan hakên geroka CSS bikar tîne da ku CSS -ya taybetî ji hin guhertoyên gerokê re bike armanc da ku li dora xeletiyên di gerokên xwe de bixebite. Van hacks bi têgihîştin dibe sedem ku erêkerên CSS gilî bikin ku ew nederbasdar in. Di çend cihan de, em taybetmendiyên CSS-ê yên xwînrij ên ku hîn bi tevahî standardkirî ne jî bikar tînin, lê ev bi tenê ji bo pêşkeftina pêşkeftî têne bikar anîn.
Van hişyariyên erêkirinê di pratîkê de ne girîng in ji ber ku beşa ne-hacky ya CSS-a me bi tevahî dipejirîne û beşên hacky di xebata rast a beşa ne-hacky de mudaxele nakin, ji ber vê yekê em bi qestî van hişyariyên taybetî paşguh dikin.
Di heman demê de belgeyên me yên HTML-ê jî hin hişyariyên erêkirina HTML-ê yên bêkêmasî û bêbandor hene ji ber tevlêbûna me ya çareseriyek ji bo xeletiyek Firefox-ê .