Komponentlar

Navigatsiya, ogohlantirishlar, popoverlar va boshqa ko'p narsalarni ta'minlash uchun o'nlab qayta ishlatiladigan komponentlar Bootstrap-ga o'rnatilgan.

Tugmalar guruhlari

Bir nechta tugmalarni bitta kompozit komponent sifatida birlashtirish uchun tugmalar guruhlaridan foydalaning. Ularni bir qator <a>yoki <button>elementlar bilan yarating.

Eng yaxshi amaliyotlar

Tugma guruhlari va asboblar panelidan foydalanish bo'yicha quyidagi ko'rsatmalarni tavsiya qilamiz:

  • Bitta tugmalar guruhida har doim bir xil elementdan foydalaning <a>yoki <button>.
  • Bitta tugmalar guruhida turli rangdagi tugmalarni aralashtirmang.
  • Matnga qo'shimcha yoki o'rniga piktogrammalardan foydalaning, lekin kerak bo'lganda alt va sarlavha matnini qo'shing.

Tegishli ochiladigan tugmalar guruhlari (pastga qarang) alohida chaqirilishi kerak va har doim mo'ljallangan xatti-harakatni ko'rsatish uchun ochiladigan karetani o'z ichiga oladi.

Standart misol

Anchor teg tugmalari bilan tuzilgan standart tugmalar guruhini HTML quyidagicha ko'rinadi:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Asboblar paneli misoli

Murakkabroq komponentlar uchun to'plamlarni <div class="btn-group">a ga birlashtiring.<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Belgilash qutisi va radio lazzatlari

Tugmalar guruhlari faqat bitta tugma faol bo'lishi mumkin bo'lgan radiolar yoki istalgan miqdordagi tugmalar faol bo'lishi mumkin bo'lgan belgilash katakchalari sifatida ham ishlashi mumkin. Buning uchun Javascript hujjatlarini ko'ring .

Javascriptni oling »

Tugmalar guruhlarida ochiladigan menyular

Oldindan qisqa ma'lumot berish! To'g'ri ko'rsatish uchun pastga tushadigan tugmalar alohida-alohida .btn-groupa ichida o'ralgan bo'lishi kerak..btn-toolbar

Ochiladigan tugmalar

Umumiy ko'rinish va misollar

Ochiladigan menyuni ishga tushirish uchun istalgan tugmani ishlatib, uni a ichiga qo'yib .btn-group, tegishli menyu belgisini qo'ying.

Belgilash misoli

Tugmalar guruhiga o'xshab, bizning belgilashimiz oddiy tugma belgilaridan foydalanadi, ammo uslubni yaxshilash va Bootstrap-ning jQuery plaginini qo'llab-quvvatlash uchun bir nechta qo'shimchalar mavjud.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Harakat
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ochiladigan menyu" >
  7. <!-- ochiladigan menyu havolalari -->
  8. </ul>
  9. </div>

Barcha tugma o'lchamlari bilan ishlaydi

Ochiladigan tugmalar har qanday hajmda ishlaydi. tugma o'lchamlarini .btn-large, .btn-small, yoki .btn-mini.

Javascriptni talab qiladi

Ochiladigan tugmachalar ishlashi uchun Bootstrap ochiladigan plagin talab qilinadi .

Ba'zi hollarda, masalan, mobil kabi, ochiladigan menyular ko'rish oynasidan tashqariga chiqadi. Hizalashni qo'lda yoki maxsus JavaScript yordamida hal qilishingiz kerak.


Ochiladigan tugmachalarni ajratish

Umumiy ko'rinish va misollar

Tugmalar guruhi uslublari va belgilarga asoslanib, biz osongina ajratish tugmachasini yaratishimiz mumkin. Ajratish tugmalari chap tomonda standart amalni va kontekstli havolalar bilan o'ng tomonda ochiladigan tugmani o'z ichiga oladi.

O'lchamlari

Qo'shimcha tugma sinflari .btn-mini, .btn-small, yoki .btn-largeo'lchamlar uchun foydalaning.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "ochiladigan menyuni o'ngga tortish" >
  4. <!-- ochiladigan menyu havolalari -->
  5. </ul>
  6. </div>

Belgilash misoli

Alohida ochiladigan tetik sifatida ishlaydigan ikkinchi tugma harakatini ta'minlash uchun oddiy tugmachalarni ochamiz.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Harakat </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ochiladigan menyu" >
  7. <!-- ochiladigan menyu havolalari -->
  8. </ul>
  9. </div>

