Хөтөч ба төхөөрөмжүүд
Bootstrap-ийн дэмждэг орчин үеийнхээс хуучин хүртэлх хөтчүүд болон төхөөрөмжүүдийн талаар мэдэж аваарай.
Bootstrap нь бүх гол хөтөч болон платформуудын хамгийн сүүлийн үеийн тогтвортой хувилбаруудыг дэмждэг. Windows дээр бид Internet Explorer 10-11 / Microsoft Edge програмыг дэмждэг .
WebKit, Blink, Gecko-ийн хамгийн сүүлийн хувилбарыг шууд эсвэл платформын вэб үзэх API-ээр дамжуулан ашигладаг өөр хөтчүүдийг шууд дэмждэггүй. Гэсэн хэдий ч Bootstrap нь (ихэнх тохиолдолд) эдгээр хөтчүүдэд зөв харуулж, ажиллах ёстой. Илүү тодорхой тусламжийн мэдээллийг доор өгөв.
Та манай дэмждэг хөтчүүд болон тэдгээрийн хувилбаруудыг дараах хэсгээс олж болноpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Бид эдгээр хөтчийн хувилбаруудыг удирдахын тулд Browserlist -ийг ашигладаг CSS угтвараар дамжуулан хөтчийн дэмжлэгийг зохицуулахын тулд Autoprefixer ашигладаг. Эдгээр хэрэгслүүдийг төсөлдөө хэрхэн нэгтгэх талаар тэдний баримт бичгүүдээс лавлана уу.
Ерөнхийдөө Bootstrap нь үндсэн платформ бүрийн үндсэн хөтчийн хамгийн сүүлийн хувилбарыг дэмждэг. Прокси хөтчүүдийг (Opera Mini, Opera Mobile-ийн Turbo горим, UC Browser Mini, Amazon Silk гэх мэт) дэмждэггүйг анхаарна уу.
| Chrome | Firefox | Сафари | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Дэмжигдсэн | Дэмжигдсэн | Үгүй | Android v5.0+ дэмждэг | Дэмжигдсэн |
| iOS | Дэмжигдсэн | Дэмжигдсэн | Дэмжигдсэн | Үгүй | Дэмжигдсэн |
| Windows 10 Mobile | Үгүй | Үгүй | Үгүй | Үгүй | Дэмжигдсэн |
Үүний нэгэн адил ихэнх ширээний хөтчүүдийн хамгийн сүүлийн хувилбарууд дэмжигддэг.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Дуурь | Сафари | |
|---|---|---|---|---|---|---|
| Mac | Дэмжигдсэн | Дэмжигдсэн | Үгүй | Үгүй | Дэмжигдсэн | Дэмжигдсэн |
| Windows | Дэмжигдсэн | Дэмжигдсэн | Дэмжигдсэн, IE10+ | Дэмжигдсэн | Дэмжигдсэн | Дэмжихгүй байна |
Firefox-ийн хувьд бид хамгийн сүүлийн үеийн ердийн тогтвортой хувилбараас гадна Firefox-ын хамгийн сүүлийн үеийн Өргөтгөсөн дэмжлэгийн хувилбарыг (ESR) дэмждэг .
Албан бусаар Bootstrap нь албан ёсоор дэмжигдээгүй ч Linux-д зориулсан Chromium болон Chrome, Linux-д зориулсан Firefox, Internet Explorer 9-д хангалттай сайн харагдах ёстой.
Bootstrap-д тулгардаг хөтчийн зарим алдаануудын жагсаалтыг манай хөтчийн алдааны Wall -аас үзнэ үү .
Internet Explorer 10+ дэмждэг; IE9 ба түүнээс доош нь тийм биш. Зарим CSS3 шинж чанарууд болон HTML5 элементүүд нь IE10-д бүрэн дэмжигдээгүй эсвэл бүрэн ажиллагаатай байхын тулд угтвар шинж чанаруудыг шаарддаг гэдгийг анхаарна уу. CSS3 болон HTML5 функцуудын хөтчийн дэмжлэгийн талаарх дэлгэрэнгүй мэдээллийг Би ашиглаж болох уу… хэсгээс авна уу .
Хэрэв танд IE8-9-ийн дэмжлэг шаардлагатай бол Bootstrap 3-ыг ашиглана уу. Энэ нь манай кодын хамгийн тогтвортой хувилбар бөгөөд чухал алдаа засах болон баримт бичгийн өөрчлөлтийг манай баг дэмжсэн хэвээр байна. Гэсэн хэдий ч түүнд шинэ функц нэмэгдэхгүй.
overflow: hidden;Элемент дээрх дэмжлэг <body>iOS болон Android дээр нэлээд хязгаарлагдмал байдаг. Үүний тулд та эдгээр төхөөрөмжүүдийн аль нэг хөтчийг горимын дээд эсвэл доод талаас гүйлгэн гүйлгэх үед <body>контент гүйлгэж эхэлнэ. Chrome-ын алдаа # 175502 (Chrome v40 дээр зассан) болон WebKit-ийн алдаа # 153852- ыг харна уу .
IOS 9.2-ын байдлаар, модаль нээлттэй байх үед гүйлгэх дохионы эхний мэдрэгч нь текст <input>эсвэл a гэсэн зааврын хүрээнд байвал модаль өөрөө биш, доор <textarea>байгаа <body>контентыг гүйлгэх болно. WebKit-ийн алдаа # 153856- г үзнэ үү .
.dropdown-backdropz-индексжүүлэлтийн нарийн төвөгтэй байдлаас шалтгаалан энэ элементийг iOS дээр nav-д ашигладаггүй . Тиймээс, навигацын цэсийг хаахын тулд та унадаг элемент дээр (эсвэл iOS дээр товшилтыг идэвхжүүлдэг бусад элемент ) шууд дарах ёстой.
Хуудсыг томруулах нь Bootstrap болон бусад вэбийн аль алинд нь зарим бүрэлдэхүүн хэсгүүдэд олдворуудыг үзүүлэх нь гарцаагүй. Асуудлаас хамааран бид үүнийг засах боломжтой (эхлээд хайгаад дараа нь шаардлагатай бол асуудлыг нээнэ үү). Гэсэн хэдий ч, бид тэдгээрийг үл тоомсорлох хандлагатай байдаг, учир нь тэдгээрт алдаатай тойрон гарахаас өөр шууд шийдэл байдаггүй.
Ихэнх :hoverмэдрэгчтэй төхөөрөмжүүдэд боломжгүй ч iOS нь энэ үйлдлийг дуурайдаг тул нэг элементийг товшсоны дараа "наалдамхай" хулганын хэв маяг хэвээр үлддэг. Эдгээр хулганын хэв маягийг хэрэглэгчид өөр элементийг товшсон үед л арилгадаг. Энэ зан үйл нь ихэвчлэн хүсээгүй гэж үздэг бөгөөд Android эсвэл Windows төхөөрөмж дээр асуудал биш юм шиг санагддаг.
Манай v4 альфа болон бета хувилбаруудын туршид бид зөөвөрлөхийг дуурайдаг мэдрэгчтэй төхөөрөмжийн хөтчүүдэд хулганын хэв маягийг идэвхгүй болгох медиа асуулгын жийргэвчийг сонгоход зориулсан бүрэн бус, тайлбартай кодыг оруулсан. Энэ ажил хэзээ ч бүрэн гүйцэд дуусаагүй эсвэл идэвхжсэнгүй, гэхдээ бүрэн эвдрэхээс зайлсхийхийн тулд бид энэ жийргэвчийг цуцалж, холигчуудыг псевдо ангиудын товчлол болгон хадгалахаар сонгосон.
Орчин үеийн зарим хөтөч дээр ч гэсэн хэвлэх нь хачирхалтай байж болно.
Safari v8.0 хувилбарын хувьд тогтмол өргөнтэй .containerанги ашиглах нь Safari хэвлэхдээ ер бусын жижиг үсгийн хэмжээг ашиглахад хүргэдэг. Дэлгэрэнгүй мэдээллийг №14868 дугаар болон WebKit алдаа #138192-оос үзнэ үү. Боломжит нэг тойрч гарах арга бол дараах CSS юм:
@media print {
.container {
width: auto;
}
}Хайрцагнаас Android 4.1 (мөн зарим шинэ хувилбарууд нь) нь Browser програмыг үндсэн вэб хөтчөөр (Chrome-ээс эсрэгээр) нийлүүлдэг. Харамсалтай нь Хөтөч програм нь ерөнхийдөө CSS-тэй нийцэхгүй, олон алдаатай байдаг.
Элементүүд дээр болон/эсвэл хэрэгжсэн тохиолдолд <select>Android хувьцааны хөтөч хажуугийн удирдлагыг харуулахгүй . (Дэлгэрэнгүйг StackOverflow асуултаас үзнэ үү.) Доорх кодын хэсгийг ашиглан зөрчиж буй CSS-г устгаж, Android хувьцааны хөтөч дээр хэв маяггүй элемент болгон үзүүлээрэй. Хэрэглэгчийн агент нь Chrome, Safari, Mozilla хөтчүүдэд хөндлөнгөөс оролцохоос зайлсхийдэг.border-radiusborder<select>
<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 баримтууд нь мөн адил Firefox-ын тодорхой алдааг арилгах арга замыг оруулсантай холбоотой HTML баталгаажуулалтын зарим нэг өчүүхэн бөгөөд ач холбогдолгүй анхааруулгатай байдаг .