Misol

Havolalar ro'yxatini ko'rsatish uchun almashtiriladigan, kontekstli menyu. Ochiladigan JavaScript plagini bilan interaktiv qilingan .

<ul class = "ochiladigan menyu" roli = "menyu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Harakat </a></li>  
  <li><a tabindex = "-1" href = "#" > Boshqa amal </a></li>  
  <li><a tabindex = "-1" href = "#" > Bu yerda boshqa narsa </a></li>  
  <li class = "bo'luvchi" ></li> 
  <li><a tabindex = "-1" href = "#" > Ajratilgan havola </a></li>  
</ul>

Belgilash

Faqat ochiladigan menyuga qarab, bu erda kerakli HTML. Siz ochiladigan ro'yxatning triggerini va ochiladigan menyuni .dropdownyoki ni e'lon qiladigan boshqa elementni o'rashingiz kerak position: relative;. Keyin shunchaki menyu yarating.

<div class = "ochiladigan" > 
  <!-- Ochiladigan menyuni almashtirish uchun havola yoki tugma -->
  <ul class = "ochiladigan menyu" roli = "menyu" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Harakat </a></li>  
    <li><a tabindex = "-1" href = "#" > Boshqa amal </a></li>  
    <li><a tabindex = "-1" href = "#" > Bu yerda boshqa narsa </a></li>  
    <li class = "bo'luvchi" ></li> 
    <li><a tabindex = "-1" href = "#" > Ajratilgan havola </a></li>  
  </ul>
</div>

Variantlar

Menyularni o'ngga tekislang va qo'shimcha ochiladigan menyu darajalarini qo'shing.

Menyularni tekislash

Ochiladigan .pull-rightmenyuni .dropdown-menuo'ngga tekislang.

<ul class = "dropdown-menu pull-o'ng" roli = "menyu" aria- labelledby = "dLabel" >   
  ...
</ul>

O'chirilgan menyu parametrlari

Havolani o'chirish uchun ochiladigan .disabledro'yxatdagi a ga qo'shing .<li>

<ul class = "ochiladigan menyu" roli = "menyu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Oddiy havola </a></li>  
  <li class = "diabled" ><a tabindex = "-1" href = "#" > O‘chirilgan havola </a></li>   
  <li><a tabindex = "-1" href = "#" > Boshqa havola </a></li>  
</ul>

Ochiladigan menyuda pastki menyular

Ba'zi oddiy belgilash qo'shimchalari bilan OS X kabi kursorda paydo bo'ladigan ochiladigan menyularning qo'shimcha darajasini qo'shing. Avtomatik uslublash uchun mavjud ochiladigan menyudan .dropdown-submenuistalganiga qo'shing .li

<ul class = "ochiladigan menyu" roli = "menyu" aria- labelledby = "dLabel" >   
  ...
  <li class = "ochiladigan pastki menyu" > 
    <a tabindex = "-1" href = "#" > Boshqa variantlar </a>  
    <ul class = "ochiladigan menyu" > 
      ...
    </ul>
  </li>
</ul>

Misollar

Yana ikkita o'ziga xos o'zgarishlar bilan birga ikkita asosiy variant.

Yagona tugmalar guruhi

.btnbilan bir qator tugmalarni o'rang .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Chap </button> 
  <button class = "btn" > O'rta </button> 
  <button class = "btn" > O‘ng </button> 
</div>

Bir nechta tugma guruhlari

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>

Vertikal tugma guruhlari

Tugmalar to'plamini gorizontal emas, balki vertikal ravishda yig'ilgan qilib ko'ring.

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

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

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.

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

Barcha tugma o'lchamlari bilan ishlaydi

Ochiladigan tugmalar har qanday hajmda ishlaydi: .btn-large, .btn-small, yoki .btn-mini.

JavaScript 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

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.

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

O'lchamlari

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Harakat </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "ochiladigan pastga" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ochiladigan menyu" > 
    <!-- ochiladigan menyu havolalari -->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ochiladigan menyu" > 
    <!-- ochiladigan menyu havolalari -->
  </ul>
</div>

Yengil vaznli standart qiymatlar Bir xil belgilash, turli sinflar

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

Asosiy yorliqlar

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

O'chirilgan holat

