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:

Chapga O'rta To'g'ri

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Asboblar paneli misoli

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</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 »

Oldindan qisqa ma'lumot berish

Tugma guruhlari uchun CSS alohida faylda, button-groups.less.

Ochiladigan tugmalar

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

Oldindan qisqa ma'lumot berish! Ochiladigan tugmachalar ishlashi uchun Bootstrap ochiladigan plagin talab qilinadi .

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Harakat
    <span class = "caret" ></span> 
  </a>
  <ul class = "ochiladigan menyu" > 
    <!-- ochiladigan menyu havolalari -->
  </ul>
</div>

Ochiladigan tugmachalarni ajratish

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.

Belgilash misoli

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Harakat </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "ochiladigan menyu" > 
    <!-- ochiladigan menyu havolalari -->
  </ul>
</div>

Yengil vaznli standart qiymatlar Bir xil belgilash, turli sinflar

Kuchli asosiy sinf

Bu yerdagi barcha nav komponentlari - yorliqlar, tabletkalar va ro'yxatlar - sinf orqali bir xil asosiy belgilar va uslublarni baham ko'radi ..nav

Qachon foydalanish kerak

Yorliqlar va tabletkalar kontentning bo'limlari yoki tegishli kontent sahifalari o'rtasida navigatsiya qilish uchun juda yaxshi.

Komponentlarni tekislash

Navigatsiya havolalarini tekislash uchun .pull-leftyoki .pull-rightyordamchi dastur sinflaridan foydalaning. Ikkala sinf ham belgilangan yo'nalishda CSS floatini qo'shadi.

Asosiy yorliqlar

Muntazam <ul>havolalarni oling va qo'shing .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li sinf = "faol" > 
    <a href = "#" > Bosh sahifa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Asosiy tabletkalar

Xuddi shu HTMLni oling, lekin .nav-pillso'rniga foydalaning:

<ul class = "nav nav-pills" > 
  <li sinf = "faol" > 
    <a href = "#" > Bosh sahifa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stackable Yorliqlar yoki tabletkalarni vertikal holga keltiring

Ularni qanday yig'ish kerak

Yorliqlar va tabletkalar sukut bo'yicha gorizontal bo'lganligi .nav-stackedsababli, ularni vertikal ravishda yig'ilgan ko'rinishi uchun ikkinchi sinf qo'shing.

Yigʻilgan varaqlar

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Birlashtirilgan tabletkalar

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Ochiladiganlar Kengaytirilgan nav komponentlari uchun

Boy menyular osonlashtirildi

Bootstrap yorliqlari va tabletkalaridagi ochiladigan menyular juda oson va bir oz qo'shimcha HTML va engil jQuery plaginini talab qiladi.

Bootstrap -da ochiladigan menyularni ishga tushirish bo'yicha hujjatlarni o'qish uchun Javascript sahifasiga o'ting .

Ochiladigan yorliqlar

<ul class = "nav nav-tabs" > 
  <li sinf = "ochiladigan" > 
    <a class = "ochiladigan pastga o'tish" 
       data-toggle = "ochiladigan"
       href = "#" >
        Ochiladigan ro'yxat
        <b class = "caret" >> </b> 
      </a>
    <ul class = "ochiladigan menyu" > 
      <!-- havolalar -->
    </ul>
  </li>
</ul>

Ochiladigan tabletkalar

<ul class = "nav nav-pills" > 
  <li sinf = "ochiladigan" > 
    <a class = "ochiladigan pastga o'tish" 
       data-toggle = "ochiladigan"
       href = "#" >
        Ochiladigan ro'yxat
        <b class = "caret" >> </b> 
      </a>
    <ul class = "ochiladigan menyu" > 
      <!-- havolalar -->
    </ul>
  </li>
</ul>

Nav ro'yxatlari Yon panellar uchun juda mos bo'lgan oddiy stacked nav'larni yarating

Ilova uslubidagi navigatsiya

Nav ro'yxatlari ixtiyoriy sarlavhalar bilan navbatma-navbat havolalari guruhlarini yaratishning oddiy va oson usulini taqdim etadi. Ular eng yaxshi OS X da Finder kabi yon panellarda ishlatiladi.

Strukturaviy jihatdan, ular yorliqlar va tabletkalar kabi bir xil asosiy nav uslublari asosida qurilgan, shuning uchun ulardan foydalanish va sozlash oson.

Belgilar bilan

Nav ro'yxatlarini piktogramma bilan jihozlash ham oson. Sinf bilan tegishli <i>tegni qo'shing va siz o'rnatdingiz.

Navigatsiya ro'yxatiga misol