Ochiladigan menyular

Ochiladigan menyular ham ning bevosita ota-onasiga bitta sinf qo'shish orqali pastdan yuqoriga o'zgartirilishi mumkin .dropdown-menu. .caretU yuqoridan pastga emas, pastdan yuqoriga siljitish uchun menyuning yo'nalishini aylantiradi va o'zini o'zgartiradi.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ochiladigan menyu" >
  7. <!-- ochiladigan menyu havolalari -->
  8. </ul>
  9. </div>

Ko'p sahifali sahifalash

Qachon foydalanish kerak

Rdio-dan ilhomlangan o'ta sodda va minimal uslubdagi sahifalash, ilovalar va qidiruv natijalari uchun ajoyib. Katta blokni o'tkazib yuborish qiyin, osongina kengaytiriladi va katta bosish joylarini ta'minlaydi.

Statusli sahifa havolalari

Havolalar sozlanishi va bir qator sharoitlarda kerakli sinf bilan ishlaydi. .disabledbosilmaydigan havolalar va .activejoriy sahifa uchun.

Moslashuvchan tekislash

Sahifalar havolalarining hizalanishini o'zgartirish uchun ikkita ixtiyoriy sinfdan birini qo'shing: .pagination-centeredva .pagination-right.

Misollar

Standart sahifalash komponenti moslashuvchan va bir qator o'zgarishlarda ishlaydi.

Belgilash

O'ralgan <div>, sahifalash faqat bir <ul>.

  1. <div class = "sahifalash" >
  2. <ul>
  3. <li><a href = "#" > Oldingi </a></li>
  4. <li sinf = "faol" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Keyingi </a></li>
  11. </ul>
  12. </div>

Peyjer Tez oldingi va keyingi havolalar uchun

Peyjer haqida

Peyjer komponenti engil belgilar va hatto engilroq uslublar bilan oddiy sahifalash ilovalari uchun havolalar to'plamidir. Bu bloglar yoki jurnallar kabi oddiy saytlar uchun juda yaxshi.

Ixtiyoriy o'chirilgan holat

Peyjer havolalari ham sahifalashdan umumiy .disabledsinfdan foydalanadi.

Standart misol

Odatiy bo'lib, peyjer havolalarni markazlashtiradi.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Oldingi </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Keyingi </a>
  7. </li>
  8. </ul>

Tegishli havolalar

Shu bilan bir qatorda, har bir havolani yon tomonlarga tekislashingiz mumkin:

  1. <ul class = "pager" >
  2. <li sinf = "oldingi" >
  3. <a href = "#" > Kattaroq </a>
  4. </li>
  5. <li sinf = "keyingi" >
  6. <a href = "#" > Yangiroq → </a>
  7. </li>
  8. </ul>
Yorliqlar Belgilash
Standart <span class="label">Default</span>
Muvaffaqiyat <span class="label label-success">Success</span>
Ogohlantirish <span class="label label-warning">Warning</span>
Muhim <span class="label label-important">Important</span>
Ma'lumot <span class="label label-info">Info</span>
Teskari <span class="label label-inverse">Inverse</span>

Haqida

Nishonlar - bu ko'rsatkich yoki raqamni ko'rsatish uchun kichik, oddiy komponentlar. Ular odatda Mail.app kabi elektron pochta mijozlarida yoki push-bildirishnomalar uchun mobil ilovalarda topiladi.

Mavjud sinflar

Ism Misol Belgilash
Standart 1 <span class="badge">1</span>
Muvaffaqiyat 2 <span class="badge badge-success">2</span>
Ogohlantirish 4 <span class="badge badge-warning">4</span>
Muhim 6 <span class="badge badge-important">6</span>
Ma'lumot 8 <span class="badge badge-info">8</span>
Teskari 10 <span class="badge badge-inverse">10</span>

Qahramon birligi

Bootstrap saytingizdagi tarkibni namoyish qilish uchun qahramon birligi deb ataladigan engil, moslashuvchan komponentni taqdim etadi. U marketing va kontentga boy saytlarda yaxshi ishlaydi.

Belgilash

Kontentingizni divshunday qilib o'rang:

  1. <div class = "qahramon-birlik" >
  2. <h1> Sarlavha </h1>
  3. <p> Taglik </p>
  4. <p>
  5. <a sinf = "btn btn-asosiy btn-katta" >
  6. Ko'proq ma'lumot olish
  7. </a>
  8. </p>
  9. </div>