Har qanday navbat komponenti (yorliqlar, tabletkalar yoki roʻyxat) .disableduchun kulrang havolalar qoʻshing va hover effektlari yoʻq . Atributni olib tashlamaguningizcha, havolalar bosilishi mumkin bo'lib qoladi href. Shu bilan bir qatorda, ushbu bosishlarning oldini olish uchun maxsus JavaScript-ni qo'llashingiz mumkin.

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

Komponentlarni tekislash

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

Yig'ib olinadigan

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>

Ochiladigan menyular

Bir oz qo'shimcha HTML va ochiladigan menyular JavaScript plagini bilan ochiladigan menyularni qo'shing .

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

Ixtiyoriy sarlavhalar bilan navigatsiya havolalari guruhlarini yaratishning oddiy va oson usuli. Ular eng yaxshi OS X da Finder kabi yon panellarda ishlatiladi.

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 class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li><a href = "#" > Kutubxona </a></li> 
  ...
</ul>

EslatmaNav ro'yxatiga joylashtirish uchun class="nav nav-list"har qanday ichki o'rnatilgan ga qo'shing <ul>.

Gorizontal ajratgichlar

Class bilan bo'sh ro'yxat elementini yaratish orqali gorizontal bo'luvchi qo'shing .divider, masalan:

<ul class = "nav nav-list" > 
  ...
  <li class = "bo'luvchi" ></li> 
  ...
</ul>

Tabbable nav

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

Tabbable misol

Yorliqlarni yorliqli qilish .tab-paneuchun har bir varaq uchun noyob identifikatorni yarating va ularni ichiga oʻrang .tab-content.

<div class = "tabbable" > <!-- Faqat chap/o'ng yorliqlar uchun kerak -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > 1-bo‘lim </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2-bo‘lim </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Men 1-bo‘limdaman. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Assalomu alaykum, men 2-bo'limdaman. </p>
    </div>
  </div>
</div>

Yorliqlarda o'ch

Yorliqlarni .fadeoʻchirish uchun har biriga qoʻshing .tab-pane.

jQuery plaginini talab qiladi

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

Har qanday yo'nalishda tabbable

Pastki qismida yorliqlar

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

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

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

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

Asosiy navbar

Boshlash uchun navbarlar statik (tepaga mahkamlanmagan) va loyiha nomi va asosiy navigatsiyani qo'llab-quvvatlaydi. .containerSaytingiz va kontentingiz kengligini belgilaydigan a ichida istalgan joyga joylashtiring .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Sarlavha </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
      <li><a href = "#" > Havola </a></li> 
      <li><a href = "#" > Havola </a></li> 
    </ul>
  </div>
</div>

Navbar komponentlari

Brend

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

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

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>

Shakllar

Shaklni navbarda to'g'ri shakllantirish va joylashtirish uchun quyida ko'rsatilgandek tegishli sinflarni qo'shing. Standart shakl uchun uni toʻgʻri tekislash uchun .navbar-formyoki .pull-leftyoki yoki qoʻshing..pull-right

<forma sinfi = "navbar-form pull-left" > 
  <kiritish turi = "matn" sinfi = "span2" >  
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Qidiruv shakli

Ko'proq moslashtirilgan qidiruv shakli uchun navigatsiya panelidagi maxsus uslublar uchun .navbar-searchva formkiritishga qo'shing..search-query

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

Komponentlarni tekislash

Navigatsiya havolalarini, qidiruv shaklini yoki matnni tekislang, .pull-leftyoki .pull-rightyordamchi dasturlardan foydalaning. Ikkala sinf ham belgilangan yo'nalishda CSS floatini qo'shadi.

Ochiladigan menyulardan foydalanish

Bir oz belgilash va ochiladigan menyular JavaScript plagini bilan navga ochiladigan va ochiladigan oynalarni qo'shing .

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

Qo'shimcha belgilash va qo'ng'iroq qilish uchun ochiladigan ro'yxatlar haqida ma'lumot olish uchun JavaScript ochiladigan hujjatlarga tashrif buyuring .

Matn

Matn satrlarini elementga oʻrash .navbar-text, odatda <p>toʻgʻri boshlanish va rang berish uchun tegga.

Ixtiyoriy displey o'zgarishlari