Havolalar ro'yxatini oling va qo'shing class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Roʻyxat sarlavhasi
  </li>
  <li sinf = "faol" > 
    <a href = "#" > Bosh sahifa </a> 
  </li>
  <li>
    <a href = "#" > Kutubxona </a> 
  </li>
  ...
</ul>

Belgilar bilan misol

Xuddi shu misol, lekin <i>piktogramma uchun teglar bilan.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Kutubxona
    </a>
  </li>
  ...
</ul>

Tabbable nav Javascript orqali yorliqlarni jonlantiring

Nima kiritilgan

Yorliqlar orqali kontentni almashtirish uchun oddiy plagin yordamida yorliqlaringizni jonlantiring. Bootstrap to'rtta uslubdagi yorliqlarni birlashtiradi: yuqori (standart), o'ng, pastki va chap.

Ularni o'zgartirish oson va faqat juda oz belgilarni o'zgartirishni talab qiladi.

Tabbable misol

.nav-tabsYorliqlarni tab bo'ladigan qilish uchun class bilan boshqa divga o'rang .tabbable.

Men 1-bo'limdaman.

Salom, men 2-bo'limdaman.

Nima qizim, bu 3-bo'lim.

Maxsus jQuery plagini

Barcha tabbable yorliqlari bizning engil jQuery plaginimiz tomonidan quvvatlanadi. Javascript docs sahifasida tabbable yorliqlarini qanday jonlantirish haqida ko'proq o'qing.

Javascriptni oling →

To'g'ridan-to'g'ri belgilash

Tabbable yorliqlarini ishlatish uchun o'rash div, yorliqlar to'plami va tabbable kontent panellari to'plami talab qilinadi.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > 1-bo‘lim </a></li>   
    <li><a href = "#2" data-toggle = "tab" > 2-bo‘lim </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Men 1-bo‘limdaman. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Assalomu alaykum, men 2-bo'limdaman. </p>
    </div>
  </div>
</div>

Har qanday yo'nalishda tabbable

Pastki qismida yorliqlar

HTML tartibini aylantiring va pastki qismga yorliqlarni qo'yish uchun sinf qo'shing.

Men A bo'limidaman.

Salom, men B bo'limidaman.

Qizim, bu C bo'limi.

<div class = "tabbable tab-past" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Chapdagi yorliqlar

Chapdagi yorliqlarni qo'yish uchun sinfni almashtiring.

Men A bo'limidaman.

Salom, men B bo'limidaman.

Qizim, bu C bo'limi.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

O'ngdagi yorliqlar

O'ngdagi yorliqlarni qo'yish uchun sinfni almashtiring.

Men A bo'limidaman.

Salom, men B bo'limidaman.

Qizim, bu C bo'limi.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Statik navbarga misol

Loyiha nomi, navigatsiya va qidiruv shakliga ega statik (yuqoriga mahkamlanmagan) navigatsiya paneliga misol.

Navbar iskala

Navbar statik yoki qattiq displey uchun uni yaxshi tuzish uchun bir nechta divlarni talab qiladi.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteyner" > 
      ...
    </div>
  </div>
</div>

Ruxsat etilgan navbar

Navbarni ko'rish oynasining yuqori qismiga mahkamlash uchun .navbar-fixed-topeng tashqi divga qo'shing, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

CSS-da siz 40px yoki undan ko'proq to'ldirishni qo'shish orqali yuzaga keladigan o'zaro bog'liqlikni hisobga olishingiz kerak bo'ladi <body>. Buni asosiy Bootstrap CSS-dan keyin va ixtiyoriy javob beruvchi CSS-dan oldin qo'shganingizga ishonch hosil qiling.

Brendning nomi

Brend yoki loyiha nomini ko'rsatish uchun oddiy havola faqat langar tegini talab qiladi.

<a class = "brend" href = "#" >  
  Loyiha nomi
</a>

Qidiruv shakli

.navbar-searchQidiruv shakllari sinf bilan navbarda maxsus uslublarni oladi . Uni tekislash uchun qo'shing .pull-leftyoki .pull-rightustiga qo'ying.form

<forma sinfi = "navbar-search pull-left" > 
  <kiritish turi = "matn" sinfi = "qidiruv so'rovi" to'ldiruvchisi = "Qidiruv" >   
</form>

Ixtiyoriy javob beruvchi oʻzgarish

