Komponentlar
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.
- glifikon glifik-yulduzcha
- glifikon glifikon-plus
- glifikon glifikon-evro
- glyphicon glyphicon-eur
- glifikon glifikon-minus
- glifikon glifikon-bulut
- glifikon glifikon-konvert
- glifikon glifikon-qalam
- glifikon glifikon-shisha
- glifikon glifikon-musiqa
- glifikon glifikon-qidiruv
- glifikon glifikon-yurak
- glifikon glifikon-yulduz
- glifikon glifikon-yulduz-bo'sh
- glifikon glifikon-foydalanuvchi
- glifikon glifikon-plyonka
- glifikon glifikon-katta
- glifikon glifikon-th
- glifikon glifikon-th-ro'yxat
- glifikon glifikon-yaxshi
- glifikon glifikon-olib tashlash
- glifikon glifikon-kattalashtirish
- glifikon glifikon-kichraytirish
- glifikon glifikon-off
- glifikon glifikon-signal
- glifikon glifikon-tishli
- glifikon glifikon-axlat qutisi
- glifikon glifikon-uy
- glifikon glifikon fayli
- glifikon glifikon vaqti
- glifikon glifikon-yo'l
- glyphicon glyphicon-yuklab olish-alt
- glifikon glifikon-yuklab olish
- glifikon glifikon-yuklash
- glifikon glifikon-inbox
- glifikon glifikon-o'yin-doira
- glifikon glifikon-takrorlash
- glifikon glifikon-yangilash
- glyphicon glyphicon-list-alt
- glifikon glifikon-qulf
- glifikon glifikon-bayroq
- glifikon glifikon-naushniklar
- glifikon glifikon-hajmini o'chirish
- glifikon glifikon-tovushni pasaytirish
- glifikon glifikon-hajmini oshirish
- glifikon glifikon-qrkod
- glifikon glifikon-shtrix-kod
- glifikon glifikon-tegi
- glifikon glifikon teglari
- glifikon glifikon-kitobi
- glifikon glifikon-xatcho'p
- glifikon glifikon-bosma
- glifik glifikon-kamera
- glifikon glifikon-shrift
- glifikon glifikon-qalin
- glifikon glifikon-kursiv
- glifikon glifikon-matn balandligi
- glifikon glifikon-matn kengligi
- glifikon glifikon-chapga tekislang
- glifikon glifikonni tekislash markazi
- glifikon glifikon-o'ngga tekislang
- glifikon glifikonni tekislang-oqlash
- glifikon glifikon ro'yxati
- glifikon glifikon-indent-chap
- glifikon glifikon-indent-o'ng
- glifikon glifikon-facetime-video
- glifikon glifikon-rasm
- glifikon glifikon-xarita-marker
- glifikon glifikon-sozlash
- glifikon glifikon-rang
- glifikon glifikon-tahrirlash
- glifikon glifikon-ulush
- glifikon glifikon-tekshirish
- glifikon glifikon-harakat
- glifikon glifikon-qadam-orqaga
- glifikon glifikon-tez-orqaga
- glifikon glifikon-orqaga
- glifikon glifikon-o'yin
- glifikon glifikon-pauza
- glifikon glifikon-stop
- glifikon glifikon oldinga
- glifikon glifikon-tez-oldinga
- glifikon glifikon-oldinga qadam
- glifikon glifikon-chiqarish
- glifikon glifikon-chevron-chap
- glifikon glifikon-chevron-o'ng
- glifikon glifikon-plyus-belgisi
- glifikon glifikon-minus-belgisi
- glifikon glifikon-olib tashlash belgisi
- glifikon glifikon-ok-belgisi
- glifikon glifikon-savol belgisi
- glifikon glifikon-ma'lumot belgisi
- glyphicon glyphicon-skrinshot
- glifikon glifikon-olib tashlash-doira
- glifikon glifikon-ok-doira
- glifikon glifikon-ban-doira
- glifikon glifikon-o'q-chap
- glifikon glifikon-o'q-o'ng
- glifikon glifikon-o'q-yuqoriga
- glifikon glifikon-pastga o'q
- glyphicon glyphicon-share-alt
- glifikon glifikon-o'lchamini o'zgartirish-to'liq
- glifikon glifikon-o'lchamini o'zgartirish-kichik
- glifikon glifik-undov belgisi
- glifikon glifikon-sovg'a
- glifikon glifikon-barg
- glifikon glifikon-olov
- glifikon glifikon-ko'z ochiq
- glifikon glifikon-ko'zni yaqin
- glifikon glifikon-ogohlantirish belgisi
- glifikon glifikon tekisligi
- glifikon glifik-taqvim
- glifikon glifikon-tasodifiy
- glifikon glifikon-sharh
- glifikon glifikon-magnit
- glifikon glifikon-chevron-up
- glifikon glifikon-chevron-pastga
- glyphicon glyphicon-retweet
- glifikon glifikon-savatcha
- glifikon glifikon-papka-yopish
- glifikon glifikon-papkani ochish
- glifikon glifikon-o'lchamini o'zgartirish-vertikal
- glifikon glifikon-o'lchamini o'zgartirish-gorizontal
- glifikon glifikon-hdd
- glifikon glifikon-bulhorn
- glifikon glifikon-qo'ng'iroq
- glifikon glifikon-sertifikati
- glifikon glifikon-bosh barmog'i
- glifikon glifikon-bosh barmoqlar-pastga
- glifikon glifikon-qo'l-o'ng
- glifikon glifikon-chap-qo'l
- glifikon glifikon-qo'l yuqoriga
- glifikon glifikon-qo'l pastga
- glifikon glifikon-doira-o'q-o'ng
- glifikon glifikon-doira-o'q-chap
- glifikon glifikon-doira-o'q-yuqoriga
- glifikon glifikon-doira-o'q-pastga
- glifikon glifikon-globus
- glifikon glifikon kaliti
- glifikon glifikon-vazifalar
- glifikon glifikon-filtr
- glifikon glifikon-portfel
- glifikon glifikon-to'liq ekran
- glifikon glifikon-boshqaruv paneli
- glifikon glifikon-qog'oz qisqichi
- glifikon glifikon-yurak-bo'sh
- glifikon glifikon-bog'lanish
- glifikon glifikon-telefon
- glifikon glifikon-pushpin
- glifikon glifikon-usd
- glifikon glifikon-gbp
- glifikon glifikon-tartib
- glifikon glifikon-alifbo bo'yicha saralash
- glifikon glifikon-alfavit-alt
- glifikon glifikon-tartib bo'yicha saralash
- glifikon glifikon-tartibga ko'ra-alt
- glifikon glifikon-atributlari bo'yicha saralash
- glifikon glifikon-atributlar bo'yicha-alt
- glifikon glifikon-belgilanmagan
- glifikon glifikon-kengaytir
- glifikon glifikon-pastga tushish
- glifikon glifikon - qulash
- glifikon glifikon-kirish
- glifikon glifikon-flesh
- glifikon glifikon-chiqish
- glifikon glifikon-yangi oyna
- glifikon glifikon-yozuv
- glifikon glifikonni saqlash
- glifikon glifikon-ochiq
- glifikon glifikon tomonidan saqlangan
- glifikon glifikon-import
- glifikon glifikon-eksport
- glifikon glifikon-yuborish
- glifikon glifikon-floppi-disk
- glifikon glifikon-floppi-saqlangan
- glifikon glifikon-floppi-olib tashlash
- glifikon glifikon-floppi-saqlash
- glifikon glifikon-floppi-ochiq
- glifikon glifikon-kredit kartasi
- glifikon glifikon-transfer
- glifikon glifikon-vilkalar
- glifikon glifikon-sarlavhasi
- glifikon glifikon bilan siqilgan
- glifikon glifikon-naushnik
- glifikon glifikon-telefon-alt
- glifikon glifikon-minora
- glifikon glifikon-statistikalar
- glifikon glifikon-sd-video
- glifikon glifikon-hd-video
- glifikon glifikon-subtitrlar
- glifikon glifikon-tovush-stereo
- glifikon glifikon-tovush-dolbi
- glifikon glifikon-tovush-5-1
- glifikon glifikon-tovush-6-1
- glifikon glifikon-tovush-7-1
- glifikon glifikon-mualliflik huquqi belgisi
- glifikon glifikon-registratsiya belgisi
- glifikon glifikon-bulut-yuklab olish
- glifikon glifikon-bulut-yuklash
- glifikon glifikon-daraxt-igna bargli
- glifikon glifikon-daraxt-bargli
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-fayl
- glifikon glifikon-ochiq-fayl
- glifikon glifikon darajasini oshirish
- glifikon glifikon-nusxasi
- glifikon glifikon-pastasi
- glifikon glifikon ogohlantirishi
- glifikon glifikon-ekvalayzer
- glifikon glifikon-qirol
- glifikon glifikon-malika
- glifikon glifikon-piyon
- glifikon glifikon-episkop
- glifikon glifikon-ritsar
- glifikon glifikon-chaqaloq formulasi
- glifikon glifikon-chodir
- glifikon glifikon-qora taxta
- glifikon glifikon-to'shak
- glifikon glifikon-olma
- glifikon glifikon-o'chirish
- glifikon glifikon-qum soati
- glifikon glifikon-chiroq
- glifikon glifikon-dublikat
- glifikon glifikon-cho'chqachilik banki
- glifikon glifikon-qaychi
- glifikon glifikon-bitkoin
- glyphicon glyphicon-btc
- glifikon glifikon-xbt
- glifikon glifikon-yen
- glifikon glifikon-jpy
- glifikon glifikon-rub
- glifikon glifikon-rub
- glifik glifik shkalasi
- glifikon glifikon-muz-lolly
- glifikon glifikon-muz-lolly-ta'mli
- glifikon glifikon-ta'lim
- glifikon glifikon-variant-gorizontal
- glifikon glifikon-variant-vertikal
- glifikon glifikon-menyu-gamburger
- glifikon glifikon-modal-oyna
- glifikon glifikon moyi
- glifikon glifikon-don
- glifikon glifikon-quyosh ko'zoynaklari
- glifikon glifikon-matn o'lchami
- glifikon glifikon-matn-rang
- glifikon glifikon-matn-fon
- glifikon glifikon-ob'ektni tekislash-tepasi
- glifikon glifikon-ob'ektni tekislash-pastki
- glifikon glifikon-ob'ektni tekislash-gorizontal
- glifikon glifikon-ob'ektni-chapga tekislash
- glifikon glifikon-ob'ektni tekislash-vertikal
- glifikon glifikon-ob'ektni tekislash-o'ngga
- glifikon glifikon-uchburchak-o'ng
- glifikon glifikon-uchburchak-chap
- glifikon glifikon-uchburchak-pastki
- glifikon glifikon-uchburchak-tepa
- glifikon glifikon-konsol
- glifikon glifikon-ustki yozuv
- glifikon glifikon-pastki yozuv
- glifikon glifikon-menyu-chap
- glyphicon glyphicon-menyu-o'ng
- glifikon glifikon-menyu-pastga
- glifikon glifikon-menyu-yuqoriga
Qanday ishlatish
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 - Less kompilyator tomonidan taqdim etilgan nisbiy URL manzillaridan foydalaning .
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.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Misollar
Ulardan tugmalar, asboblar panelidagi tugmalar guruhlari, navigatsiya yoki oldindan oʻrnatilgan shakl kiritishlarida foydalaning.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>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
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>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.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Ochiladigan menyularni ota-onaga qo'shish orqali yuqoriga (pastga o'rniga) kengaytirish uchun o'zgartirish mumkin .dropup.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Hizalama
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.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Sarlavhalar
Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Bo'luvchi
Ochiladigan menyuda alohida havolalar qatoriga ajratuvchi qo'shing.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>O'chirilgan menyu elementlari
Havolani o'chirish uchun ochiladigan .disabledro'yxatdagi a ga qo'shing .<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>Tugmalar guruhlari
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.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>Tugma asboblar paneli
Murakkabroq komponentlar uchun to'plamlarni <div class="btn-group">a ga birlashtiring.<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>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.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>Uy qurish
Ochiladigan menyularni bir qator tugmalar bilan aralashtirishni istasangiz, a-ni .btn-groupboshqasiga joylashtiring ..btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Vertikal o'zgaruvchanlik
Tugmalar to'plamini gorizontal emas, balki vertikal ravishda yig'ilgan qilib ko'ring. Ajratish tugmachalari bu erda qo'llab-quvvatlanmaydi.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Asoslangan tugma guruhlari
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.
Qo'shimcha ma'lumot uchun #12476 ga qarang .
<a>Elementlar bilan
.btnShunchaki s qatorini o'rab oling .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Tugmalar vazifasini bajaradigan havolalar
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.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>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.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Ochiladigan tugmachalarni ajratish
Xuddi shunday, bir xil belgilash o'zgarishlari bilan, faqat alohida tugma bilan bo'linadigan ochiladigan tugmachalarni yarating.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Hajmi
Ochiladigan tugmalar barcha o'lchamdagi tugmalar bilan ishlaydi.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>Dropup o'zgarishi
Ota-onaga qo'shish orqali elementlar ustidagi ochiladigan menyularni .dropupishga tushiring.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>Kirish guruhlari
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.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>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.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Belgilash qutilari va radio qo'shimchalari
Matn o'rniga kirish guruhining qo'shimchasiga har qanday tasdiqlash qutisi yoki radio opsiyasini qo'ying.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->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.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Ochiladigan tugmachalar
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Segmentli tugmalar
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>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.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>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
E'tibor bering, sinf asosiy .nav-tabssinfni talab qiladi .nav.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Tabletkalar
Xuddi shu HTMLni oling, lekin .nav-pillso'rniga foydalaning:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Tabletkalar ham vertikal ravishda stackable. Faqat qo'shing .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Oqlangan
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.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>O'chirilgan havolalar
Har qanday nav komponenti (yorliqlar yoki tabletkalar) .disableduchun kulrang havolalar uchun qo'shing va hover effektlari yo'q .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Ochiladigan menyulardan foydalanish
Bir oz qo'shimcha HTML va ochiladigan menyular JavaScript plagini bilan ochiladigan menyularni qo'shing .
Ochiladigan yorliqlar
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Ochiladigan tabletkalar
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Navbar
Standart navbar
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.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>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.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Shakllar
.navbar-formTor ko'rish oynalarida to'g'ri vertikal tekislash va siqilgan 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.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Tugmalar
Navbarda vertikal markazlashtirish uchun .navbar-btnsinfni <button>a ichida bo'lmagan elementlarga qo'shing .<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Matn
Matn satrlarini elementga oʻrash .navbar-text, odatda <p>toʻgʻri boshlanish va rang berish uchun tegga.
<p class="navbar-text">Signed in as Mark Otto</p>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.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>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.
Yuqoriga mahkamlangan
Navbarning oʻrtasiga yoki yorligʻiga qoʻshing .navbar-fixed-topva kiriting..container.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Pastki qismga mahkamlangan
Navbarning oʻrtasiga yoki yorligʻiga qoʻshing .navbar-fixed-bottomva kiriting..container.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>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.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Teskari navigatsiya paneli
ni qo'shish orqali navbarning ko'rinishini o'zgartiring .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Non bo'laklari
Navigatsiya ierarxiyasida joriy sahifaning joylashuvini ko'rsating.
:beforeSeparatorlar CSS-ga va orqali avtomatik ravishda qo'shiladi content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Sahifalar
Ko'p sahifali sahifalash komponenti yoki oddiyroq peyjer alternativi bilan saytingiz yoki ilovangiz uchun sahifalash havolalarini taqdim eting .
Standart sahifalash
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.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>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 .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>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.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>Hajmi
Kattaroq yoki kichikroq sahifalashni xohlaysizmi? Qo'shish .pagination-lgyoki .pagination-smqo'shimcha o'lchamlar uchun.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>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.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Tegishli havolalar
Shu bilan bir qatorda, har bir havolani yon tomonlarga tekislashingiz mumkin:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Ixtiyoriy o'chirilgan holat
Peyjer havolalari, shuningdek, sahifalashdan umumiy .disabledyordamchi sinfdan foydalanadi.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Yorliqlar
Misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
Yangi sarlavhaga misol
<h3>Example heading <span class="label label-default">New</span></h3>Mavjud o'zgarishlar
Yorliq ko'rinishini o'zgartirish uchun quyida keltirilgan modifikator sinflaridan birini qo'shing.
Birlamchi
muvaffaqiyat maʼlumotlari Ogohlantirish xavf _
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>O'z-o'zidan qulash
Agar yangi yoki o'qilmagan elementlar bo'lmasa, nishonlar shunchaki yiqilib tushadi (CSS :emptyselektori orqali), agar ichida kontent mavjud bo'lmasa.
Brauzerlar o'rtasidagi muvofiqlik
Internet Explorer 8 da nishonlar o'z-o'zidan yiqilmaydi, chunki u :emptyselektorni qo'llab-quvvatlamaydi.
Faol navigatsiya holatiga moslashadi
O'rnatilgan uslublar tabletkalarni navigatsiya qilishda faol holatlarda nishonlarni joylashtirish uchun kiritilgan.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Jumbotron
Saytingizdagi asosiy tarkibni ko'rsatish uchun ixtiyoriy ravishda butun ko'rish oynasini kengaytira oladigan engil, moslashuvchan komponent.
Salom Dunyo!
Bu oddiy qahramon birligi, taniqli tarkib yoki ma'lumotlarga qo'shimcha e'tiborni jalb qilish uchun oddiy jumbotron uslubidagi komponent.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Jumbotronni toʻliq enli va yumaloq burchaksiz qilish uchun uni barcha .containers tashqarisiga qoʻying va uning oʻrniga .containerichiga belgi qoʻying.
<div class="jumbotron">
<div class="container">
...
</div>
</div>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
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Eskizlar
Tasvirlar, videolar, matnlar va boshqalarni osongina ko'rsatish uchun Bootstrap grid tizimini eskiz komponenti bilan kengaytiring.
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.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Shaxsiy tarkib
Bir oz qo'shimcha belgilash bilan, eskizlarga sarlavhalar, paragraflar yoki tugmalar kabi har qanday HTML kontentini qo'shish mumkin.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>Ogohlantirishlar
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.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Rad etish mumkin bo'lmagan ogohlantirishlar
.alert-dismissibleIxtiyoriy va yopish tugmachasini qo'shish orqali har qanday ogohlantirishni yarating .
JavaScript ogohlantirish plaginini talab qiladi
To'liq ishlashi uchun o'chirib qo'yiladigan ogohlantirishlar uchun JavaScript plaginidan foydalanish kerak .
Ogohlantirish! O'zingizni tekshirib ko'ring, siz unchalik yaxshi emassiz.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Barcha qurilmalarda to'g'ri harakat qilishni ta'minlang
Ma'lumotlar atributiga <button>ega elementdan foydalanganingizga ishonch hosil qiling .data-dismiss="alert"
Ogohlantirishlardagi havolalar
.alert-linkHar qanday ogohlantirish ichida mos rangli havolalarni tezda taqdim etish uchun yordamchi dastur sinfidan foydalaning .
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 ko'rinmaysiz .
Oh, chaqqon!
Bir nechta narsani o'zgartiring va qaytadan yuboring.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>Rivojlanish chiziqlari
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.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>Yorliq bilan
<span>Ko'rinadigan foizni ko'rsatish uchun progress panelidagi bilan .sr-onlysinfini olib tashlang .
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Yorliq matni hatto past foizlarda ham o'qilishi mumkin bo'lishini ta'minlash uchun min-widthjarayon satriga a qo'shing.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>Kontekstli alternativalar
Rivojlanish satrlari bir xil tugmachalardan va izchil uslublar uchun ogohlantirish sinflaridan foydalanadi.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Chiziqli
Chiziqli effekt yaratish uchun gradientdan foydalanadi. IE9 va undan past versiyalarda mavjud emas.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Animatsiyalangan
Chiziqlarni o'ngdan chapga jonlantirish uchun .activeqo'shing . .progress-bar-stripedIE9 va undan past versiyalarda mavjud emas.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Yigʻilgan
Ularni joylashtirish uchun bir nechta barlarni bir xil .progressjoyga qo'ying.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>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.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>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.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>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.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>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
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>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
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>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.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Tugma elementlari
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.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>O'chirilgan elementlar
.disabledOʻchirilgan koʻrinishi uchun a ga qoʻshing .list-group-item.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Kontekstli sinflar
Standart yoki bog‘langan ro‘yxat elementlarini uslublash uchun kontekstli sinflardan foydalaning. Davlatni ham o'z ichiga oladi .active.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Eroz va vestibulum
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Shaxsiy tarkib
Deyarli har qanday HTML-ni, hatto quyidagi kabi bog'langan ro'yxat guruhlari uchun ham qo'shing.
Guruh sarlavhasi
Donec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
Guruh sarlavhasi
Donec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
Guruh sarlavhasi
Donec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Panellar
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
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>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
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>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
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>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
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>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 |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Agar panel korpusi bo'lmasa, komponent uzluksiz panel sarlavhasidan jadvalga o'tadi.
Panel sarlavhasi
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Ro'yxat guruhlari bilan
Toʻliq kenglikdagi roʻyxat guruhlarini istalgan panelga osongina kiriting.
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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Eroz va vestibulum
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>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.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Quduqlar
Standart yaxshi
Quduqni elementga oddiy effekt sifatida kiritib, unga qo'shimcha effekt berish uchun foydalaning.
Mana, men quduqdaman!
<div class="well">...</div>Majburiy emas darslar
Ikkita ixtiyoriy modifikator sinfiga ega bo'lgan to'ldirish va yumaloq burchaklarni boshqarish.
Mana, men katta quduqdaman!
<div class="well well-lg">...</div>
Mana, men kichkina quduqdaman!
<div class="well well-sm">...</div>