Ikonografiya, ochiladigan menyular, kiritish guruhlari, navigatsiya, ogohlantirishlar va boshqa ko'p narsalarni ta'minlash uchun yaratilgan o'ndan ortiq qayta foydalanish mumkin bo'lgan komponentlar.
Glifonlar
Mavjud gliflar
Glyphicon Halflings to'plamidan shrift formatidagi 250 dan ortiq gliflarni o'z ichiga oladi. Glyphicons Halflings odatda bepul mavjud emas, lekin ularning yaratuvchisi ularni Bootstrap uchun bepul taqdim etgan. Tashakkur sifatida , iloji boricha Glyphicons -ga havolani qo'shishingizni so'raymiz.
Ishlash sabablari uchun barcha piktogrammalar asosiy sinf va individual piktogramma sinfini talab qiladi. Foydalanish uchun quyidagi kodni istalgan joyga joylashtiring. To'g'ri to'ldirish uchun belgi va matn o'rtasida bo'sh joy qoldirishni unutmang.
Boshqa komponentlar bilan aralashtirmang
Belgilar sinflarini bevosita boshqa komponentlar bilan birlashtirish mumkin emas. Ularni bir xil elementdagi boshqa sinflar bilan birga ishlatmaslik kerak. Buning o'rniga ichki joy qo'shing <span>va ikonka sinflarini <span>.
Faqat bo'sh elementlarda foydalanish uchun
Belgilar sinflari faqat matn mazmunini o'z ichiga olmaydi va hech qanday yordamchi elementlarga ega bo'lmagan elementlarda qo'llanilishi kerak.
Belgining shrift joyini o'zgartirish
Bootstrap ikonkali shrift fayllari ../fonts/kompilyatsiya qilingan CSS fayllariga nisbatan katalogda joylashishini taxmin qiladi. Ushbu shrift fayllarini ko'chirish yoki nomini o'zgartirish CSS-ni uchta usuldan birida yangilashni anglatadi:
Less fayllar manbasidagi @icon-font-pathva/yoki o'zgaruvchilarni o'zgartiring .@icon-font-name
url()Kompilyatsiya qilingan CSS-dagi yo'llarni o'zgartiring .
Muayyan ishlab chiqish sozlamalaringizga eng mos keladigan variantdan foydalaning.
Kirish mumkin bo'lgan piktogrammalar
Yordamchi texnologiyalarning zamonaviy versiyalari CSS-da yaratilgan tarkibni, shuningdek, muayyan Unicode belgilarini e'lon qiladi. Ekranni o'qish dasturlarida ko'zda tutilmagan va chalkash chiqishlarning oldini olish uchun (ayniqsa, piktogrammalar faqat bezak uchun ishlatilganda) biz ularni aria-hidden="true"atribut bilan yashiramiz.
Agar siz ikonkadan maʼnoni bildirish uchun foydalanayotgan boʻlsangiz (faqat dekorativ element sifatida emas), bu maʼno yordamchi texnologiyalarga ham yetkazilishiga ishonch hosil qiling – masalan, .sr-onlysinfda vizual tarzda yashiringan qoʻshimcha kontentni kiriting.
Agar siz boshqa matnsiz boshqaruv elementlarini yaratayotgan bo'lsangiz (masalan, <button>faqat piktogramma mavjud bo'lsa), boshqaruvning maqsadini aniqlash uchun har doim muqobil kontentni taqdim etishingiz kerak, shunda u yordamchi texnologiyalar foydalanuvchilariga mantiqiy bo'ladi. Bunday holda, siz aria-labelboshqaruvning o'ziga atribut qo'shishingiz mumkin.
Misollar
Ulardan tugmalar, asboblar panelidagi tugmalar guruhlari, navigatsiya yoki oldindan oʻrnatilgan shakl kiritishlarida foydalaning.
Ogohlantirishda xato xabari ekanligini bildirish uchun foydalaniladigan belgi va bu maslahatni yordamchi texnologiyalar foydalanuvchilariga etkazish uchun qo'shimcha matn .sr-onlymavjud.
Xato:Yaroqli elektron pochta manzilini kiriting
Ochiladigan menyular
Havolalar ro'yxatini ko'rsatish uchun almashtiriladigan, kontekstli menyu. Ochiladigan JavaScript plagini bilan interaktiv qilingan .
Misol
Ochiladigan ro'yxatning triggerini va ochiladigan menyuni .dropdownyoki e'lon qiladigan boshqa elementni o'rab oling position: relative;. Keyin menyuning HTML-ni qo'shing.
Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Ochiladigan .dropdown-menu-rightmenyuni .dropdown-menuo'ngga tekislang.
Qo'shimcha joylashishni talab qilishi mumkin
Ochiladigan ro'yxatlar CSS orqali hujjatning oddiy oqimida avtomatik ravishda joylashtiriladi. Bu shuni anglatadiki, ochiladigan menyular ota-onalar tomonidan ma'lum overflowxususiyatlarga ega bo'lishi mumkin yoki ko'rish oynasi doirasidan tashqarida ko'rinishi mumkin. Ushbu muammolarni yuzaga kelganda o'zingiz hal qiling.
Eskirgan .pull-righttekislash
3.1.0 versiyasidan boshlab biz .pull-rightochiladigan menyulardan foydalanishni bekor qildik. Menyuni o'ngga tekislash uchun dan foydalaning .dropdown-menu-right. Navbardagi o'ngga tekislangan navbatma-navbat komponentlari menyuni avtomatik ravishda tekislash uchun ushbu sinfning aralash versiyasidan foydalanadi. Uni bekor qilish uchun dan foydalaning .dropdown-menu-left.
Sarlavhalar
Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.
Bir qator tugmalarni tugmalar guruhi bilan bir qatorda guruhlang. Bizning tugmalar plaginimiz yordamida ixtiyoriy JavaScript radiosi va tasdiqlash qutisi uslubidagi xatti-harakatlarni qo'shing .
Tugma guruhlaridagi maslahatlar va popoverlar maxsus sozlashni talab qiladi
A ichidagi elementlarda maslahatlar yoki popoverlardan foydalanilganda, kiruvchi nojo'ya ta'sirlarni oldini olish .btn-groupuchun variantni belgilashingiz kerak bo'ladi (masalan, element kengayishi va/yoki asboblar maslahati yoki popover ishga tushirilganda yumaloq burchaklarini yo'qotishi kabi).container: 'body'
To'g'riligiga ishonch hosil qiling roleva yorliqni taqdim eting
Yordamchi texnologiyalar (masalan, ekranni o'qish qurilmalari) bir qator tugmalar guruhlanganligini bildirishi uchun tegishli roleatribut taqdim etilishi kerak. Tugma guruhlari uchun bu bo'ladi role="group", asboblar panelida esa bo'lishi kerak role="toolbar".
Istisnolardan biri faqat bitta boshqaruvni o'z ichiga olgan guruhlar (masalan, elementlar bilan oqlangan tugma guruhlari<button> ) yoki ochiladigan ro'yxat.
Bundan tashqari, guruhlar va asboblar paneliga aniq belgi berilishi kerak, chunki ko'pchilik yordamchi texnologiyalar to'g'ri roleatribut mavjudligiga qaramay, ularni e'lon qilmaydi. Bu erda keltirilgan misollarda biz dan foydalanamiz aria-label, lekin shunga o'xshash muqobillardan aria-labelledbyham foydalanish mumkin.
Asosiy misol
.btnbilan bir qator tugmalarni o'rang .btn-group.
Tugma asboblar paneli
Murakkabroq komponentlar uchun to'plamlarni <div class="btn-group">a ga birlashtiring.<div class="btn-toolbar">
Hajmi
Guruhdagi har bir tugmaga tugma oʻlchami sinflarini qoʻllash oʻrniga har .btn-group-*biriga qoʻshing .btn-group, shu jumladan bir nechta guruhlarni joylashtirishda.
Uy qurish
Ochiladigan menyularni bir qator tugmalar bilan aralashtirishni istasangiz, a-ni .btn-groupboshqasiga joylashtiring ..btn-group
Tugmalar guruhini ota-onasining butun kengligi bo'ylab teng o'lchamda cho'zing. Shuningdek, tugmalar guruhidagi ochiladigan tugmalar bilan ishlaydi.
Chegaralar bilan ishlash
Tugmalarni oqlash uchun ishlatiladigan maxsus HTML va CSS tufayli (ya'ni display: table-cell), ular orasidagi chegaralar ikki baravar ko'payadi. Oddiy tugma guruhlarida margin-left: -1pxchegaralarni olib tashlash o'rniga ularni yig'ish uchun ishlatiladi. Biroq, marginbilan ishlamaydi display: table-cell. Natijada, Bootstrap-ga moslashtirilgan sozlamalaringizga qarab, siz chegaralarni olib tashlash yoki qayta rang berishni xohlashingiz mumkin.
IE8 va chegaralar
<a>Internet Explorer 8 yoqilgan yoki <button>elementlar bo'ladimi, asosli tugmalar guruhidagi tugmalar chegaralarini ko'rsatmaydi . Buni hal qilish uchun har bir tugmani boshqasiga o'rang .btn-group.
Agar <a>elementlar joriy sahifadagi boshqa hujjat yoki boʻlimga oʻtish oʻrniga, sahifa ichidagi funksiyalarni ishga tushirish uchun tugmalar vazifasini bajarish uchun ishlatilsa, ularga tegishli role="button".
<button>Elementlar bilan
<button>Elementlar bilan oqlangan tugma guruhlarini ishlatish uchun har bir tugmani tugmalar guruhiga oʻrashingiz kerak . Aksariyat brauzerlar elementlarni asoslash uchun CSS-ni to'g'ri qo'llamaydi <button>, lekin biz ochiladigan tugmachalarni qo'llab-quvvatlaganimiz sababli, biz buni hal qilishimiz mumkin.
Ochiladigan tugmalar
Ochiladigan menyuni ishga tushirish uchun istalgan tugmani ishlatib, uni a ichiga qo'yib .btn-group, tegishli menyu belgisini qo'ying.
Plaginga bog'liqlik
Ochiladigan tugmachalar ochiladigan plaginni Bootstrap versiyangizga kiritishni talab qiladi.
Yagona tugmachalar ochiladi
Ba'zi asosiy belgilash o'zgarishlari bilan tugmani ochiladigan menyuga aylantiring.
Har qanday matnga asoslangan matnning oldiga, keyin yoki ikkala tomoniga matn yoki tugmalar qo'shish orqali shakl boshqaruvlarini kengaytiring <input>. Elementlarni bitta elementga qo'shish yoki qo'shish uchun yoki .input-groupbilan foydalaning ..input-group-addon.input-group-btn.form-control
<input>Faqat matnli
Bu erda elementlardan foydalanishdan saqlaning <select>, chunki ularni WebKit brauzerlarida to'liq uslublash mumkin emas.
<textarea>Bu erda elementlardan foydalanishdan saqlaning , chunki ularning rowsatributi ba'zi hollarda hurmat qilinmaydi.
Kirish guruhlaridagi maslahatlar va popoverlar maxsus sozlashni talab qiladi
, ichidagi elementlarda maslahatlar yoki popoverlardan foydalanilganda, kiruvchi nojo'ya ta'sirlarni oldini olish .input-groupuchun variantni belgilashingiz kerak bo'ladi (masalan, element kengayishi va/yoki asboblar maslahati yoki popover ishga tushirilganda yumaloq burchaklarini yo'qotishi kabi).container: 'body'
Boshqa komponentlar bilan aralashtirmang
Shakl guruhlari yoki panjara ustunlari sinflarini bevosita kirish guruhlari bilan aralashtirmang. Buning o'rniga, kirish guruhini shakllar guruhi yoki panjara bilan bog'liq element ichiga joylashtiring.
Har doim teg qo'shing
Har bir kiritish uchun yorliq qo'shmasangiz, ekranni o'qiydiganlar shakllaringiz bilan bog'liq muammolarga duch kelishadi. Ushbu kirish guruhlari uchun har qanday qo'shimcha yorliq yoki funksiyalar yordamchi texnologiyalarga uzatilishiga ishonch hosil qiling.
Ishlatiladigan aniq texnika (koʻrinadigan <label>elementlar, sinf <label>yordamida yashirin elementlar yoki , , , yoki atributidan foydalanish) va qanday qoʻshimcha maʼlumotlarni yetkazish kerakligi siz amalga oshirayotgan interfeys vidjetining aniq turiga qarab oʻzgaradi. Ushbu bo'limdagi misollar bir nechta tavsiya etilgan, vaziyatga xos yondashuvlarni taqdim etadi..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
Asosiy misol
Kirishning har ikki tomoniga bitta plagin yoki tugmani joylashtiring. Bundan tashqari, kirishning har ikki tomoniga ham birini qo'yishingiz mumkin.
Biz bir tomondan bir nechta qo'shimchalarni ( .input-group-addonyoki ) qo'llab-quvvatlamaymiz..input-group-btn
Biz bitta kiritish guruhida bir nechta shakl boshqaruvlarini qo'llab-quvvatlamaymiz.
Hajmi
Nisbiy shakl o'lchamlari sinflarini o'ziga qo'shing .input-groupva ichidagi tarkib avtomatik ravishda o'lchamini o'zgartiradi - har bir elementda shakl nazorati o'lchami sinflarini takrorlashning hojati yo'q.
Belgilash qutilari va radio qo'shimchalari
Matn o'rniga kirish guruhining qo'shimchasiga har qanday tasdiqlash qutisi yoki radio opsiyasini qo'ying.
Tugma qo'shimchalari
Kirish guruhlaridagi tugmalar biroz farq qiladi va bitta qo'shimcha joylashtirish darajasini talab qiladi. ning o'rniga , tugmalarni o'rash .input-group-addonuchun foydalanishingiz kerak bo'ladi . .input-group-btnBu bekor qilib bo'lmaydigan standart brauzer uslublari tufayli talab qilinadi.
Ochiladigan tugmachalar
Segmentli tugmalar
Bir nechta tugmalar
Har bir tomonda faqat bitta qo'shimchaga ega bo'lishingiz mumkin bo'lsa-da, bitta ichida bir nechta tugma bo'lishi mumkin .input-group-btn.
Navs
Bootstrap-da mavjud bo'lgan navlar asosiy .navsinfdan boshlab umumiy belgilarga, shuningdek umumiy holatlarga ega. Har bir uslub oʻrtasida almashish uchun modifikator sinflarini almashtiring.
Yorliqlar panellari uchun navlardan foydalanish JavaScript tab plaginini talab qiladi
Yorliq maydonlari bo'lgan yorliqlar uchun JavaScript plaginidan foydalanishingiz kerak . Belgilash qoʻshimcha roleva ARIA atributlarini ham talab qiladi – qoʻshimcha maʼlumot olish uchun plaginning namuna belgilariga qarang.
Navigatsiya sifatida foydalaniladigan navlarni ochiq qiling
role="navigation"Agar siz navigatsiya panelini taqdim qilish uchun navlardan foydalanayotgan bo'lsangiz , ning eng mantiqiy ota-konteyneriga a qo'shganingizga ishonch hosil qiling <ul>yoki <nav>elementni butun navigatsiya atrofiga o'rang. Rolni o'ziga qo'shmang <ul>, chunki bu uning yordamchi texnologiyalar tomonidan haqiqiy ro'yxat sifatida e'lon qilinishiga to'sqinlik qiladi.
Yorliqlar
E'tibor bering, sinf asosiy .nav-tabssinfni talab qiladi .nav.
Yorliqlar yoki tabletkalarni ekranning kengligi 768px dan katta boʻlgan holda ota-onasining kengligiga teng qilib osongina yarating .nav-justified. Kichikroq ekranlarda navigatsiya havolalari yig'iladi.
Asoslangan navigatsiya panelidagi havolalar hozircha qo‘llab-quvvatlanmaydi.
Safari va sezgir oqlangan navlar
9.1.2 versiyasiga ko'ra, Safari xatosini ko'rsatadi, unda brauzer o'lchamini gorizontal ravishda o'zgartirish, yangilangandan so'ng o'chiriladi, asoslangan navbatma-navbatda renderlash xatolariga olib keladi. Bu xato oqlangan nav misolida ham ko'rsatilgan .
Har qanday nav komponenti (yorliqlar yoki tabletkalar) .disableduchun kulrang havolalar uchun qo'shing va hover effektlari yo'q .
Havola funksiyasiga ta'sir qilmadi
Bu sinf <a>uning funksiyasini emas, balki faqat tashqi ko'rinishini o'zgartiradi. Bu yerda havolalarni oʻchirish uchun maxsus JavaScript dan foydalaning.
Navbarlar sizning ilovangiz yoki saytingiz uchun navigatsiya sarlavhalari sifatida xizmat qiluvchi sezgir meta komponentlardir. Ular mobil ko'rinishlarda yiqilib (va o'zgartirilishi mumkin) boshlanadi va mavjud ko'rish maydoni kengligi oshgani sayin gorizontal holga keladi.
Asoslangan navigatsiya panelidagi havolalar hozircha qo‘llab-quvvatlanmaydi.
To'lib toshgan tarkib
Bootstrap navigatsiya panelidagi kontentga qancha joy kerakligini bilmagani uchun kontentni ikkinchi qatorga oʻtkazish bilan bogʻliq muammolarga duch kelishingiz mumkin. Buni hal qilish uchun siz:
Navbar elementlarining miqdori yoki kengligini kamaytiring.
Navbaringiz yiqilgan va gorizontal rejimga oʻtish nuqtasini oʻzgartiring. O'zgaruvchini moslashtiring @grid-float-breakpointyoki o'zingizning media so'rovingizni qo'shing.
JavaScript plaginini talab qiladi
Agar JavaScript o'chirilgan bo'lsa va ko'rish oynasi tor bo'lsa, u holda navigatsiya paneli yiqilib tushsa, navigatsiya panelini kengaytirish va ichidagi tarkibni ko'rish imkonsiz bo'ladi .navbar-collapse.
Yiqilgan mobil navbarning uzilish nuqtasi o'zgartirilmoqda
Ko'rish oynasi dan torroq bo'lganda navbar o'zining vertikal mobil ko'rinishiga tushadi va ko'rish @grid-float-breakpointoynasi kamida @grid-float-breakpointkenglikda bo'lsa, gorizontal mobil bo'lmagan ko'rinishga kengayadi. Navbar yiqilib/kengayishini nazorat qilish uchun bu o‘zgaruvchini Less manbasida sozlang. Standart qiymat 768px(eng kichik "kichik" yoki "planshet" ekrani).
Navbarlarni ochiq qilib qo'ying
Elementdan foydalanganingizga ishonch hosil qiling <nav>yoki agar , kabi umumiyroq elementdan foydalansangiz, uni yordamchi texnologiyalar foydalanuvchilari uchun moʻljallangan hudud sifatida aniq belgilash uchun har bir navbarga <div>a qoʻshing .role="navigation"
Brend tasviri
Matnni ga almashtirish orqali navbar brendini o'zingizning rasmingiz bilan almashtiring <img>. O'zining to'ldirish va balandligi bo'lganligi sababli .navbar-brand, rasmingizga qarab ba'zi CSS-ni bekor qilishingiz kerak bo'lishi mumkin.
Shakllar
.navbar-formTor ko'rish oynalarida to'g'ri vertikal tekislash va yiqilgan xatti-harakatlar uchun shakl tarkibini joylashtiring . Navbar tarkibidagi joylashuvni aniqlash uchun tekislash opsiyalaridan foydalaning.
.navbar-formEhtiyotkorlik bilan, kodining katta qismini mixin .form-inlineorqali baham ko'radi. Ba'zi forma boshqaruvlari, masalan, kiritish guruhlari, navigatsiya panelida to'g'ri ko'rsatilishi uchun belgilangan kengliklarni talab qilishi mumkin.
Har bir kiritish uchun yorliq qo'shmasangiz, ekranni o'qiydiganlar shakllaringiz bilan bog'liq muammolarga duch kelishadi. Ushbu inline shakllar uchun siz .sr-onlysinfdan foydalanib teglarni yashirishingiz mumkin. Yordamchi texnologiyalar uchun yorliqni taqdim etishning boshqa muqobil usullari mavjud, masalan, aria-label, aria-labelledbyyoki titleatribut. Agar ulardan hech biri mavjud bo'lmasa, ekranni o'qiydiganlar placeholder, agar mavjud bo'lsa, atributdan foydalanishlari mumkin, ammo placeholderyorliqlashning boshqa usullarini almashtirish sifatida foydalanish tavsiya etilmaydi.
Tugmalar
Navbarda vertikal markazlashtirish uchun .navbar-btnsinfni <button>a ichida bo'lmagan elementlarga qo'shing .<form>
Kontekstga xos foydalanish
Standart tugma sinflari kabi , va elementlarda .navbar-btnham foydalanish mumkin . Biroq, ichidagi elementlarda na standart tugma sinflari, na tugmalar ishlatilmasligi kerak .<a><input>.navbar-btn<a>.navbar-nav
Matn
Matn satrlarini elementga oʻrash .navbar-text, odatda <p>toʻgʻri boshlanish va rang berish uchun tegga.
Navbatsiz havolalar
Oddiy navbar navigatsiya komponentiga kirmaydigan standart havolalardan foydalanadigan odamlar uchun .navbar-linkstandart va teskari navbar parametrlari uchun mos ranglarni qo'shish uchun sinfdan foydalaning.
Komponentlarni tekislash
Navigatsiya havolalarini, shakllarni, tugmalarni yoki matnni .navbar-leftyoki .navbar-rightyordamchi dastur sinflaridan foydalangan holda tekislang. Ikkala sinf ham belgilangan yo'nalishda CSS floatini qo'shadi. Masalan, navigatsiya havolalarini tekislash uchun ularni <ul>tegishli yordam sinfi qo'llanilgan holda alohida joylashtiring.
Bu sinflar va ning aralash versiyalaridir .pull-left, .pull-rightlekin ular qurilma oʻlchamlari boʻyicha navigatsiya paneli komponentlarini osonroq boshqarish uchun media soʻrovlariga moʻljallangan.
Bir nechta komponentlarni o'ngga tekislash
Navbarlarda hozirda bir nechta .navbar-rightsinflar bilan cheklanish mavjud. Tarkibni to'g'ri joylashtirish uchun biz oxirgi .navbar-rightelementda salbiy chegaradan foydalanamiz. Agar ushbu sinfdan foydalanadigan bir nechta elementlar mavjud bo'lsa, bu chegaralar mo'ljallangan tarzda ishlamaydi.
Ushbu komponentni v4 da qayta yozishimiz mumkin bo'lsa, biz buni qayta ko'rib chiqamiz.
Yuqoriga mahkamlangan
Navbarning oʻrtasiga yoki yorligʻiga qoʻshing .navbar-fixed-topva kiriting..container.container-fluid
Tana qoplamasi talab qilinadi
paddingRuxsat etilgan navbar paneli, agar siz yuqoriga qo'shmasangiz, boshqa kontentingizni qoplaydi <body>. O'z qadriyatlaringizni sinab ko'ring yoki quyidagi parchamizdan foydalaning. Maslahat: Odatiy bo'lib, navbarning balandligi 50px.
Buni asosiy Bootstrap CSS- dan keyin kiritganingizga ishonch hosil qiling .
Pastki qismga mahkamlangan
Navbarning oʻrtasiga yoki yorligʻiga qoʻshing .navbar-fixed-bottomva kiriting..container.container-fluid
Tana qoplamasi talab qilinadi
paddingRuxsat etilgan navbar paneli, agar siz pastki qismiga qo'shmasangiz, boshqa kontentingizni qoplaydi <body>. O'z qadriyatlaringizni sinab ko'ring yoki quyidagi parchamizdan foydalaning. Maslahat: Odatiy bo'lib, navbarning balandligi 50px.
Buni asosiy Bootstrap CSS- dan keyin kiritganingizga ishonch hosil qiling .
Statik tepa
Toʻliq kenglikdagi navigatsiya panelini yarating, u sahifa bilan birga aylanib oʻtadigan yoki oʻrtasiga yoki navigatsiya paneliga kontent qoʻshish .navbar-static-topva kiritish orqali..container.container-fluid
Sinflardan farqli o'laroq .navbar-fixed-*, siz to'ldirishni o'zgartirishingiz shart emas body.
Teskari navigatsiya paneli
ni qo'shish orqali navbarning ko'rinishini o'zgartiring .navbar-inverse.
Non bo'laklari
Navigatsiya ierarxiyasida joriy sahifaning joylashuvini ko'rsating.
:beforeSeparatorlar CSS-ga va orqali avtomatik ravishda qo'shiladi content.
Rdio-dan ilhomlangan oddiy sahifalash, ilovalar va qidiruv natijalari uchun ajoyib. Katta blokni o'tkazib yuborish qiyin, osongina kengaytiriladi va katta bosish joylarini ta'minlaydi.
Sahifalar komponentini etiketlash
<nav>Sahifalash komponenti uni ekran o'quvchilari va boshqa yordamchi texnologiyalar uchun navigatsiya bo'limi sifatida aniqlash uchun elementga o'ralgan bo'lishi kerak . Bundan tashqari, sahifada allaqachon bir nechta navigatsiya bo'limlari bo'lishi mumkinligi sababli (masalan, sarlavhadagi asosiy navigatsiya yoki yon paneldagi navigatsiya), uning maqsadini aks ettiruvchi tavsifni aria-labeltaqdim etish tavsiya etiladi. <nav>Misol uchun, agar sahifalash komponenti qidiruv natijalari to'plami o'rtasida harakat qilish uchun ishlatilsa, tegishli yorliq bo'lishi mumkin aria-label="Search results pages".
O'chirilgan va faol holatlar
Havolalar turli holatlar uchun sozlanishi. .disabledBosib bo'lmaydigan havolalar va .activejoriy sahifani ko'rsatish uchun foydalaning .
Mo‘ljallangan uslublarni saqlab qolgan holda bosish funksiyasini olib tashlash uchun faol yoki o‘chirilgan langarlarni ga almashtirishni yoki <span>oldingi/keyingi o‘qlarda langarni o‘tkazib yuborishni tavsiya qilamiz.
Hajmi
Kattaroq yoki kichikroq sahifalashni xohlaysizmi? Qo'shish .pagination-lgyoki .pagination-smqo'shimcha o'lchamlar uchun.
Peyjer
Yengil belgilar va uslublar bilan oddiy sahifalash ilovalari uchun tezkor oldingi va keyingi havolalar. Bloglar yoki jurnallar kabi oddiy saytlar uchun juda yaxshi.
Standart misol
Odatiy bo'lib, peyjer havolalarni markazlashtiradi.
Tegishli havolalar
Shu bilan bir qatorda, har bir havolani yon tomonlarga tekislashingiz mumkin:
Ixtiyoriy o'chirilgan holat
Peyjer havolalari, shuningdek, sahifalashdan umumiy .disabledyordamchi sinfdan foydalanadi.
Yorliqlar
Misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Mavjud o'zgarishlar
Yorliq ko'rinishini o'zgartirish uchun quyida keltirilgan modifikator sinflaridan birini qo'shing.
Birlamchi muvaffaqiyat maʼlumotlari Ogohlantirish xavf _
Tonnalab yorliqlar bormi?
Tor konteyner ichida har birida oʻz inline-blockelementi (masalan, piktogramma) boʻlgan oʻnlab ichki yorliqlar mavjud boʻlganda renderlash bilan bogʻliq muammolar paydo boʻlishi mumkin. Buning yo'li - sozlash display: inline-block;. Kontekst va misol uchun #13219 ga qarang .
Belgilar
<span class="badge">Havolalar, Bootstrap navlari va boshqalarga a qo'shish orqali yangi yoki o'qilmagan narsalarni osongina ajratib oling.
Jumbotronni toʻliq enli va yumaloq burchaksiz qilish uchun uni barcha .containers tashqarisiga qoʻying va uning oʻrniga .containerichiga belgi qoʻying.
Sahifa sarlavhasi
h1Sahifadagi kontent bo'limlarini to'g'ri ajratish va segmentlarga ajratish uchun oddiy qobiq . U h1standart smallelementdan, shuningdek, ko'pgina boshqa komponentlardan (qo'shimcha uslublar bilan) foydalanishi mumkin.
Misol sahifa sarlavhasi Sarlavha uchun pastki matn
Agar siz turli balandlikdagi va/yoki kenglikdagi eskizlarning Pinterest-ga o'xshash taqdimotini izlayotgan bo'lsangiz, Masonry , Isotope yoki Salvattore kabi uchinchi tomon plaginidan foydalanishingiz kerak bo'ladi .
Standart misol
Odatiy bo'lib, Bootstrap eskizlari minimal talab qilinadigan belgilar bilan bog'langan rasmlarni namoyish qilish uchun mo'ljallangan.
Shaxsiy tarkib
Bir oz qo'shimcha belgilash bilan, eskizlarga sarlavhalar, paragraflar yoki tugmalar kabi har qanday HTML kontentini qo'shish mumkin.
Eskiz yorlig‘i
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Bir nechta mavjud va moslashuvchan ogohlantirish xabarlari bilan foydalanuvchining odatiy harakatlari uchun kontekstli fikr-mulohaza xabarlarini taqdim eting.
Misollar
Asosiy ogohlantirish xabarlari uchun har qanday matnni va ixtiyoriy oʻchirish tugmasini .alertva toʻrtta kontekstli sinfdan birini (masalan, ) oʻrang..alert-success
Standart sinf yo'q
Ogohlantirishlarda standart sinflar mavjud emas, faqat asosiy va modifikator sinflari mavjud. Odatiy kulrang ogohlantirish juda mantiqiy emas, shuning uchun siz kontekstli sinf orqali turni ko'rsatishingiz kerak. Muvaffaqiyat, ma'lumot, ogohlantirish yoki xavfdan tanlang.
Barakalla! Siz ushbu muhim ogohlantirish xabarini muvaffaqiyatli o'qidingiz.
Oldindan qisqa ma'lumot berish! Bu ogohlantirish eʼtiboringizni talab qiladi, lekin bu juda muhim emas.
Ogohlantirish! O'zingizni tekshirib ko'ring, siz unchalik yaxshi emassiz.
Oh, chaqqon! Bir nechta narsani o'zgartiring va qaytadan yuboring.
Rad etish mumkin bo'lmagan ogohlantirishlar
.alert-dismissibleIxtiyoriy va yopish tugmachasini qo'shish orqali har qanday ogohlantirishni yarating .
Oddiy, ammo moslashuvchan progress barlari yordamida ish jarayoni yoki harakatning borishi haqida so‘nggi fikr-mulohazalarni taqdim eting.
Brauzerlar o'rtasidagi muvofiqlik
Rivojlanish satrlari ba'zi effektlarga erishish uchun CSS3 o'tishlari va animatsiyalaridan foydalanadi. Bu funksiyalar Internet Explorer 9 va undan past yoki Firefoxning eski versiyalarida qo‘llab-quvvatlanmaydi. Opera 12 animatsiyalarni qo'llab-quvvatlamaydi.
Kontent xavfsizligi siyosati (CSP) muvofiqligi
Agar veb-saytingizda ruxsat bermaydigan Content Security Policy (CSP) mavjud bo'lsa, quyidagi misollarimizda ko'rsatilganidek, progress satrining kengligini o'rnatish style-src 'unsafe-inline'uchun inline atributlaridan foydalana olmaysiz . styleQattiq CSP'larga mos keladigan kengliklarni o'rnatishning muqobil usullariga ozgina maxsus JavaScript (bu o'rnatish element.style.width) yoki maxsus CSS sinflaridan foydalanish kiradi.
Asosiy misol
Birlamchi taraqqiyot paneli.
60% bajarildi
Yorliq bilan
<span>Ko'rinadigan foizni ko'rsatish uchun progress panelidagi bilan .sr-onlysinfini olib tashlang .
60%
Yorliq matni hatto past foizlarda ham o'qilishi mumkin bo'lishini ta'minlash uchun min-widthjarayon satriga a qo'shing.
0%
2%
Kontekstli alternativalar
Rivojlanish satrlari bir xil tugmachalardan va izchil uslublar uchun ogohlantirish sinflaridan foydalanadi.
40% bajarildi (muvaffaqiyatli)
20% Toʻliq
60% bajarildi (ogohlantirish)
80% toʻliq (xavfli)
Chiziqli
Chiziqli effekt yaratish uchun gradientdan foydalanadi. IE9 va undan past versiyalarda mavjud emas.
40% bajarildi (muvaffaqiyatli)
20% Toʻliq
60% bajarildi (ogohlantirish)
80% toʻliq (xavfli)
Animatsiyalangan
Chiziqlarni o'ngdan chapga jonlantirish uchun .activeqo'shing . .progress-bar-stripedIE9 va undan past versiyalarda mavjud emas.
45% bajarildi
Yigʻilgan
Ularni joylashtirish uchun bir nechta barlarni bir xil .progressjoyga qo'ying.
35% bajarildi (muvaffaqiyatli)
20% bajarildi (ogohlantirish)
10% Toʻliq (xavfli)
Media ob'ekti
Matn mazmuni bilan bir qatorda chapga yoki o'ngga tekislangan tasvirni o'z ichiga olgan har xil turdagi komponentlarni (masalan, blog sharhlari, tvitlar va boshqalar) yaratish uchun mavhum ob'ekt uslublari.
Standart media
Standart media media ob'ektni (rasmlar, video, audio) kontent blokining chap yoki o'ng tomonida ko'rsatadi.
Media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ichki media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Sinflar ham mavjud .pull-leftva .pull-rightular avval media komponentining bir qismi sifatida ishlatilgan, lekin v3.3.0 dan boshlab bu foydalanish uchun eskirgan. Ular taxminan .media-leftva ga ekvivalentdir .media-right, faqat html .media-rightdan keyin joylashtirilishi kerak ..media-body
Media moslamasi
Tasvirlar yoki boshqa ommaviy axborot vositalari yuqoriga, o'rtaga yoki pastga tekislanishi mumkin. Standart yuqoriga tekislangan.
Yuqori tekislangan media
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus.
O'rta tekislangan media
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus.
Pastga tekislangan media
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus.
Media ro'yxati
Bir oz qo'shimcha belgilash bilan siz ro'yxat ichidagi mediadan foydalanishingiz mumkin (sharhlar mavzulari yoki maqolalar ro'yxati uchun foydali).
Media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Ichki media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Ichki media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Ichki media sarlavhasi
Cras sit amet nibh libero, in gravida nulla. Nulla va metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum da vulputat, tempus viverra turpis.
Ro'yxat guruhi
Ro'yxat guruhlari nafaqat oddiy elementlar ro'yxatini, balki maxsus tarkibga ega murakkablarini ko'rsatish uchun moslashuvchan va kuchli komponentdir.
Asosiy misol
Eng asosiy ro'yxat guruhi oddiy ro'yxat elementlari va tegishli sinflar bilan tartiblanmagan ro'yxatdir. Unga keyingi variantlar yoki kerak bo'lganda shaxsiy CSS-ni yarating.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Eroz va vestibulum
Belgilar
Ro'yxatdagi istalgan guruh elementiga nishonlar komponentini qo'shing va u avtomatik ravishda o'ng tomonda joylashadi.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Bog'langan elementlar
Roʻyxat elementlari oʻrniga langar teglaridan foydalangan holda roʻyxat guruhi elementlarini bogʻlang (bu ham <div>oʻrniga ota-onani bildiradi <ul>). Har bir element atrofida alohida ota-onalar kerak emas.
Roʻyxat guruhi elementlari roʻyxat elementlari oʻrniga tugmalar boʻlishi mumkin (bu , <div>oʻrniga ota-onani ham bildiradi <ul>). Har bir element atrofida alohida ota-onalar kerak emas. Bu erda standart .btnsinflardan foydalanmang.
O'chirilgan elementlar
.disabledOʻchirilgan koʻrinishi uchun a ga qoʻshing .list-group-item.
Har doim ham zarur bo'lmasa-da, ba'zida siz DOM-ni qutiga solib qo'yishingiz kerak. Bunday holatlar uchun panel komponentini sinab ko'ring.
Asosiy misol
Odatiy bo'lib, .panelba'zi bir tarkibni o'z ichiga olish uchun ba'zi bir asosiy chegara va to'ldirishni qo'llashning barchasi.
Asosiy panel namunasi
Sarlavhali panel
Panelingizga sarlavha konteynerini osongina qo'shing .panel-heading. Oldindan sarlavha qo'shish uchun har qanday sinfni ham <h1>qo'shishingiz mumkin <h6>. .panel-titleBiroq, shrift o'lchamlari <h1>- <h6>tomonidan bekor qilinadi .panel-heading.
Havolani to'g'ri bo'yash uchun havolalarni sarlavhalarga qo'yganingizga ishonch hosil qiling .panel-title.
Sarlavhasiz panel sarlavhasi
Panel tarkibi
Panel sarlavhasi
Panel tarkibi
Altbilgili panel
Tugmalarni yoki qo'shimcha matnni o'rash .panel-footer. E'tibor bering, panel altbilgilari kontekstli o'zgarishlardan foydalanganda ranglar va chegaralarni meros qilib olmaydi , chunki ular oldingi planda bo'lishi kerak emas.
Panel tarkibi
Kontekstli alternativalar
Boshqa komponentlar singari, har qanday kontekstli holat sinflarini qo'shish orqali panelni ma'lum bir kontekst uchun yanada mazmunli qilish oson.
Panel sarlavhasi
Panel tarkibi
Panel sarlavhasi
Panel tarkibi
Panel sarlavhasi
Panel tarkibi
Panel sarlavhasi
Panel tarkibi
Panel sarlavhasi
Panel tarkibi
Jadvallar bilan
.tableUzluksiz dizayn uchun har qanday chegaralanmagan panelni qo'shing . Agar mavjud bo'lsa, .panel-bodyajratish uchun jadvalning yuqori qismiga qo'shimcha chegara qo'shamiz.
Panel sarlavhasi
Bu yerda bir nechta standart panel kontenti. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Ism
Familiya
Foydalanuvchi nomi
1
Mark
Otto
@mdo
2
Yoqub
Tornton
@yog'
3
Larri
qush
@twitter
Agar panel tanasi bo'lmasa, komponent uzluksiz panel sarlavhasidan jadvalga o'tadi.
Bu yerda bir nechta standart panel kontenti. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Eroz va vestibulum
Javob beruvchi joylashtirish
Brauzerlarga video yoki slayd-shou o‘lchamlarini har qanday qurilmada to‘g‘ri o‘lchaydigan ichki nisbat yaratish orqali ularni o‘z ichiga olgan blokning kengligidan kelib chiqib aniqlashiga ruxsat bering.
Qoidalar to'g'ridan-to'g'ri <iframe>, <embed>, <video>va <object>elementlarga qo'llaniladi; .embed-responsive-itemixtiyoriy ravishda boshqa atributlar uchun uslubni moslashtirishni xohlasangiz, aniq avlod sinfidan foydalaning .
Pro-Tip! s ga kiritishingiz shart emas , chunki biz buni frameborder="0"siz <iframe>uchun bekor qilamiz.
Quduqlar
Standart yaxshi
Quduqni elementga oddiy effekt sifatida kiritib, unga qo'shimcha effekt berish uchun foydalaning.
Mana, men quduqdaman!
Majburiy emas darslar
Ikkita ixtiyoriy modifikator sinfiga ega bo'lgan to'ldirish va yumaloq burchaklarni boshqarish.