Ishni boshlash
Bootstrap haqida umumiy ma'lumot, qanday yuklab olish va foydalanish, asosiy andozalar va misollar va boshqalar.
Bootstrap haqida umumiy ma'lumot, qanday yuklab olish va foydalanish, asosiy andozalar va misollar va boshqalar.
Bootstrap (hozirda v3.3.7) tezda ishga tushirishning bir necha oson usullariga ega, ularning har biri boshqa mahorat darajasi va foydalanish holatlariga mos keladi. Muayyan ehtiyojlaringizga nima mos kelishini bilish uchun o'qing.
Kompilyatsiya qilingan va kichiklashtirilgan CSS, JavaScript va shriftlar. Hech qanday hujjatlar yoki asl manba fayllar kiritilmagan.
Source Less, JavaScript va shrift fayllari, bizning hujjatlarimiz bilan birga. Kamroq kompilyator va biroz sozlashni talab qiladi.
Bootstrap Rails, Compass yoki Sass-faqat loyihalarga oson qo'shilishi uchun Less-dan Sass -ga o'tkazildi.
jsDelivr -dagi odamlar Bootstrap-ning CSS va JavaScript-lari uchun CDN-ni qo'llab-quvvatlaydilar. Shunchaki ushbu Bootstrap CDN havolalaridan foydalaning.
Shuningdek, Bower yordamida Bootstrap-ning Less, CSS, JavaScript va shriftlarini o'rnatishingiz va boshqarishingiz mumkin :
Bundan tashqari, npm yordamida Bootstrap-ni o'rnatishingiz mumkin :
require('bootstrap')
jQuery ob'ektiga barcha Bootstrap jQuery plaginlarini yuklaydi. Modulning bootstrap
o'zi hech narsani eksport qilmaydi. /js/*.js
Paketning yuqori darajadagi katalogi ostidagi fayllarni yuklash orqali Bootstrap jQuery plaginlarini alohida-alohida qo'lda yuklashingiz mumkin .
Bootstrap- package.json
da quyidagi kalitlar ostida qo'shimcha metadata mavjud:
less
- Bootstrap-ning asosiy Less manba fayliga yo'lstyle
- standart sozlamalar yordamida oldindan tuzilgan Bootstrap-ning kichiklashtirilmagan CSS-ga yo'l (sozlash yo'q)Bundan tashqari, Composer yordamida Bootstrap-ning Less, CSS, JavaScript va shriftlarini o'rnatishingiz va boshqarishingiz mumkin :
Bootstrap CSS sotuvchisi prefikslari bilan ishlash uchun Autoprefixer'dan foydalanadi . Agar siz Bootstrap-ni Less/Sass manbasidan kompilyatsiya qilsangiz va bizning Gruntfile-dan foydalanmasangiz, Autoprefixer-ni o'zingiz qurish jarayoniga integratsiyalashingiz kerak bo'ladi. Agar siz oldindan kompilyatsiya qilingan Bootstrap-dan foydalanayotgan bo'lsangiz yoki Gruntfile-dan foydalansangiz, bu haqda tashvishlanishingizga hojat yo'q, chunki Autoprefixer allaqachon bizning Gruntfaylimizga integratsiyalangan.
Bootstrap ikki shaklda yuklab olinadi, ular ichida siz quyidagi katalog va fayllarni topasiz, umumiy resurslarni mantiqiy ravishda guruhlash va kompilyatsiya qilingan va kichiklashtirilgan variatsiyalarni taqdim etishingiz mumkin.
E'tibor bering, barcha JavaScript plaginlari boshlang'ich shablonda ko'rsatilganidek, jQuery-ni qo'shishni talab qiladi . jQuery-ning qaysi versiyalari qo'llab-quvvatlanishini ko'rish uchun biz bilan maslahatlashing .bower.json
Yuklab olingandan so'ng, (kompilyatsiya qilingan) Bootstrap tuzilishini ko'rish uchun siqilgan jildni oching. Siz shunga o'xshash narsani ko'rasiz:
Bu Bootstrap ning eng asosiy shakli: deyarli har qanday veb-loyihada tez kirish uchun oldindan kompilyatsiya qilingan fayllar. Biz kompilyatsiya qilingan CSS va JS ( bootstrap.*
), shuningdek kompilyatsiya qilingan va kichiklashtirilgan CSS va JS ( bootstrap.min.*
) ni taqdim etamiz. CSS manba xaritalari ( bootstrap.*.map
) muayyan brauzerlarning ishlab chiquvchi vositalari bilan foydalanish uchun mavjud. Ixtiyoriy Bootstrap mavzusi kabi Glyphicons shriftlari kiritilgan.
Bootstrap manba kodini yuklab olish oldindan kompilyatsiya qilingan CSS, JavaScript va shrift aktivlarini, shuningdek Less manbasi, JavaScript va hujjatlarni o'z ichiga oladi. Aniqroq aytganda, u quyidagilarni va boshqalarni o'z ichiga oladi:
, less/
, js/
va fonts/
bizning CSS, JS va ikonka shriftlari (mos ravishda) uchun manba kodidir. Jild dist/
yuqoridagi oldindan kompilyatsiya qilingan yuklab olish bo'limida sanab o'tilgan barcha narsalarni o'z ichiga oladi. Jildda docs/
bizning hujjatlarimiz va examples/
Bootstrap-dan foydalanish uchun manba kodlari mavjud. Bundan tashqari, boshqa har qanday fayl paketlar, litsenziya ma'lumotlari va ishlab chiqish uchun yordam beradi.
Bootstrap o'zining qurish tizimi uchun Grunt -dan foydalanadi , ramka bilan ishlashning qulay usullari. Biz kodimizni shunday tuzamiz, testlarni o'tkazamiz va hokazo.
Grunt-ni o'rnatish uchun avval node.js-ni yuklab olishingiz va o'rnatishingiz kerak (bu npm-ni o'z ichiga oladi). npm tugunli paketlangan modullarni anglatadi va node.js orqali rivojlanishga bog'liqlikni boshqarish usulidir.
Keyin buyruq satridan:grunt-cli
bilan global o'rnating npm install -g grunt-cli
./bootstrap/
katalogiga o'ting, so'ngra ishga tushiring npm install
. npm package.json
faylni ko'rib chiqadi va u erda sanab o'tilgan kerakli mahalliy bog'liqliklarni avtomatik ravishda o'rnatadi.Tugallangach, siz buyruq satridan taqdim etilgan turli Grunt buyruqlarini ishga tushirishingiz mumkin bo'ladi.
grunt dist
(Faqat CSS va JavaScript-ni kompilyatsiya qiling)/dist/
Kompilyatsiya qilingan va kichiklashtirilgan CSS va JavaScript fayllari bilan katalogni qayta tiklaydi. Bootstrap foydalanuvchisi sifatida bu odatda siz xohlagan buyruqdir.
grunt watch
(Tomosha qilish)Less manba fayllarini ko'radi va har safar o'zgartirishni saqlaganingizda ularni avtomatik ravishda CSS-ga qayta kompilyatsiya qiladi.
grunt test
(Testlarni bajarish)JSHint -ni ishga tushiradi va QUnit testlarini PhantomJS -da boshsiz ishlaydi .
grunt docs
(Hujjatlar aktivlarini yarating va sinab ko'ring)Hujjatlarni mahalliy sifatida ishga tushirishda foydalaniladigan CSS, JavaScript va boshqa aktivlarni yaratadi va sinovdan o'tkazadi bundle exec jekyll serve
.
grunt
(Mutlaqo hamma narsani yarating va testlarni o'tkazing)CSS va JavaScript-ni kompilyatsiya qiladi va kichraytiradi, hujjatlar veb-saytini yaratadi, hujjatlarga qarshi HTML5 validatorini ishga tushiradi, Customizer aktivlarini qayta tiklaydi va boshqalar. Jekyll talab qiladi . Odatda, agar siz Bootstrap-ning o'zida buzib kirsangiz kerak bo'ladi.
Agar bog'liqliklarni o'rnatish yoki Grunt buyruqlarini ishga tushirish bilan bog'liq muammolarga duch kelsangiz, avval /node_modules/
npm tomonidan yaratilgan katalogni o'chiring. Keyin, qayta ishga tushiring npm install
.
Ushbu asosiy HTML shablonidan boshlang yoki ushbu misollarni o'zgartiring . Umid qilamizki, siz shablonlarimiz va misollarimizni o'z ehtiyojlaringizga moslashtirib sozlaysiz.
Minimal Bootstrap hujjati bilan ishlashni boshlash uchun quyidagi HTML-dan nusxa oling.
Bootstrap-ning ko'plab komponentlari bilan yuqoridagi asosiy shablonni yarating. Biz sizni shaxsiy loyiha ehtiyojlaringizga moslashtirish uchun Bootstrap-ni sozlash va moslashtirishni tavsiya qilamiz.
Bootstrap omborini yuklab olish orqali quyidagi har bir misol uchun manba kodini oling . docs/examples/
Misollarni katalogda topish mumkin .
Asosiylaridan boshqa hech narsa: konteyner bilan birga kompilyatsiya qilingan CSS va JavaScript.
Asoslangan havolalar bilan maxsus navbar yarating. Oldindan qisqa ma'lumot berish! Safari uchun unchalik qulay emas.
Hujjatlarimiz bo'yicha Bootstrap-ning javob berish qobiliyatini osongina o'chirib qo'ying .
Bootlint rasmiy Bootstrap HTML linter vositasidir. U Bootstrap-dan juda "vanil" usulda foydalanadigan veb-sahifalardagi bir nechta keng tarqalgan HTML xatolarini avtomatik ravishda tekshiradi. Vanilla Bootstrap komponentlari/vidjetlari DOM qismlarining ma'lum tuzilmalarga mos kelishini talab qiladi. Bootlint Bootstrap komponentlari misollarida to'g'ri tuzilgan HTML mavjudligini tekshiradi. Umumiy xatolarning hech biri loyihangiz rivojlanishini sekinlashtirmasligi uchun Bootstrap veb-ishlab chiqish asboblar zanjiriga Bootlint qo'shing.
Bootstrap-ning rivojlanishidan xabardor bo'ling va ushbu foydali resurslar bilan hamjamiyat bilan bog'laning.
irc.freenode.net
Serverda, ##bootstrap kanalida IRC yordamida boshqa yuklovchilar bilan suhbatlashing .twitter-bootstrap-3
-dan so'rang .bootstrap
Bootstrap funksiyasini o'zgartiradigan yoki qo'shadigan paketlarda kalit so'zdan foydalanishlari kerak .Shuningdek , eng soʻnggi gʻiybat va ajoyib musiqiy videolar uchun Twitter’da @getbootstrap-ni kuzatib borishingiz mumkin .
Bootstrap avtomatik ravishda sahifalaringizni turli ekran o'lchamlariga moslashtiradi. Sizning sahifangiz javob bermaydigan misol kabi ishlashi uchun bu xususiyatni qanday o'chirish mumkin .
<meta>
ko'rsatilgan ko'rish oynasini o'tkazib yuboringwidth
Bitta kenglikdagi har bir grid sathi uchun ni bekor qiling .container
, masalan width: 970px !important;
, bu standart Bootstrap CSS-dan keyin kelishiga ishonch hosil qiling. Siz ixtiyoriy ravishda !important
media so'rovlaridan yoki ba'zi selektor-fulardan qochishingiz mumkin..col-xs-*
uchun o'rta/katta sinflarga qo'shimcha yoki ularning o'rnida sinflardan foydalaning. Xavotir olmang, juda kichik qurilmalar tarmog'i barcha o'lchamlarga mos keladi.IE8 uchun Respond.js kerak boʻladi (chunki bizning media soʻrovlarimiz hali ham mavjud va qayta ishlanishi kerak). Bu Bootstrap-ning "mobil sayt" jihatlarini o'chirib qo'yadi.
Biz ushbu qadamlarni misol uchun qo'lladik. Amalga oshirilgan maxsus o'zgarishlarni ko'rish uchun uning manba kodini o'qing.
Bootstrap-ning eski versiyasidan v3.x-ga o'tmoqchimisiz? Migratsiya qoʻllanmamiz bilan tanishing .
Bootstrap eng so'nggi ish stoli va mobil brauzerlarda eng yaxshi ishlashi uchun yaratilgan, ya'ni eski brauzerlar ba'zi komponentlarning to'liq funktsional bo'lsa-da, turli uslubda ko'rsatilishi mumkin.
Xususan, biz quyidagi brauzerlar va platformalarning so‘nggi versiyalarini qo‘llab-quvvatlaymiz.
To‘g‘ridan-to‘g‘ri yoki platformaning veb-ko‘rish API’si orqali WebKit, Blink yoki Gecko’ning so‘nggi versiyasidan foydalanadigan muqobil brauzerlar aniq qo‘llab-quvvatlanmaydi. Biroq, Bootstrap (ko'p hollarda) ushbu brauzerlarda ham to'g'ri ko'rsatilishi va ishlashi kerak. Qo'llab-quvvatlash haqida batafsil ma'lumot quyida keltirilgan.
Umuman olganda, Bootstrap har bir asosiy platformaning standart brauzerlarining so'nggi versiyalarini qo'llab-quvvatlaydi. Esda tutingki, proksi-brauzerlar (masalan, Opera Mini, Opera Mobile-ning Turbo rejimi, UC Browser Mini, Amazon Silk) qo'llab-quvvatlanmaydi.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Yoʻq |
iOS | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi |
Xuddi shunday, ko'pgina ish stoli brauzerlarining so'nggi versiyalari qo'llab-quvvatlanadi.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Yoʻq | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi |
Windows | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanmaydi |
Windows tizimida biz Internet Explorer 8-11 ni qo'llab-quvvatlaymiz .
Firefox uchun, eng so'nggi oddiy barqaror versiyaga qo'shimcha ravishda, biz Firefox-ning so'nggi Kengaytirilgan Yordam Relizi (ESR) versiyasini ham qo'llab-quvvatlaymiz.
Norasmiy ravishda Bootstrap Linux uchun Chromium va Chrome, Linux uchun Firefox va Internet Explorer 7, shuningdek, Microsoft Edge-da etarlicha yaxshi ko'rinishi va o'zini tutishi kerak, ammo ular rasman qo'llab-quvvatlanmaydi.
Bootstrap bilan kurashishi kerak bo'lgan ba'zi brauzer xatolarining ro'yxatini Brauzer xatoliklari devoriga qarang .
Internet Explorer 8 va 9 ham qo'llab-quvvatlanadi, ammo shuni yodda tutingki, ba'zi CSS3 xususiyatlari va HTML5 elementlari ushbu brauzerlar tomonidan to'liq qo'llab-quvvatlanmaydi. Bundan tashqari, Internet Explorer 8 media so'rovlarini qo'llab-quvvatlashni yoqish uchun Respond.js dan foydalanishni talab qiladi .
Xususiyat | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Qo'llab-quvvatlanmaydi | Qo'llab-quvvatlanadi |
box-shadow |
Qo'llab-quvvatlanmaydi | Qo'llab-quvvatlanadi |
transform |
Qo'llab-quvvatlanmaydi | Qo'llab-quvvatlanadi, -ms prefiks bilan |
transition |
Qo'llab-quvvatlanmaydi | |
placeholder |
Qo'llab-quvvatlanmaydi |
CSS3 va HTML5 funksiyalarini brauzerni qo‘llab-quvvatlash bo‘yicha batafsil ma’lumot olish uchun “Ishlab olamanmi... ” sahifasiga tashrif buyuring .
Internet Explorer 8 uchun ishlab chiqish va ishlab chiqarish muhitida Respond.js dan foydalanishda quyidagi ogohlantirishlardan ehtiyot bo'ling.
Respond.js-dan boshqa (sub) domenda (masalan, CDN-da) joylashtirilgan CSS-dan foydalanish qo'shimcha sozlashlarni talab qiladi. Tafsilotlar uchun Respond.js hujjatlariga qarang.
file://
Brauzer xavfsizligi qoidalari tufayli Respond.js protokol orqali ko'rilgan sahifalar bilan ishlamaydi file://
(masalan, mahalliy HTML faylni ochishda). IE8-da sezgir xususiyatlarni sinab ko'rish uchun sahifalaringizni HTTP(S) orqali ko'ring. Tafsilotlar uchun Respond.js hujjatlariga qarang.
@import
Respond.js orqali havola qilingan CSS bilan ishlamaydi @import
. Xususan, ba'zi Drupal konfiguratsiyalaridan foydalanish ma'lum @import
. Tafsilotlar uchun Respond.js hujjatlariga qarang.
, , yoki box-sizing: border-box;
bilan birlashganda IE8 to'liq qo'llab-quvvatlamaydi . Shu sababli, v3.0.1 dan boshlab biz s - dan foydalanmaymiz .min-width
max-width
min-height
max-height
max-width
.container
@font-face
IE8 bilan birlashtirilganda ba'zi muammolar mavjud :before
. Bootstrap bu kombinatsiyani o'zining Glifikonlari bilan ishlatadi. Agar sahifa keshlangan bo'lsa va sichqonchani deraza ustiga o'rnatmasdan yuklangan bo'lsa (ya'ni, yangilash tugmasini bosing yoki iframe-ga biror narsani yuklang), u holda sahifa shrift yuklanishidan oldin ko'rsatiladi. Sahifa (tana) ustiga sichqonchani olib borish ba'zi piktogrammalarni ko'rsatadi va qolgan piktogramma ustiga olib borish ularni ham ko'rsatadi. Tafsilotlar uchun №13863-songa qarang .
Bootstrap eski Internet Explorer moslik rejimlarida qo'llab-quvvatlanmaydi. IE uchun eng soʻnggi renderlash rejimidan foydalanayotganingizga ishonch hosil qilish <meta>
uchun sahifalaringizga tegishli tegni qoʻshishni oʻylab koʻring:
Nosozliklarni tuzatish vositalarini ochib, hujjat rejimini tasdiqlang: bosing F12va "Hujjat rejimi" ni tekshiring.
Ushbu teg barcha Bootstrap hujjatlariga va Internet Explorer-ning har bir qo'llab-quvvatlanadigan versiyasida eng yaxshi renderlashni ta'minlash uchun misollarga kiritilgan.
Qo'shimcha ma'lumot olish uchun ushbu StackOverflow savoliga qarang .
Internet Explorer 10 qurilma kengligini ko'rish maydoni kengligidan farqlamaydi va shuning uchun Bootstrap CSS-dagi media so'rovlarini to'g'ri qo'llamaydi. Odatda buni tuzatish uchun CSS-ning tezkor parchasini qo'shsangiz bo'ladi:
Biroq, bu yangilanish 3 dan (aka GDR3) eski Windows Phone 8 versiyalari bilan ishlaydigan qurilmalar uchun ishlamaydi , chunki bunday qurilmalar tor "telefon" ko'rinishi o'rniga asosan ish stoli ko'rinishini ko'rsatishiga olib keladi. Buni hal qilish uchun xatoni hal qilish uchun quyidagi CSS va JavaScript-ni qo'shishingiz kerak bo'ladi .
Qo'shimcha ma'lumot va foydalanish bo'yicha ko'rsatmalar uchun Windows Phone 8 va Device-Width- ni o'qing.
Ehtiyotkorlik sifatida biz buni barcha Bootstrap hujjatlari va misollariga namoyish sifatida kiritamiz.
OS X uchun Safari v7.1 va iOS v8.0 uchun Safari versiyalarining renderlash mexanizmi bizning .col-*-1
panjara sinflarimizda ishlatiladigan o'nli kasrlar soni bilan bog'liq muammolarga duch keldi. Shunday qilib, agar sizda 12 ta alohida panjara ustunlari bo'lsa, ular boshqa ustunlar qatorlariga qaraganda qisqa ekanligini sezasiz. Safari/iOS-ni yangilashdan tashqari, sizda vaqtinchalik echimlar uchun ba'zi variantlar mavjud:
.pull-right
Qattiq o'ngga tekislashni olish uchun oxirgi panjara ustuniga qo'shingElementni qo'llab-quvvatlash overflow: hidden
iOS <body>
va Android-da juda cheklangan. Shu maqsadda, ushbu qurilmalar brauzerlaridan birida modalning yuqori yoki pastki qismidan o‘tsangiz, <body>
kontent aylana boshlaydi. Chrome xato #175502 ( Chrome v40 da tuzatilgan) va WebKit xatosi #153852 ga qarang .
<input>
IOS 9.3 dan boshlab, modal ochiq boʻlsa, aylantirish imo-ishorasining dastlabki tegishi matn yoki a chegarasida boʻlsa, <textarea>
modalning <body>
oʻrniga modal ostidagi kontent aylantiriladi. WebKit xatosi # 153856 ga qarang .
Shuni ham yodda tutingki, agar siz qattiq navigatsiya panelidan foydalansangiz yoki modal ichida kirishlardan foydalansangiz, iOS-da virtual klaviatura ishga tushirilganda sobit elementlarning holatini yangilamaydigan renderlash xatosi bor. Buning uchun bir nechta vaqtinchalik echimlar elementlarni o'zgartirish position: absolute
yoki joylashuvni qo'lda tuzatish uchun fokusda taymerni chaqirishni o'z ichiga oladi. Bu Bootstrap tomonidan bajarilmaydi, shuning uchun ilovangiz uchun qaysi yechim eng mos kelishini o'zingiz hal qilasiz.
Element .dropdown-backdrop
z-indekslashning murakkabligi tufayli iOS-da navlarda ishlatilmaydi. Shunday qilib, navigatsiya panelidagi ochiladigan menyularni yopish uchun siz to'g'ridan-to'g'ri ochiladigan elementni (yoki iOS-da bosish hodisasini ishga tushiradigan boshqa elementni ) bosishingiz kerak.
Sahifani kattalashtirish muqarrar ravishda Bootstrap-da ham, Internetning qolgan qismlarida ham ba'zi komponentlarda renderlash artefaktlarini taqdim etadi. Muammoga qarab, biz uni hal qilishimiz mumkin (avval qidiring va kerak bo'lsa, muammoni oching). Biroq, biz ularni e'tiborsiz qoldiramiz, chunki ular ko'pincha noto'g'ri vaqtinchalik echimlardan boshqa to'g'ridan-to'g'ri echimga ega emas.
:hover
/ :focus
mobildaKo'pgina sensorli ekranlarda haqiqiy sichqonchani ko'tarish mumkin bo'lmasa ham, ko'pchilik mobil brauzerlar sichqonchani qo'llab-quvvatlashga taqlid qiladi va :hover
"yopishqoq" qiladi. Boshqacha qilib aytganda, :hover
uslublar elementni bosgandan so'ng qo'llanila boshlaydi va foydalanuvchi boshqa elementni bosgandan keyingina qo'llashni to'xtatadi. Bu Bootstrap :hover
holatlarining bunday brauzerlarda istalmagan tarzda "yopishib qolishiga" olib kelishi mumkin. Ba'zi mobil brauzerlar ham :focus
xuddi shunday yopishqoq qiladi. Hozirda bunday uslublarni butunlay olib tashlashdan tashqari, bu muammolarni hal qilishning oddiy echimi yo'q.
Hatto ba'zi zamonaviy brauzerlarda ham chop etish g'alati bo'lishi mumkin.
Xususan, Chrome v32 dan boshlab va chekka sozlamalaridan qat'i nazar, Chrome veb-sahifani chop etishda media so'rovlarini hal qilishda jismoniy qog'oz hajmidan sezilarli darajada torroq ko'rish oynasi kengligidan foydalanadi. Bu chop etishda kutilmaganda Bootstrap-ning juda kichik tarmog'ining faollashishiga olib kelishi mumkin. Ba'zi tafsilotlar uchun #12078-son va Chrome xatosi #273306- ga qarang. Tavsiya etilgan vaqtinchalik echimlar:
@screen-*
Printer qog'ozi juda kichikdan kattaroq deb hisoblanishi uchun Less o'zgaruvchilari qiymatlarini moslang .Bundan tashqari, Safari v8.0 dan boshlab, qattiq kenglikdagi .container
s Safari chop etishda juda kichik shrift hajmidan foydalanishiga olib kelishi mumkin. Batafsil ma'lumot uchun #14868 va WebKit xatosi #138192 ga qarang. Buning mumkin bo'lgan vaqtinchalik echimlaridan biri quyidagi CSS-ni qo'shishdir:
Qutiga Android 4.1 (va hatto ba'zi yangi versiyalar) Brauzer ilovasi bilan tanlagan standart veb-brauzer sifatida (Chrome'dan farqli o'laroq) yetkazib beriladi. Afsuski, Brauzer ilovasida juda ko'p xatolar va umuman CSS bilan nomuvofiqliklar mavjud.
Elementlarda Android fond brauzeri va/yoki qo'llanilsa <select>
, yon boshqaruv elementlarini ko'rsatmaydi . ( Tafsilotlar uchun ushbu StackOverflow savoliga qarang.) Quyidagi kod parchasidan foydalanib, haqoratli CSS-ni olib tashlang va Android birja brauzerida uslubsiz element sifatida ko'rsating. Foydalanuvchi agenti hidlash Chrome, Safari va Mozilla brauzerlari bilan aralashuvdan qochadi.border-radius
border
<select>
Misol ko'rishni xohlaysizmi? Ushbu JS Bin demosini tekshiring.
Eski va noto'g'ri brauzerlar uchun eng yaxshi tajribani taqdim etish uchun Bootstrap brauzerlarning o'zlarida xatolarni bartaraf etish uchun muayyan brauzer versiyalariga maxsus CSS-ni yo'naltirish uchun bir necha joylarda CSS brauzerini buzishlardan foydalanadi. Ushbu buzg'unchiliklar CSS validatorlarining noto'g'ri ekanligi haqida shikoyat qilishlariga sabab bo'lishi mumkin. Baʼzi joylarda biz hali toʻliq standartlashtirilmagan CSS xususiyatlaridan ham foydalanamiz, lekin ular faqat progressiv yaxshilash uchun ishlatiladi.
Ushbu tasdiqlash ogohlantirishlari amalda muhim emas, chunki bizning CSS-ning noto'g'ri bo'lgan qismi to'liq tasdiqlanadi va buzilgan bo'limlar noto'g'ri bo'lgan qismning to'g'ri ishlashiga xalaqit bermaydi, shuning uchun biz ushbu maxsus ogohlantirishlarni ataylab e'tiborsiz qoldiramiz.
Bizning HTML hujjatlarimizda ham ma'lum bir Firefox xatosi uchun vaqtinchalik yechim kiritilganligimiz sababli arzimas va ahamiyatsiz HTML tekshiruvi ogohlantirishlari mavjud .
Biz uchinchi tomon plaginlari yoki qo‘shimchalarini rasman qo‘llab-quvvatlamasak ham, loyihalaringizda yuzaga kelishi mumkin bo‘lgan muammolarni oldini olish uchun foydali maslahatlar beramiz.
Ba'zi uchinchi tomon dasturlari, jumladan, Google Xaritalar va Google Custom Search Engine, Bootstrap bilan ziddiyatga ega * { box-sizing: border-box; }
, chunki qoida padding
elementning yakuniy hisoblangan kengligiga ta'sir qilmaydi. CSS Tricks-da quti modeli va o'lchamlari haqida ko'proq bilib oling .
Kontekstga qarab, kerak bo'lganda bekor qilishingiz mumkin (1-variant) yoki butun mintaqalar uchun quti o'lchamini tiklashingiz mumkin (2-variant).
Bootstrap umumiy veb-standartlarga amal qiladi va minimal qo'shimcha harakatlar bilan AT dan foydalanadiganlar kirishi mumkin bo'lgan saytlarni yaratish uchun ishlatilishi mumkin .
Agar sizning navigatsiyangizda koʻplab havolalar boʻlsa va DOM-dagi asosiy tarkibdan oldin boʻlsa Skip to main content
, navigatsiyadan oldin havola qoʻshing (oddiy tushuntirish uchun navigatsiya havolalarini oʻtkazib yuborish haqidagi ushbu A11Y loyihasi maqolasiga qarang ). Sinfdan foydalanish .sr-only
o'tkazib yuborish havolasini vizual ravishda yashiradi va .sr-only-focusable
sinf diqqat markazida bo'lgandan keyin havola ko'rinadigan bo'lishini ta'minlaydi (ko'rish qobiliyatiga ega klaviatura foydalanuvchilari uchun).
Chrome ( Chromium xato kuzatuvchisidagi 262171-sonli masalaga qarang ) va Internet Explorer ( sahifa ichidagi havolalar va diqqatni jamlash tartibi haqida ushbu maqolaga qarang) uzoq vaqtdan beri davom etayotgan kamchiliklar/xatolar tufayli siz oʻtkazib yuborish havolasining maqsadiga ishonch hosil qilishingiz kerak boʻladi. qo'shish orqali hech bo'lmaganda dasturiy jihatdan diqqat markazida bo'ladi tabindex="-1"
.
Bunga qo'shimcha ravishda, maqsadda ko'rinadigan fokus ko'rsatkichini aniq bostirishni xohlashingiz mumkin (ayniqsa, Chrome hozirda tabindex="-1"
sichqoncha bilan bosilgan elementlarga fokusni o'rnatadi) bilan #content:focus { outline: none; }
.
Shuni esda tutingki, bu xato saytingiz ishlatayotgan boshqa sahifa ichidagi havolalarga ham ta'sir qiladi va ularni klaviatura foydalanuvchilari uchun foydasiz qiladi. Bog'lanish maqsadlari sifatida ishlaydigan boshqa barcha nomlangan langarlar/fragment identifikatorlariga o'xshash to'xtash joyini tuzatishni qo'shishni ko'rib chiqishingiz mumkin.
Sarlavhalarni ( <h1>
- <h6>
) joylashtirishda asosiy hujjat sarlavhasi bo'lishi kerak <h1>
. Keyingi sarlavhalar mantiqiy foydalanishi kerak <h2>
- <h6>
ekran o'quvchilari sizning sahifalaringiz uchun tarkiblar jadvalini yaratishi mumkin.
HTML CodeSniffer va Penn State's AccessAbility- da ko'proq bilib oling .
Hozirda Bootstrap-da mavjud bo'lgan ba'zi birlamchi rang kombinatsiyalari (masalan, turli uslubdagi tugma sinflari, asosiy kod bloklari uchun ishlatiladigan ba'zi kodlarni ajratib ko'rsatish ranglari , .bg-primary
kontekstli fon yordamchi sinfi va oq fonda foydalanilganda standart havola rangi) past kontrast nisbatiga ega ( tavsiya etilgan 4,5:1 nisbatdan past ). Bu ko'rish qobiliyati past yoki ranglarni ko'r bo'lgan foydalanuvchilarga muammo tug'dirishi mumkin. Ushbu standart ranglarning kontrastini va tushunarliligini oshirish uchun o'zgartirish kerak bo'lishi mumkin.
Bootstrap MIT litsenziyasi ostida chiqarilgan va mualliflik huquqi 2016 Twitter. Kichikroq bo'laklarga qaynatiladi, uni quyidagi shartlar bilan tavsiflash mumkin.
To'liq Bootstrap litsenziyasi qo'shimcha ma'lumot olish uchun loyiha omborida joylashgan.
Hamjamiyat a'zolari Bootstrap hujjatlarini turli tillarga tarjima qilishgan. Hech biri rasman qo'llab-quvvatlanmaydi va ular har doim ham yangilanmasligi mumkin.
Biz tarjimalarni tashkil qilish yoki joylashtirishga yordam bermaymiz, faqat ularga havola qilamiz.
Yangi yoki yaxshiroq tarjimani tugatdingizmi? Uni ro'yxatimizga qo'shish uchun tortish so'rovini oching.