Salom Dunyo!

Bu oddiy qahramon birligi, taniqli kontent yoki ma'lumotlarga qo'shimcha e'tiborni jalb qilish uchun oddiy jumbotron uslubidagi komponent.

Ko'proq ma'lumot olish

Sahifa sarlavhasi

h1Sahifadagi kontent bo'limlarini to'g'ri ajratish va segmentlarga ajratish uchun oddiy qobiq . U h1standart small, element va boshqa ko'pgina komponentlardan (qo'shimcha uslublar bilan) foydalanishi mumkin.

  1. <div class = "sahifa sarlavhasi" >
  2. <h1> Misol sahifa sarlavhasi </h1>
  3. </div>

Birlamchi eskizlar

Odatiy bo'lib, Bootstrap eskizlari minimal talab qilinadigan belgilar bilan bog'langan rasmlarni namoyish qilish uchun mo'ljallangan.

Yuqori darajada moslashtirilgan

Bir oz qo'shimcha belgilash bilan, eskizlarga sarlavhalar, paragraflar yoki tugmalar kabi har qanday HTML kontentini qo'shish mumkin.

  • Eskiz yorlig‘i

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Harakat Harakat

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

    Harakat Harakat

Nima uchun eskizlardan foydalanish kerak

Eskizlar (ilgari .media-grid1.4 versiyasigacha) fotosuratlar yoki videolar panjaralari, tasvirlarni qidirish natijalari, chakana mahsulotlar, portfellar va boshqalar uchun juda yaxshi. Ular havolalar yoki statik tarkib bo'lishi mumkin.

Oddiy, moslashuvchan belgilash

Eskizni belgilash oddiy - ulistalgan sonli lielementlarga ega bo'lish kifoya. Bundan tashqari, u juda moslashuvchan bo'lib, kontentingizni o'rash uchun biroz ko'proq belgilar bilan har qanday turdagi kontentga imkon beradi.

To'r ustun o'lchamlaridan foydalanadi

Nihoyat, eskizlar komponenti eskiz o'lchamlarini boshqarish uchun mavjud bo'lgan tarmoq tizimi sinflaridan foydalanadi - shunga o'xshash .span2yoki -..span3

Belgilash

Yuqorida aytib o'tilganidek, eskizlar uchun kerakli belgi engil va tushunarli. Bog'langan tasvirlar uchun standart sozlamalarni ko'rib chiqing :

  1. <ul class = "eskiz" >
  2. <li sinf = "span3" >
  3. <a href = "#" class = "eskiz" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Eskizlardagi maxsus HTML kontenti uchun belgilash biroz o'zgaradi. Blok darajasidagi kontentga istalgan joyda ruxsat berish <a>uchun biz <div>o'xshashni almashtiramiz:

  1. <ul class = "eskiz" >
  2. <li sinf = "span3" >
  3. <div class = "eskiz" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Eskiz yorlig'i </h5>
  6. <p> Eskiz sarlavhasi shu yerda... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Ko'proq misollar

Siz uchun mavjud bo'lgan turli grid sinflari bilan barcha variantlaringizni o'rganing. Bundan tashqari, turli o'lchamlarni aralashtirishingiz va moslashtirishingiz mumkin.

Yengil vaznli standart

Qayta yozilgan asosiy sinf

Bootstrap 2 bilan biz asosiy sinfni soddalashtirdik: .alerto'rniga .alert-message. Biz minimal talab qilinadigan belgilashni ham kamaytirdik <p>— sukut boʻyicha yoʻq, faqat tashqi <div>.

Yagona ogohlantirish xabari

Kamroq kodga ega mustahkamroq komponent uchun biz bloklar haqida ogohlantirishlar, koʻproq toʻldirish va odatda koʻproq matnli xabarlar uchun farqlovchi koʻrinishni olib tashladik. Sinf ham o'zgardi .alert-block.


Javascript bilan ajoyib ishlaydi

Bootstrap ogohlantirish xabarlarini qo'llab-quvvatlaydigan ajoyib jQuery plaginiga ega bo'lib, ularni tez va oson o'chirish imkonini beradi.

Plaginni oling »

Ogohlantirishlarga misollar

Xabaringizni va ixtiyoriy yopish belgisini oddiy sinf bilan divga o'rang.

Ogohlantirish! O'zingizni tekshirib ko'ring, siz unchalik yaxshi ko'rinmaysiz.
  1. <div class = "ogohlantirish" >
  2. <button class = "yopish" data-dississ = "alert" > × </button>
  3. <strong> Ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz.
  4. </div>

Oldindan qisqa ma'lumot berish! iOS qurilmalari href="#"ogohlantirishlarni o'chirishni talab qiladi. Uni va langar yopish piktogrammalari uchun ma'lumotlar atributini qo'shganingizga ishonch hosil qiling. Shu bilan bir qatorda, siz <button>maʼlumotlar atributiga ega elementdan foydalanishingiz mumkin, biz buni hujjatlarimiz uchun tanlaganmiz. dan foydalanganda <button>siz qo'shishingiz kerak type="button"yoki shakllar yuborilmasligi mumkin.

Standart ogohlantirish xabarini ikkita ixtiyoriy sinf bilan osongina kengaytiring: .alert-blockko'proq to'ldirish va matn boshqaruvlari va .alert-headingmos keladigan sarlavha uchun.

Ogohlantirish!

O'zingizni tekshirib ko'ring, siz unchalik yaxshi ko'rinmaysiz. Nulla vitae elit libero, pharetra augue. To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur va boshqalar.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dississ = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Ogohlantirish! </h4>
  4. O'zingizni tekshirib ko'ring, siz ...
  5. </div>

Kontekstli muqobillar Ogohlantirish ma'nosini o'zgartirish uchun ixtiyoriy sinflarni qo'shing

Xato yoki xavf

Oh, chaqqon! Bir nechta narsani o'zgartiring va qaytadan yuboring.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Muvaffaqiyat

Barakalla! Siz ushbu muhim ogohlantirish xabarini muvaffaqiyatli o'qidingiz.
  1. <div class = "alert alert-muvaffaqiyat" >
  2. ...
  3. </div>

Ma `lumot

Oldindan qisqa ma'lumot berish! Bu ogohlantirish eʼtiboringizni talab qiladi, lekin bu juda muhim emas.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Misollar va belgilar

Asosiy

Vertikal gradientli standart taraqqiyot paneli.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. style = " width : 60 %; " ></div>
  4. </div>

Chiziqli

Chiziqli effekt yaratish uchun gradientdan foydalanadi (IE yo'q).

  1. <div class = "progress-striped" >
  2. <div class = "bar"
  3. style = " width : 20 %; " ></div>
  4. </div>

Animatsiyalangan

Chiziqli misolni oladi va uni jonlantiradi (IE yo'q).

  1. <div class = "progress-chiziqli
  2. faol" >
  3. <div class = "bar"
  4. style = " width : 40 %; " ></div>
  5. </div>

Variantlar va brauzerni qo'llab-quvvatlash

Qo'shimcha ranglar

Rivojlanish satrlari bir xil tugmachalardan va izchil uslublar uchun ogohlantirish sinflaridan foydalanadi.

Chiziqli barlar

Qattiq ranglarga o'xshab, bizda turli xil chiziqli progress barlari mavjud.

Xulq-atvor

Rivojlanish satrlari CSS3 o'tishlarini ishlatadi, shuning uchun javascript orqali kenglikni dinamik ravishda sozlasangiz, u silliq o'lchamini o'zgartiradi.

Agar siz .activesinfdan foydalansangiz, .progress-stripedmuvaffaqiyat satrlaringiz chiziqlarni chapdan o'ngga jonlantiradi.

Brauzerni qo'llab-quvvatlash

Taraqqiyot satrlari barcha effektlarga erishish uchun CSS3 gradientlari, o'tishlari va animatsiyalaridan foydalanadi. Bu funksiyalar IE7-9 yoki Firefoxning eski versiyalarida qo‘llab-quvvatlanmaydi.

Opera va IE hozirda animatsiyalarni qo'llab-quvvatlamaydi.

Quduqlar

Quduqni elementga oddiy effekt sifatida kiritib, unga qo'shimcha effekt berish uchun foydalaning.

Mana, men quduqdaman!
  1. <div class = "yaxshi" >
  2. ...
  3. </div>

Yopish belgisi

Modallar va ogohlantirishlar kabi kontentni yopish uchun umumiy yopish belgisidan foydalaning.

  1. <button class = "yopish" > × </button>

Agar langardan foydalansangiz, iOS qurilmalari bosish hodisalari uchun href="#" belgisini talab qiladi.

  1. <a class = "close" href = "#" > × </a>