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:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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 »

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.

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

Oʻlchamlar uchun qoʻshimcha tugma sinfi .btn-mini, .btn-small, yoki foydalaning..btn-large

<div class = "btn-group" > 
  ...
  <ul class = "ochiladigan menyuni o'ngga tortish" > 
    <!-- ochiladigan menyu havolalari -->
  </ul>
</div>

Belgilash misoli

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

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

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

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

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

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.

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>

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 yoki pastki qismiga eng tashqi divda qo'shimcha sinf bilan o'rnating, .navbar.

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

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

Navbarni o'rnatganingizda, ostidagi yashirin maydonni hisobga olishni unutmang. ga 40px yoki undan koʻproq qoʻshing <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>

Navbardagi 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" >  
</form>

Ko'proq moslashtirilgan qidiruv shakli .navbar-searchuchun navbarda maxsus uslublarni olish uchun sinfni qo'shing.

<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 boshqalar -->
      </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 va ochiladigan oynalarni qo'shish juda oddiy, ammo 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 →

Navbardagi matn

<p>To'g'ri boshlanish va rang berish uchun matn qatorlarini tegga o'rang .

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

<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>`
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>`
Xato	6	`<span class="badge badge-error">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:

<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 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 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 = "sahifa sarlavhasi" > 
  <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 (IE yo'q).

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

Animatsiyalangan

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

<div class = "progress-chiziqli 
     faol" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</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!

<div class = "yaxshi" > 
  ...
</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

Tugmalar guruhlarida ochiladigan menyular

Tugma ochiladigan menyular Kontekst menyularini taqdim etish uchun tugmalar guruhlari asosida qurilgan

Ochiladigan tugmalar

Umumiy ko'rinish va misollar

Belgilash misoli

Barcha tugma o'lchamlari bilan ishlaydi

Javascriptni talab qiladi

Ochiladigan tugmachalarni ajratish

Umumiy ko'rinish va misollar

O'lchamlari

Belgilash misoli

Ochiladigan menyular

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

Gorizontal ajratgichlar

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

Navbardagi shakllar

Ixtiyoriy javob beruvchi oʻzgarish

Nav havolalari

Komponentlarni tekislash

Ochiladigan menyularni qo'shish

Navbardagi matn

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

Ixtiyoriy o'chirilgan holat

Standart misol

Tegishli havolalar

Inline teglar Yorliq va matnga izoh

Belgilar Ko'rsatkichlar va o'qilmagan raqamlar

Haqida

Mavjud sinflar

Tipografik komponentlar Sahifa sarlavhasi va tarkibni segmentlash uchun qahramon birligi