Yuqori panelingizdagi kontent miqdoriga qarab, sezgir variantlarni qo'llashingiz mumkin. Buning uchun nav kontentingizni div, ni o'z ichiga olgan faylga o'rang .nav-collapse.collapseva navbarni o'zgartirish tugmachasini qo'shing .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteyner" > 
 
      <!-- .btn-navbar yopilgan navbar tarkibini o'zgartirish tugmasi sifatida ishlatiladi -->
      <a class = "btn btn-navbar" data-toggle = "qulash" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Brendni ko'rsatmoqchi bo'lsangiz, u erda qoldiring -->
      <a class = "brand" href = "#" > Loyiha nomi </a>  
 
      <!-- 940px yoki undan kamroq oʻlchamda yashiringan barcha narsani shu yerga joylashtiring -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-qidiruv, .navbar-form, va hokazo -->
      </div>
 
    </div>
  </div>
</div>

Oldindan qisqa ma'lumot berish! Javob beruvchi navbar siqilish plaginini talab qiladi .

Nav havolalari

Nav elementlarini tartibsiz ro'yxatlar orqali qo'shish oson.

<ul class = "nav" > 
  <li sinf = "faol" > 
    <a href = "#" > Bosh sahifa </a> 
  </li>
  <li><a href = "#" > Havola </a></li> 
  <li><a href = "#" > Havola </a></li> 
</ul>

Siz bo'sh ro'yxat elementi va oddiy sinf bilan navigatsiya havolalariga osongina ajratuvchilar qo'shishingiz mumkin. Buni havolalar orasiga qo'shing:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Komponentlarni tekislash

Nav, qidiruv shakli yoki matnni tekislash uchun .pull-leftyoki .pull-rightyordamchi dastur sinflaridan foydalaning. Ikkala sinf ham belgilangan yo'nalishda CSS floatini qo'shadi.

Ochiladigan menyularni qo'shish

Navigatsiyaga ochiladigan menyularni qo'shish juda oddiy, ammo bizning javascript plaginimizdan foydalanishni talab qiladi .

<ul class = "nav" > 
  <li sinf = "ochiladigan" > 
    <a href = "#" 
          class = "ochiladigan pastga o'tish"
          data-toggle = "ochiladigan" >
          Hisob
          <b class = "caret" >> </b> 
    </a>
    <ul class = "ochiladigan menyu" > 
      ...
    </ul>
  </li>
</ul>

Javascriptni oling →

Nima uchun ulardan foydalanish kerak

Breadcrumb navigatsiyasi foydalanuvchilarga ilova yoki sayt ichida qaerdaligini ko'rsatish usuli sifatida ishlatiladi, lekin asosiy navigatsiya uchun emas. Eng samarali bo'lishi uchun ulardan foydalanishni siyrak va qisqacha saqlang.

Misollar

Bitta misol ko'rsatilgan, chunki u bir nechta sahifalarda ko'rsatilishi mumkin.

Belgilash

HTML - havolalar bilan standart tartibsiz ro'yxat.

<ul class = "non crumb" > 
  <li>
    <a href = "#" > Bosh sahifa </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Kutubxona </a> <span class = "divider" > / </span>   
  </li>
  <li sinf = "faol" > 
    <a href = "#" > Ma'lumotlar </a> 
  </li>
</ul>

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

<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 Tez oldingi va keyingi havolalar uchun

Peyjer haqida

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

Standart misol

Odatiy bo'lib, peyjer havolalarni markazlashtiradi.

<ul class = "pager" > 
  <li>
    <a href = "#" > Oldingi </a> 
  </li>
  <li>
    <a href = "#" > Keyingi </a> 
  </li>
</ul>

Tegishli havolalar

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

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:

<div class = "qahramon-birlik" > 
  <h1> Sarlavha </h1>
  <p> Taglik </p>
  <p>
    <a sinf = "btn btn-asosiy btn-katta" > 
      Ko'proq ma'lumot olish
    </a>
  </p>
</div>

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

Sahifa sarlavhasi

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

<div class = "page-haeder" > 
  <h1> Misol sahifa sarlavhasi </h1>
</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 :

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

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.

<div class = "ogohlantirish" > 
  <a class = "yopish" data-dississ = "alert" > × </a>  
  <strong> Ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz.
</div>

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.

<div class = "alert alert-block" > 
  <a class = "yopish" data-dississ = "alert" > × </a>  
  <h4 class = "alert-heading" > Ogohlantirish! </h4> 
  O'zingizni tekshirib ko'ring, siz ...
</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.

<div class = "alert alert-error" > 
  ...
</div>

Muvaffaqiyat

× Barakalla! Siz ushbu muhim ogohlantirish xabarini muvaffaqiyatli o'qidingiz.

<div class = "alert alert-muvaffaqiyat" > 
  ...