Navbarni ko'rish oynasining yuqori yoki pastki qismiga eng tashqi divda qo'shimcha sinf bilan o'rnating, .navbar.

Yuqoriga mahkamlangan

.navbar-fixed-topga kamida 40px qo'shish orqali uning ostidagi yashirin maydonni qo'shing va hisobga paddingolishni unutmang <body>. Buni asosiy Bootstrap CSS-dan keyin va ixtiyoriy javob beruvchi CSS-dan oldin qo'shganingizga ishonch hosil qiling.

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

Pastki qismga mahkamlangan

.navbar-fixed-bottomBuning o'rniga qo'shing .

<div class = "navbar navbar-fiksed-pastki" > 
  ...
</div>

Statik yuqori navbar

ni qo'shish orqali sahifa bilan birga aylanib yuradigan to'liq kenglikdagi navigatsiya paneli yarating .navbar-static-top. Sinfdan farqli o'laroq .navbar-fixed-top, siz to'ldirishni o'zgartirishingiz shart emas body.

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

Javob beruvchi navbar

Yiqiluvchi sezgir navbarni amalga oshirish uchun navbar tarkibini o'z ichiga olgan div, ga o'rang .nav-collapse.collapseva navbarni almashtirish 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 qulashi" > 
        <!-- .nav, .navbar-qidiruv, .navbar-form va boshqalar -->
      </div>
 
    </div>
  </div>
</div>

Teskari o'zgaruvchanlik

ni qo'shish orqali navbarning ko'rinishini o'zgartiring .navbar-inverse.

<div class = "navbar navbar-teskari" > 
  ...
</div>

Misollar

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

<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 class = "faol" > Ma'lumotlar </li> 
</ul>

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.

<div class = "sahifalash" > 
  <ul>
    <li><a href = "#" > Oldingi </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 = "#" > Keyingi </a></li> 
  </ul>
</div>

Variantlar

O'chirilgan va faol holatlar

Havolalar turli holatlar uchun sozlanishi. .disabledBosib bo'lmaydigan havolalar va .activejoriy sahifani ko'rsatish uchun foydalaning .

<div class = "sahifalash" > 
  <ul>
    <li class = "o'chirilgan" ><a href = "#" > « </a></li>  
    <li class = "faol" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Siz ixtiyoriy ravishda faol yoki o‘chirilgan langarlarni mo‘ljallangan uslublarni saqlab qolgan holda bosish funksiyasini olib tashlash uchun oraliqlarga almashtirishingiz mumkin.

<div class = "sahifalash" > 
  <ul>
    <li class = "o'chirilgan" ><span> « </span></li> 
    <li sinf = "faol" ><span> 1 </span></li> 
    ...
  </ul>
</div>

O'lchamlari

Kattaroq yoki kichikroq sahifalashni xohlaysizmi? Qo'shimcha o'lchamlar uchun .pagination-large, .pagination-small, yoki qo'shing ..pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sahifalash" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Hizalama

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

<div class = "pagination-markazlangan sahifalash" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Peyjer

Yengil belgilar va uslublar bilan oddiy sahifalash ilovalari uchun tezkor oldingi va keyingi havolalar. Bu 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>

Ixtiyoriy o'chirilgan holat

Peyjer havolalari, shuningdek, sahifalashdan umumiy .disabledyordamchi sinfdan foydalanadi.

<ul class = "pager" > 
  <li class = "oldingi o'chirilgan" > 
    <a href = "#" > ← Kattaroq </a> 
  </li>
  ...
</ul>

Yorliqlar

Belgilar

Oson yig'iladigan

Oson amalga oshirish uchun yorliqlar va nishonlar shunchaki yiqilib tushadi (CSS :emptyselektori orqali) ichida kontent mavjud emas.

Qahramon birligi

Saytingizdagi asosiy tarkibni namoyish qilish uchun engil, moslashuvchan komponent. U marketing va kontentga boy saytlarda yaxshi ishlaydi.

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

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.

<div class = "sahifa sarlavhasi" > 
  <h1> Misol sahifa sarlavhasi <small> Sarlavha uchun pastki matn </small></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.

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 = "span4" > 
    <a href = "#" class = "eskiz" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "eskiz" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Eskiz yorlig'i </h3>
      <p> Eskiz sarlavhasi... </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.

