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

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.

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.

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

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:

• Uy
• Profil
• Xabarlar

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

• Uy
• Profil
• Xabarlar

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

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

• Uy
• Profil
• Xabarlar

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

Birlashtirilgan tabletkalar

• Uy
• Profil
• Xabarlar

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

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

• Uy
• Yordam bering
• Ochiladigan ro'yxat
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Uy
• Yordam bering
• Ochiladigan ro'yxat
  • Action
  • Another action
  • Something else here
  • Separated link

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

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>

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.

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 docs sahifasida tabbable yorliqlarini qanday jonlantirish haqida ko'proq o'qing .

Javascriptni oling →

Tabbable misol

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

O'ngga yoki chapga tekislangan yorliqlar uchun .nav-tabsva .tab-contentni o'rang .tabbable.

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

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>

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 toʻldirish 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 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>

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>

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

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

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.

• Uy

• Bosh sahifa /
• Kutubxona

• Bosh sahifa /
• Kutubxona /
• Ma'lumotlar

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>

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

• Oldingi
• Keyingisi

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

• ← Kattaroq
• Yangiroq →

<ul class = "pager" > 
  <li sinf = "oldingi" > 
    <a href = "#" > ← Kattaroq </a> 
  </li>
  <li sinf = "keyingi" > 
    <a href = "#" > Yangiroq → </a> 
  </li>
</ul>

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

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>

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

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.

<div class = "ogohlantirish" > 
  <button class = "yopish" data-dississ = "alert" > × </button>  
  <strong> Ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz.
</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.

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

Xato yoki xavf

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

Muvaffaqiyat

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

Ma `lumot

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

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>

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.

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

Yopish belgisi

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

×

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

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

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