Բրաուզերներ և սարքեր
Իմացեք բրաուզերների և սարքերի մասին՝ ժամանակակիցից մինչև հին, որոնք աջակցվում են Bootstrap-ի կողմից՝ ներառյալ հայտնի տարօրինակություններն ու սխալները յուրաքանչյուրի համար:
Աջակցվող բրաուզերներ
Bootstrap-ն աջակցում է բոլոր հիմնական բրաուզերների և հարթակների վերջին, կայուն թողարկումները : Windows-ում մենք աջակցում ենք Internet Explorer 10-11 / Microsoft Edge :
Այլընտրանքային բրաուզերները, որոնք օգտագործում են WebKit-ի, Blink-ի կամ Gecko-ի վերջին տարբերակը՝ ուղղակիորեն կամ հարթակի վեբ դիտման API-ի միջոցով, հստակորեն չեն աջակցվում: Այնուամենայնիվ, Bootstrap-ը (շատ դեպքերում) պետք է ցուցադրի և ճիշտ գործի նաև այս բրաուզերներում: Աջակցության ավելի կոնկրետ տեղեկատվությունը տրված է ստորև:
Դուք կարող եք գտնել մեր աջակցվող բրաուզերների տեսականին և դրանց տարբերակները մեր.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
Մենք օգտագործում ենք Autoprefixer- ը CSS նախածանցների միջոցով բրաուզերի նախատեսված աջակցությունը մշակելու համար, որն օգտագործում է Բրաուզերների ցուցակը՝ դիտարկիչի այս տարբերակները կառավարելու համար: Խորհրդակցեք նրանց փաստաթղթերին, թե ինչպես կարելի է ինտեգրել այս գործիքները ձեր նախագծերում:
Շարժական սարքեր
Ընդհանուր առմամբ, Bootstrap-ն աջակցում է յուրաքանչյուր հիմնական հարթակի լռելյայն բրաուզերների վերջին տարբերակները: Նկատի ունեցեք, որ պրոքսի բրաուզերները (օրինակ՝ Opera Mini, Opera Mobile's Turbo ռեժիմ, UC Browser Mini, Amazon Silk) չեն աջակցվում:
| Chrome | Firefox | Սաֆարի | Android զննարկիչ և վեբ դիտում | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Աջակցված է | Աջակցված է | N/A | Աջակցվում է Android v5.0+ | Աջակցված է |
| iOS | Աջակցված է | Աջակցված է | Աջակցված է | N/A | Աջակցված է |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Աջակցված է |
Սեղանի բրաուզերներ
Նմանապես, աշխատասեղանի բրաուզերների մեծ մասի վերջին տարբերակներն ապահովված են:
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Օպերա | Սաֆարի | |
|---|---|---|---|---|---|---|
| Mac | Աջակցված է | Աջակցված է | N/A | Աջակցված է | Աջակցված է | Աջակցված է |
| Windows | Աջակցված է | Աջակցված է | Աջակցվում է, IE10+ | Աջակցված է | Աջակցված է | Չի ապահովվում |
Firefox-ի համար, ի լրումն վերջին նորմալ կայուն թողարկման, մենք նաև աջակցում ենք Firefox-ի վերջին Extended Support Release (ESR) տարբերակը:
Ոչ պաշտոնապես, Bootstrap-ը պետք է բավական լավ տեսք ունենա և իրեն պահի Chromium-ում և Chrome-ում Linux-ի համար, Firefox-ի համար Linux-ի և Internet Explorer 9-ի համար, թեև դրանք պաշտոնապես չեն աջակցվում:
Բրաուզերի որոշ վրիպակների ցանկի համար, որոնց հետ Bootstrap-ը պետք է բախվի, տես մեր բրաուզերի վրիպակների պատը :
Internet Explorer
Աջակցվում է Internet Explorer 10+; IE9 և ներքև չէ: Խնդրում ենք տեղյակ լինել, որ որոշ CSS3 հատկություններ և HTML5 տարրեր լիովին չեն աջակցվում IE10-ում կամ պահանջում են նախածանցային հատկություններ՝ լիարժեք գործունակության համար: CSS3 և HTML5 գործառույթների բրաուզերի աջակցության վերաբերյալ մանրամասների համար այցելեք Կարող եմ օգտագործել… : Եթե Ձեզ անհրաժեշտ է IE8-9 աջակցություն, օգտագործեք Bootstrap 3:
Մոդալներ և բացվող ներդիրներ բջջայինի վրա
Հորդառատ և ոլորում
Տարրերի աջակցությունը բավականին սահմանափակ է iOS-ում և Android-ում overflow: hidden;: <body>Այդ նպատակով, երբ դուք ոլորեք մոդալի վերևի կամ ներքևի կողքով այդ սարքերից որևէ մեկի բրաուզերում, <body>բովանդակությունը կսկսի ոլորվել: Տե՛ս Chrome-ի թիվ 175502 սխալը (շտկվել է Chrome v40-ում) և WebKit սխալը՝ #153852 :
iOS տեքստային դաշտեր և ոլորում
iOS 9.2-ի դրությամբ, երբ մոդալը բաց է, եթե պտտվող ժեստի սկզբնական հպումը գտնվում է տեքստի <input>կամ a- ի սահմաններում <textarea>, մոդալի <body>տակի բովանդակությունը կշարժվի բուն մոդալի փոխարեն: Տես WebKit սխալ #153856 :
Navbar dropdowns
Տարրը .dropdown-backdropչի օգտագործվում iOS-ում նավի մեջ՝ z-ինդեքսավորման բարդության պատճառով: Այսպիսով, navbars-ում բացվող ցանկերը փակելու համար դուք պետք է ուղղակիորեն սեղմեք բացվող տարրը (կամ որևէ այլ տարր, որը կգործարկի սեղմման իրադարձություն iOS-ում ):
Բրաուզերի խոշորացում
Էջի խոշորացումն անխուսափելիորեն ներկայացնում է որոշ բաղադրիչների արտեֆակտներ, ինչպես Bootstrap-ում, այնպես էլ համացանցի մնացած մասում: Կախված խնդրից, մենք կարող ենք շտկել այն (նախ որոնեք, իսկ անհրաժեշտության դեպքում բացեք խնդիրը): Այնուամենայնիվ, մենք հակված ենք անտեսել դրանք, քանի որ դրանք հաճախ այլ ուղղակի լուծում չունեն, քան հաքերային լուծումները:
Կպչուն :hover/ :focusiOS-ում
Թեև :hoverդա հնարավոր չէ հպման սարքերի մեծ մասում, iOS-ն ընդօրինակում է այս վարքագիծը, ինչը հանգեցնում է սավառնող «կպչուն» ոճերի, որոնք պահպանվում են մեկ տարրը սեղմելուց հետո: Այս սավառնող ոճերը հեռացվում են միայն այն դեպքում, երբ օգտվողները հպում են մեկ այլ տարրի: Այս պահվածքը հիմնականում անցանկալի է համարվում և կարծես թե խնդիր չէ Android կամ Windows սարքերում:
Մեր v4 ալֆա և բետա թողարկումների ընթացքում մենք ներառել ենք թերի և մեկնաբանված ծածկագիր՝ մեդիա հարցումների շեմին ընտրելու համար, որը անջատելու է սավառնող ոճերը հպման սարքերի բրաուզերներում, որոնք նմանակում են սավառնումը: Այս աշխատանքը երբեք ամբողջությամբ չի ավարտվել կամ միացվել, բայց ամբողջական կոտրումից խուսափելու համար մենք որոշել ենք հնացել այս շեմը և պահել միքսները որպես կեղծ դասերի դյուրանցումներ:
Տպագրություն
Նույնիսկ որոշ ժամանակակից բրաուզերներում տպագրությունը կարող է տարօրինակ լինել:
Safari v8.0-ի դրությամբ, ֆիքսված լայնության .containerդասի օգտագործումը կարող է պատճառ դառնալ, որ Safari-ն տպելիս օգտագործի անսովոր փոքր տառաչափ: Լրացուցիչ մանրամասների համար տես թողարկում #14868 և WebKit սխալ #138192 : Հնարավոր լուծումներից մեկը հետևյալ CSS-ն է.
@media print {
.container {
width: auto;
}
}
Android ֆոնդային բրաուզեր
Android 4.1-ը (և նույնիսկ որոշ նոր թողարկումներ, ըստ երևույթին) առաքվում է Browser հավելվածով որպես ընտրված լռելյայն վեբ դիտարկիչ (ի տարբերություն Chrome-ի): Ցավոք, Browser հավելվածն ունի բազմաթիվ սխալներ և անհամապատասխանություններ ընդհանուր առմամբ CSS-ի հետ:
Ընտրեք ընտրացանկը
Տարրերի վրա <select>Android ֆոնդային զննարկիչը չի ցուցադրի կողային հսկիչները, եթե կա border-radiusև/կամ borderկիրառվում է: (Մանրամասների համար տե՛ս StackOverflow-ի այս հարցը :) Օգտագործեք ստորև բերված կոդի հատվածը՝ վիրավորական CSS-ը հեռացնելու և <select>Android ֆոնդային բրաուզերի վրա որպես չոճավորված տարր վերածելու համար: Օգտվողի գործակալի հոտը խուսափում է Chrome, Safari և 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>
Ցանկանու՞մ եք օրինակ տեսնել: Ստուգեք այս JS Bin ցուցադրությունը :
Վավերացնողներ
Հին և խելագարված բրաուզերներին լավագույն հնարավոր փորձը ապահովելու համար Bootstrap-ը մի քանի վայրերում օգտագործում է CSS բրաուզերի հաքեր ՝ հատուկ CSS-ին թիրախավորելու բրաուզերի որոշակի տարբերակների համար, որպեսզի շտկվի բրաուզերների սխալները: Այս հաքերները հասկանալի է, որ CSS վավերացնողները բողոքում են, որ դրանք անվավեր են: Մի քանի վայրերում մենք նաև օգտագործում ենք արյունահոսող CSS գործառույթներ, որոնք դեռ լիովին ստանդարտացված չեն, բայց դրանք օգտագործվում են զուտ առաջադեմ բարելավման համար:
Այս վավերացման նախազգուշացումները գործնականում նշանակություն չունեն, քանի որ մեր CSS-ի ոչ հաքերային հատվածը լիովին վավերացվում է, և հաքի հատվածները չեն խանգարում ոչ հաքերային հատվածի պատշաճ աշխատանքին, հետևաբար ինչու ենք մենք միտումնավոր անտեսում այս հատուկ նախազգուշացումները:
Մեր HTML փաստաթղթերը նույնպես ունեն որոշ չնչին և անհետևանք HTML-ի վավերացման նախազգուշացումներ՝ կապված Firefox-ի որոշակի վրիպակի լուծումների ընդգրկման հետ :