</div>

Ma `lumot

× Oldindan qisqa ma'lumot berish! Bu ogohlantirish eʼtiboringizni talab qiladi, lekin bu juda muhim emas.

<div class = "alert alert-info" > 
  ...
</div>

Misollar va belgilar

Asosiy

Vertikal gradientli standart taraqqiyot paneli.

<div class = "progress" > 
  <div class = "bar" 
       style = " width : 60 %; " ></div> 
</div>

Chiziqli

Chiziqli effekt yaratish uchun gradientdan foydalanadi.

<div class = "progress progress-info 
     progress-chiziqli" >
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

Animatsiyalangan

Chiziqli misolni oladi va uni jonlantiradi.

<div class = "progress progress-xavf 
     progress-chiziqli faol" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Variantlar va brauzerni qo'llab-quvvatlash

Qo'shimcha ranglar

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.

Xulq-atvor

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

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

Brauzerni qo'llab-quvvatlash

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.

Quduqlar

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

Mana, men quduqdaman!

<div class = "yaxshi" > 
  ...
</div>

Belgilar

Elementdagi nishondan oʻqilmagan hisob yoki oddiy koʻrsatkich sifatida foydalaning.

<span class = "belgi" > 3 </div>

Yopish belgisi

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

<a class = "yopish" > × </a>

Tugmalar guruhlari Ko'proq asboblar paneliga o'xshash funksiyalar uchun qo'shilish tugmalari

Tugmalar guruhlari

Eng yaxshi amaliyotlar

Standart misol

Asboblar paneli misoli

Belgilash qutisi va radio lazzatlari

Oldindan qisqa ma'lumot berish

Tugmalar ochiladigan menyulari Tugma guruhlari asosida tuzilgan kontekstli ochiladigan menyular

Ochiladigan tugmalar

Belgilash misoli

Ochiladigan tugmachalarni ajratish

Belgilash misoli

Nav, yorliqlar va tabletkalar Yuqori darajada moslashtirilgan ro'yxat uslubidagi navigatsiya

Yengil vaznli standart qiymatlar Bir xil belgilash, turli sinflar

Kuchli asosiy sinf

Qachon foydalanish kerak

Komponentlarni tekislash

Asosiy yorliqlar

Asosiy tabletkalar

Stackable Yorliqlar yoki tabletkalarni vertikal holga keltiring

Ularni qanday yig'ish kerak

Yigʻilgan varaqlar

Birlashtirilgan tabletkalar

Ochiladiganlar Kengaytirilgan nav komponentlari uchun

Boy menyular osonlashtirildi

Ochiladigan yorliqlar

Ochiladigan tabletkalar

Nav ro'yxatlari Yon panellar uchun juda mos bo'lgan oddiy stacked nav'larni yarating

Ilova uslubidagi navigatsiya

Belgilar bilan

Navigatsiya ro'yxatiga misol

Belgilar bilan misol

Tabbable nav Javascript orqali yorliqlarni jonlantiring

Nima kiritilgan

Tabbable misol

Maxsus jQuery plagini

To'g'ridan-to'g'ri belgilash

Har qanday yo'nalishda tabbable

Pastki qismida yorliqlar

Chapdagi yorliqlar

O'ngdagi yorliqlar

Navbar

Statik navbarga misol

Navbar iskala

Ruxsat etilgan navbar

Brendning nomi

Qidiruv shakli

Ixtiyoriy javob beruvchi oʻzgarish

Nav havolalari

Komponentlarni tekislash

Ochiladigan menyularni qo'shish

Non bo'laklari

Nima uchun ulardan foydalanish kerak

Misollar

Belgilash

Sahifalash Kontent orqali sahifalashning ikkita varianti

Ko'p sahifali sahifalash

Qachon foydalanish kerak

Statusli sahifa havolalari

Moslashuvchan tekislash

Misollar

Belgilash

Peyjer Tez oldingi va keyingi havolalar uchun

Peyjer haqida

Standart misol

Tegishli havolalar

Inline teglar Yorliq va matnga izoh

Tipografik komponentlar Sahifa sarlavhasi va tarkibni segmentlash uchun qahramon birligi

Qahramon birligi

Belgilash

Salom Dunyo!

Sahifa sarlavhasi

Eskizlar Tasvirlar, videolar, matnlar va boshqalar

Birlamchi eskizlar

Yuqori darajada moslashtirilgan

Eskiz yorlig‘i

Eskiz yorlig‘i

Nima uchun eskizlardan foydalanish kerak

Oddiy, moslashuvchan belgilash

To'r ustun o'lchamlaridan foydalanadi