Navigatsiya, ogohlantirishlar, popoverlar va boshqa ko'p narsalarni ta'minlash uchun o'nlab qayta ishlatiladigan komponentlar Bootstrap-ga o'rnatilgan.
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.
Havolalar sozlanishi va bir qator sharoitlarda kerakli sinf bilan ishlaydi. .disabled
bosilmaydigan havolalar va .active
joriy sahifa uchun.
Sahifalar havolalarining hizalanishini o'zgartirish uchun ikkita ixtiyoriy sinfdan birini qo'shing: .pagination-centered
va .pagination-right
.
Standart sahifalash komponenti moslashuvchan va bir qator o'zgarishlarda ishlaydi.
O'ralgan <div>
, sahifalash faqat bir <ul>
.
- <div class = "sahifalash" >
- <ul>
- <li><a href = "#" > Oldingi </a></li>
- <li sinf = "faol" >
- <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 = "#" > Keyingi </a></li>
- </ul>
- </div>
Peyjer komponenti engil belgilar va hatto engilroq uslublar bilan oddiy sahifalash ishlari uchun havolalar to'plamidir. Bloglar yoki jurnallar kabi oddiy saytlar uchun juda yaxshi.
Odatiy bo'lib, peyjer havolalarni markazlashtiradi.
- <ul class = "pager" >
- <li>
- <a href = "#" > Oldingi </a>
- </li>
- <li>
- <a href = "#" > Keyingi </a>
- </li>
- </ul>
Shu bilan bir qatorda, har bir havolani yon tomonlarga tekislashingiz mumkin:
- <ul class = "pager" >
- <li sinf = "oldingi" >
- <a href = "#" > ← Kattaroq </a>
- </li>
- <li sinf = "keyingi" >
- <a href = "#" > Yangiroq → </a>
- </li>
- </ul>
Yorliqlar | Belgilash |
---|---|
Standart | <span class="label">Default</span> |
Yangi | <span class="label label-success">New</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> |
Odatiy bo'lib, Bootstrap eskizlari minimal talab qilinadigan belgilar bilan bog'langan rasmlarni namoyish qilish uchun mo'ljallangan.
Bir oz qo'shimcha belgilash bilan, eskizlarga sarlavhalar, paragraflar yoki tugmalar kabi har qanday HTML kontentini qo'shish mumkin.
Eskizlar (ilgari .media-grid
1.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.
Eskizni belgilash oddiy - ul
istalgan sonli li
elementlarga 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.
Nihoyat, eskizlar komponenti eskiz o'lchamlarini boshqarish uchun mavjud bo'lgan tarmoq tizimi sinflaridan foydalanadi - shunga o'xshash .span2
yoki -..span3
Yuqorida aytib o'tilganidek, eskizlar uchun kerakli belgi engil va tushunarli. Bog'langan tasvirlar uchun standart sozlamalarni ko'rib chiqing :
- <ul class = "eskiz" >
- <li sinf = "span3" >
- <a href = "#" class = "eskiz" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Eskizlardagi maxsus HTML kontenti uchun belgilash biroz o'zgaradi. Blok darajasidagi kontentga istalgan joyda ruxsat berish <a>
uchun biz <div>
o'xshashni almashtiramiz:
- <ul class = "eskiz" >
- <li sinf = "span3" >
- <div class = "eskiz" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Eskiz yorlig'i </h5>
- <p> Eskiz sarlavhasi shu yerda... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2 bilan biz asosiy sinfni soddalashtirdik: .alert
o'rniga .alert-message
. Biz minimal talab qilinadigan belgilashni ham kamaytirdik <p>
— sukut bo'yicha yo'q, faqat tashqi belgi talab qilinadi <div>
.
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
.
Bootstrap ogohlantirish xabarlarini qo'llab-quvvatlaydigan ajoyib jQuery plaginiga ega bo'lib, ularni tez va oson o'chirish imkonini beradi.
Xabaringizni va ixtiyoriy yopish belgisini oddiy sinf bilan divga o'rang.
- <div class = "ogohlantirish" >
- <a class = "yopish" > × </a>
- <strong> Ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz.
- </div>
Standart ogohlantirish xabarini ikkita ixtiyoriy sinf bilan osongina kengaytiring: .alert-block
ko'proq to'ldirish va matn boshqaruvlari va .alert-heading
mos keladigan sarlavha uchun.
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.
- <div class = "alert alert-block" >
- <a class = "yopish" > × </a>
- <h4 class = "alert-heading" > Ogohlantirish! </h4>
- O'zingizni tekshirib ko'ring, siz ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-muvaffaqiyat" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Vertikal gradientli standart taraqqiyot paneli.
- <div class = "progress" >
- <div class = "bar"
- style = " width : 60 %; " ></div>
- </div>
Chiziqli effekt yaratish uchun gradientdan foydalanadi.
- <div class = "progress progress-info
- progress-chiziqli" >
- <div class = "bar"
- style = " width : 20 %; " ></div>
- </div>
Chiziqli misolni oladi va uni jonlantiradi.
- <div class = "progress progress-xavf
- progress-chiziqli faol" >
- <div class = "bar"
- style = " width : 40 %; " ></div>
- </div>
Rivojlanish satrlari o'xshash uslublar uchun tugmalar va ogohlantirishlar kabi bir xil sinf nomlaridan foydalanadi.
.progress-info
.progress-success
.progress-danger
Shu bilan bir qatorda, siz LESS fayllarini sozlashingiz va o'zingizning ranglaringiz va o'lchamlaringizni siljitishingiz mumkin.
Rivojlanish satrlari CSS3 o'tishlarini ishlatadi, shuning uchun javascript orqali kenglikni dinamik ravishda sozlasangiz, u silliq o'lchamini o'zgartiradi.
Agar siz .active
sinfdan foydalansangiz, .progress-striped
muvaffaqiyat satrlaringiz chiziqlarni chapdan o'ngga jonlantiradi.
Taraqqiyot satrlari barcha effektlarga erishish uchun CSS3 gradientlari, o'tishlari va animatsiyalaridan foydalanadi. Bu funksiyalar IE7-8 yoki Firefoxning eski versiyalarida qo‘llab-quvvatlanmaydi.
Opera hozirda animatsiyalarni qo'llab-quvvatlamaydi.
Quduqni elementga oddiy effekt sifatida kiritib, unga qo'shimcha effekt berish uchun foydalaning.
- <div class = "yaxshi" >
- ...
- </div>
Modallar va ogohlantirishlar kabi kontentni yopish uchun umumiy yopish belgisidan foydalaning.
- <a class = "yopish" > × </a>