Birlamchi ogohlantirish

.alertAsosiy ogohlantirish xabari uchun har qanday matnni va ixtiyoriy o'chirish tugmasini o'rang .

<div class = "ogohlantirish" > 
  <button type = "tugma" klassi = "yopish" data-disiss = "ogohlantirish" > × </button>   
  <strong> Ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz.
</div>

Yopish tugmalari

Mobil Safari va Mobile Opera brauzerlari, atributga qo'shimcha ravishda, tegdan foydalanishda ogohlantirishlarni o'chirishni talab data-dismiss="alert"qiladi .href="#"<a>

<a href = "#" class = "yopish" data-dississ = "alert" > × </a>   

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.

<button type = "tugma" klassi = "yopish" data-disiss = "ogohlantirish" > × </button>   

JavaScript orqali ogohlantirishlarni o'chirish

Ogohlantirishlarni tez va oson o'chirish uchun ogohlantirish jQuery plaginidan foydalaning .

Variantlar

Uzunroq xabarlar uchun ogohlantirish oʻramining yuqori va pastki qismidagi toʻldirishni qoʻshish orqali oshiring .alert-block.

<div class = "alert alert-block" > 
  <button type = "tugma" klassi = "yopish" data-disiss = "ogohlantirish" > × </button>   
  <h4> Ogohlantirish! </h4>
  O'zingizni tekshirib ko'ring, siz ...
</div>

Kontekstli alternativalar

Ogohlantirish ma'nosini o'zgartirish uchun ixtiyoriy sinflarni qo'shing.

Xato yoki xavf

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

Muvaffaqiyat

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

Ma `lumot

<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. IE7-8 da mavjud emas.

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

Animatsiyalangan

Chiziqlarni o'ngdan chapga jonlantirish uchun .activeqo'shing . .progress-stripedIE ning barcha versiyalarida mavjud emas.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Yigʻilgan

Ularni joylashtirish uchun bir nechta barlarni bir xil .progressjoyga qo'ying.

<div class = "progress" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Variantlar

Qo'shimcha ranglar

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-muvaffaqiyat" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-ogohlantirish" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Chiziqli barlar

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-muvaffaqiyat progress-chiziqli" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-ogohlantirish progress-chiped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-xavfli taraqqiyot-chiziqli" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Internet Explorer 10 va Opera 12 dan oldingi versiyalar animatsiyalarni qo'llab-quvvatlamaydi.

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 misol

Standart media media ob'ektini (tasvirlar, video, audio) kontent blokining chap yoki o'ng tomoniga surish imkonini beradi.

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.

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.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media sarlavhasi </h4> 
    ...
 
    <!-- Ichki media obyekti -->
    <div class = "media" > 
      ...
    </div>
  </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).

<ul class = "media-list" > 
  <li sinf = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media sarlavhasi </h4> 
      ...
 
      <!-- Ichki media obyekti -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Quduqlar

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

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

Majburiy emas darslar

Ikkita ixtiyoriy modifikator sinfiga ega bo'lgan to'ldirish va yumaloq burchaklarni boshqarish.

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

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

Yopish belgisi

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

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

href="#"Agar siz langardan foydalanmoqchi bo'lsangiz, iOS qurilmalari klik uchun hodisalarni talab qiladi .

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

Yordamchi sinflar

Kichik displey yoki xatti-harakatni o'zgartirish uchun oddiy, yo'naltirilgan sinflar.

.chapga torting

Elementni chapga siljiting

sinf = "chapga torting"

. chapga tortish { _
  float : chap ;
}

.o‘ngga torting

Elementni o‘ngga surish

sinf = "o'ngga tortish"

. o'ngga torting { _
  float : o'ng ;
}

.oʻchirilgan

Element rangini ga o'zgartiring#999

sinf = "o'chirilgan"

. ovozsiz {
  rang : #999; 
}

.clearfix

floatHar qanday elementni tozalang

sinf = "tozalash"

. aniq tuzatish {
  * masshtablash : 1 ; 
  &: oldin ,
  &: { keyin
    displey : jadval ;
    tarkib : "" ; 
  }
  &: { keyin
    aniq : ikkalasi ham ;
  }
}