Хөтөч ба төхөөрөмжүүд
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
Бид эдгээр хөтчийн хувилбаруудыг удирдахын тулд 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
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 текст талбарууд болон гүйлгэх
IOS 9.2-ын байдлаар, модаль нээлттэй байх үед гүйлгэх дохионы эхний мэдрэгч нь текст <input>эсвэл a гэсэн зааврын хүрээнд байвал модаль өөрөө биш, доор <textarea>байгаа <body>контентыг гүйлгэх болно. WebKit алдаа №153856- г үзнэ үү .
Navbar унадаг цэс
.dropdown-backdropZ-индексжүүлэлтийн нарийн төвөгтэй байдлаас шалтгаалан энэ элементийг iOS дээр nav-д ашигладаггүй . Тиймээс, навигацийн цонхон дээрх унждаг цэсийг хаахын тулд та унадаг элемент дээр (эсвэл 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-ээс эсрэгээр) нийлүүлдэг. Харамсалтай нь Хөтөч програм нь ерөнхийдөө 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 баталгаажуулалтын зарим нэг өчүүхэн бөгөөд ач холбогдолгүй анхааруулгатай байдаг .