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.

<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 .

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>

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>

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>

Ochiladigan menyuda alohida havolalar seriyasiga ajratuvchi qo'shing.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

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.

@

@example.com

$ .00

https://example.com/users/
<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 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.

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>

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>

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 .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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:

  1. Navbar elementlarining miqdori yoki kengligini kamaytiring.
  2. Javob beruvchi yordam sinflari yordamida ma'lum ekran o'lchamlarida ba'zi navbar elementlarini yashiring .
  3. 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.

Javob beruvchi navigatsiya paneli siqilish plaginini Bootstrap versiyangizga kiritishni talab qiladi .

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"

<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>

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>

.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.

<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>

Mobil qurilmalar uchun ogohlantirishlar

Mobil qurilmalarda sobit elementlarda shakl boshqaruvlaridan foydalanishga oid ba'zi ogohlantirishlar mavjud. Tafsilotlar uchun brauzerimizni qoʻllab-quvvatlash boʻlimiga qarang .

Har doim teg qo'shing

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.

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>

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 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>

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>

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.

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>

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.

body { padding-top: 70px; }

Buni asosiy Bootstrap CSS- dan keyin kiritganingizga ishonch hosil qiling .

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>

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.

body { padding-bottom: 70px; }

Buni asosiy Bootstrap CSS- dan keyin kiritganingizga ishonch hosil qiling .

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>

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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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>

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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.

Kiruvchi quti42

<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.

Ko'proq ma'lumot olish

<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.

<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.

100% x 200

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.

Tugma Tugma

100% x 200

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.

Tugma Tugma

100% x 200

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.

Tugma Tugma

<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.

<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 .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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"

.alert-linkHar qanday ogohlantirish ichida mos rangli havolalarni tezda taqdim etish uchun yordamchi dastur sinfidan foydalaning .

<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.

60% bajarildi
<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 .

60%
<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.

0%
2%
<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.

40% bajarildi (muvaffaqiyatli)
20% Toʻliq
60% bajarildi (ogohlantirish)
80% toʻliq (xavfli)
<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.

40% bajarildi (muvaffaqiyatli)
20% Toʻliq
60% bajarildi (ogohlantirish)
80% toʻliq (xavfli)
<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.

45% bajarildi
<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.

35% bajarildi (muvaffaqiyatli)
20% bajarildi (ogohlantirish)
10% Toʻliq (xavfli)
<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. Davlat 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.

<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>

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 @twitter
<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 tanasi 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 @twitter
<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>