Компоненттер

Навигацияны, эскертүүлөрдү, поповерлерди жана башка көптөгөн нерселерди камсыз кылуу үчүн Bootstrap ичинде ондогон көп жолу колдонулуучу компоненттер орнотулган.

Баскыч топтору

Бир нече баскычтарды бир курама компонент катары бириктирүү үчүн баскыч топторун колдонуңуз. Аларды бир катар <a>же <button>элементтер менен куруңуз.

Сиз ошондой эле комплекстерди <div class="btn-group">бир <div class="btn-toolbar">кыйла татаал долбоорлорго бириктире аласыз.

Мисал белгилөө

HTML анкер тег баскычтары менен курулган стандарттуу баскычтар тобун кантип карайт:

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

Жана бир нече топтор үчүн куралдар панели менен:

<div класс = "btn-куралдар тилкеси" > 
  <div класс = "btn-group" > 
    ...
  </div>
</div>

Белгилөө кутучасы жана радио даамдары

Баскыч топтору бир гана баскыч активдүү болушу мүмкүн болгон радиолор же каалаган сандагы баскычтар активдүү болушу мүмкүн болгон белгилөө кутучалары катары да иштеши мүмкүн. Бул үчүн Javascript документтерин караңыз .

JavaScript алуу »

Башты көтөр

баскыч топтору үчүн CSS өзүнчө файлда, button-groups.less.

Түймөктүн ачылуучу тизмелери

Каалаган баскычты колдонуп, ылдый түшүүчү менюну а ичине жайгаштырып, .btn-groupменюнун туура белгилөөсүн камсыз кылыңыз.

Мисал белгилөө

Баскычтар тобуна окшоп, биздин белгилөөдө кадимки баскычтарды белгилөө колдонулат, бирок стилди тактоо жана Bootstrap'тин ачылуучу jQuery плагинин колдоо үчүн бир нече толуктоолор бар.

<div класс = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Акция
    <span class = "caret" ></span> 
  </a>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Баскыч тобунун стилдерине жана белгилөөсүнө таянып, биз оңой эле бөлүү баскычын түзө алабыз. Бөлүнүүчү баскычтар сол жактагы стандарттуу аракетти жана оң жакта контексттик шилтемелер менен ылдый түшүүчү баскычты камтыйт.

Мисал белгилөө

Биз өзүнчө ачылуучу триггер катары иштеген экинчи баскыч аракетин камсыз кылуу үчүн кадимки баскычтардын ачылуучу тизмелерин кеңейтебиз.

<div класс = "btn-group" > 
  <a class = "btn" href = "#" > Аракет </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Жеңил демейкилер Бир эле белгилөө, башка класстар

Күчтүү базалык класс

Бул жердеги бардык навигация компоненттери — өтмөктөр, таблеткалар жана тизмелер — класс аркылуу бирдей базалык белгилерди жана стилдерди бөлүшөт ..nav

Эмне үчүн таблеткалар жана таблеткалар

Bootstrap ичиндеги өтмөктөр жана таблеткалар бир <ul>эле негизги HTML, шилтемелердин тизмеси менен курулган. Таблеткаларды же таблеткаларды класс менен алмаштырыңыз.

Эки вариант тең мазмундун бөлүмчөлөрү же тиешелүү мазмундун барактары арасында чабыттоо үчүн эң сонун.

Негизги өтмөктөр

Шилтемелерди үзгүлтүксүз алып <ul>, кошуңуз .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Негизги таблеткалар

Ошол эле HTMLди алыңыз, бирок .nav-pillsанын ордуна колдонуңуз:

<ul class = "nav nav-pills" > 
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stackable Таблеткаларды же таблеткаларды вертикалдуу кылыңыз

Аларды кантип топтош керек

Таблеткалар жана таблеткалар демейки боюнча горизонталдуу .nav-stackedболгондуктан, аларды тигинен тизилгендей кылып көрсөтүү үчүн, жөн гана экинчи классты кошуңуз.

Үйүлгөн өтмөктөр

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

Топтолгон таблеткалар

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

Ашылма ылдыйлар Өркүндөтүлгөн навигация компоненттери үчүн

Бай менюлар жеңилдеди

Bootstrap өтмөктөрүндөгү жана таблеткаларындагы ачылуучу менюлар өтө оңой жана бир аз кошумча HTML жана жеңил jQuery плагинин гана талап кылат.

Bootstrap'те ачылуучу тизмелерди баштоо боюнча документтерди окуу үчүн Javascript барагына өтүңүз.

ылдый түшүүчү өтмөктөр

<ul class = "nav nav-tabs" > 
  <li класс = "ашылма" > 
    <a класс = "ашылма-которуу" 
       data-toggle = "ашылма"
       href = "#" >
        Ашылма
        <b class = "caret" ></b> 
      </a>
    <ul class = "ылдый түшүүчү меню" > 
      <!-- шилтемелер -->
    </ul>
  </li>
</ul>

Таблеткалар ылдый түшүүчү

<ul class = "nav nav-pills" > 
  <li класс = "ашылма" > 
    <a класс = "ашылма-которуу" 
       data-toggle = "ашылма"
       href = "#" >
        Ашылма
        <b class = "caret" ></b> 
      </a>
    <ul class = "ылдый түшүүчү меню" > 
      <!-- шилтемелер -->
    </ul>
  </li>
</ul>

Nav тизмелери Каптал тилкелери үчүн эң сонун жөнөкөй тизилген навигацияларды түзүңүз

Колдонмо стилиндеги навигация

Nav тизмелери кошумча аталыштар менен навигация шилтемелеринин топторун түзүүнүн жөнөкөй жана оңой жолун камсыз кылат. Алар OS Xдеги Finder сыяктуу каптал тилкелерде эң жакшы колдонулат.

Структуралык жактан алар өтмөктөр жана таблеткалар сыяктуу негизги навигация стилдеринде курулган, ошондуктан колдонуу жана ыңгайлаштыруу оңой.

Иконалар менен

Nav тизмелерин иконалар менен жабдуу оңой. Класс менен туура <i>тегди кошуңуз жана сиз орнотуңуз.

Мисал навигация тизмеси

Шилтемелердин тизмесин алып, кошуңуз class="nav nav-list":

<ul class = "nav nav-list" > 
  <li класс = "nav-header" > 
    Тизме аталышы
  </li>
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li>
    <a href = "#" > Китепкана </a> 
  </li>
  ...
</ul>

Пиктограммалар менен мисал

Ошол эле мисал, бирок <i>иконалар үчүн тэгдер менен.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i класс = "икон-китеп" >> </i> 
      Китепкана
    </a>
  </li>
  ...
</ul>

Өтмөктөр өтмөктөрдү JavaScript аркылуу жандандырыңыз

Эмне камтылган

Өтмөктөр аркылуу мазмунду алмаштыруу үчүн жөнөкөй плагин менен өтмөктөрүңүздү жандантыңыз. Bootstrap төрт стилдеги табулатура өтмөктөрдү бириктирет: үстү (демейки), оң, ылдый жана сол.

Алардын ортосунда өзгөртүү оңой жана өтө аз белгини өзгөртүүнү гана талап кылат.

Табылды мисал

.nav-tabsӨтмөктөрдү өтмөкчү кылуу үчүн класс менен башка divге ороп алыңыз .tabbable.

Мен 1-бөлүмдө турам.

Саламатсыздарбы, мен 2-бөлүмдө турам.

Эмне болду кыз, бул 3-бөлүм.

Ыңгайлаштырылган jQuery плагини

Бардык өтмөктөр биздин жеңил jQuery плагини менен иштейт. Javascript docs барагынан табак өтмөктөрүн кантип жандантуу керектиги жөнүндө көбүрөөк окуңуз.

JavaScript алуу →

Түз белгилөө

Табула турган өтмөктөрдү колдонуу үчүн таңуу div, өтмөктөрдүн топтому жана мазмундун өтмөк панелдеринин топтому талап кылынат.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > 1-бөлүм </a></li>   
    <li><a href = "#2" data-toggle = "tab" > 2-бөлүм </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div класс = "таб-панел активдүү" id = "1" >  
      <p> Мен 1-бөлүмдөмүн. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Саламатсызбы, мен 2-бөлүмдө турам. </p>
    </div>
  </div>
</div>

Каалаган багытта таблет

Төмөндөгү өтмөктөр

HTML тартибин которуп, ылдый жагына өтмөктөрдү коюу үчүн класс кошуңуз.

Мен А секциясындамын.

Саламатсыздарбы, мен В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "табббол өтмөктөрү-төмөндө" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Сол жактагы өтмөктөр

Сол жактагы өтмөктөрдү коюу үчүн классты алмаштырыңыз.

Мен А секциясындамын.

Саламатсыздарбы, мен В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "tabbable өтмөктөрү-сол" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Оң жактагы өтмөктөр

Оң жактагы өтмөктөрдү коюу үчүн классты алмаштырыңыз.

Мен А секциясындамын.

Саламатсыздарбы, мен В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "tabbable өтмөктөрү-оңго" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Статикалык навигациянын мисалы

Долбоордун аталышы, навигациясы жана издөө формасы бар статикалык (жогорку жагына бекитилбеген) навигация тилкесинин мисалы.

Navbar склад

Navbar статикалык же стационардык дисплей үчүн жакшы структуралаш үчүн бир нече гана дивдерди талап кылат.

<div класс = "navbar" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
      ...
    </div>
  </div>
</div>

.navbar-fixed-topЧабыт тилкесин көрүү терезесинин жогору жагына бекитүү үчүн, эң сырткы divге кошуңуз .navbar. Сиздин CSS'иңизде, padding-top: 40px;сиз <body>.

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

Бренд аты

Брендиңизди же долбооруңуздун аталышын көрсөтүү үчүн жөнөкөй шилтемеге анкер теги гана керек.

<a класс = "бренд" href = "#" >  
  Долбоордун аты
</a>

Издөө формасы

.navbar-searchИздөө формалары класс менен навигация тилкесинде ыңгайлаштырылган стилдерди алышат . Аны тегиздөө үчүн кошуу .pull-leftже .pull-rightбоюнча .form

<форма класс = "navbar-издөө солго тартуу" > 
  <киргизүү түрү = "текст" класс = "издөө-суроо" толтургуч = "Издөө" >   
</form>

Кошумча жооп берүүчү вариация

Сиздин үстүнкү панелиңиздеги мазмундун көлөмүнө жараша, сиз жооп берүүчү опцияларды ишке ашыргыңыз келиши мүмкүн. Бул үчүн, div камтыган navigation мазмунуңузду ороп .nav-collapse.collapse, жана навигация тилкесин которуу баскычын кошуңуз .btn-navbar.

<div класс = "navbar" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
 
      <!-- .btn-navbar жыйылган навигация мазмуну үчүн которгуч катары колдонулат -->
      <a класс = "btn btn-navbar" data-toggle = "кыйратуу" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Бренддин көрсөтүлүшүн кааласаңыз, анда аны калтырууну унутпаңыз -->
      <a class = "brand" href = "#" > Долбоордун аталышы </a>  
 
      <!-- Сиз каалаган нерсенин баары 940px же андан азыраак жашырылган, бул жерге жайгаштырыңыз -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-издөө, .navbar-форма, ж.б. -->
      </div>
 
    </div>
  </div>
</div>

Көңүл бургула! Жооптуу навигация кыйратуучу плагинди талап кылат .

Nav шилтемелер

Nav элементтерин иретсиз тизмелер аркылуу кошуу оңой.

<ul class = "nav" > 
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li><a href = "#" > Шилтеме </a></li> 
  <li><a href = "#" > Шилтеме </a></li> 
</ul>

Ашылма тизмелерди кошуу

Nav'га ачылуучу тизмелерди кошуу абдан жөнөкөй, бирок биздин JavaScript плагинибизди колдонууну талап кылат .

<ul class = "nav" > 
  <li класс = "ашылма" > 
    <a href = "#" 
          класс = "ашылма-которуу"
          data-toggle = "ашылма" >
          Каттоо эсеби
          <b class = "caret" ></b> 
    </a>
    <ul class = "ылдый түшүүчү меню" > 
      ...
    </ul>
  </li>
</ul>

JavaScript алуу →

Эмне үчүн аларды колдонушат

Breadcrumb навигациясы колдонуучуларга алар колдонмонун же сайттын ичинде кайда экенин көрсөтүүнүн жолу катары колдонулат, бирок негизги навигация үчүн эмес. Эң натыйжалуу болушу үчүн аларды сейрек жана кыскача колдонуңуз.

Мисалдар

Бир эле мисал, ал бир нече барактарда көрсөтүлүшү мүмкүн.

Белгилөө

HTML сиздин шилтемелер менен стандарттуу иретсиз тизмеңиз.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Башкы </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Китепкана </a> <span class = "divider" > / </span>   
  </li>
  <li класс = "активдүү" > 
    <a href = "#" > Маалымат </a> 
  </li>
</ul>

Мультикон-баракчалар

Качан колдонуу керек

Rdio аркылуу шыктандырган өтө жөнөкөй жана минималдуу стилдеги баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.

Статистикалуу барак шилтемелери

Шилтемелер ыңгайлаштырылган жана туура класс менен бир катар шарттарда иштейт. .disabledбасылбаган шилтемелер жана .activeучурдагы барактар үчүн.

Ийкемдүү тегиздөө

Барактоо шилтемелеринин тегиздөөсүн өзгөртүү үчүн эки кошумча класстын бирин кошуңуз: .pagination-centeredжана .pagination-right.

Мисалдар

Демейки пагинация компоненти ийкемдүү жана бир катар вариацияларда иштейт.

Белгилөө

Оролгон <div>, барактоо жөн гана <ul>.

<div класс = "беттөө" > 
  <ul>
    <li><a href = "#" > Мурунку </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 = "#" > Кийинки </a></li> 
  </ul>
</div>

Пейжер Тез мурунку жана кийинки шилтемелер үчүн

Пейжер жөнүндө

Пейжер компоненти - бул жеңил белгилөө жана андан да жеңилирээк стилдер менен жөнөкөй пагинациялоо үчүн шилтемелердин жыйындысы. Бул блогдор же журналдар сыяктуу жөнөкөй сайттар үчүн сонун.

Демейки мисал

Демейки боюнча, пейджер шилтемелерди борборлойт.

<ul class = "пейжер" > 
  <li>
    <a href = "#" > Мурунку </a> 
  </li>
  <li>
    <a href = "#" > Кийинки </a> 
  </li>
</ul>

Тегизделген шилтемелер

Же болбосо, ар бир шилтемени тараптарга тегиздей аласыз:

<ul class = "пейжер" > 
  <li класс = "мурунку" > 
    <a href = "#" > ← Эски </a> 
  </li>
  <li класс = "кийинки" > 
    <a href = "#" > Жаңыраак → </a> 
  </li>
</ul>

Энбелгилер	Белгилөө
Демейки	`<span class="label">Default</span>`
Жаңы	`<span class="label label-success">New</span>`
Эскертүү	`<span class="label label-warning">Warning</span>`
Маанилүү	`<span class="label label-important">Important</span>`
Маалымат	`<span class="label label-info">Info</span>`

Демейки эскиздер

Демейки боюнча, Bootstrap эскиздери минималдуу талап кылынган белгилөө менен байланышкан сүрөттөрдү көрсөтүү үчүн иштелип чыккан.

Жогорку ылайыкташтырылган

Бир аз кошумча белгилөө менен, эскиздерге аталыштар, абзацтар же баскычтар сыяктуу каалаган HTML мазмунун кошууга болот.

Эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Акция Акция
Эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Акция Акция

Эмне үчүн эскиздерди колдонуу керек

Эскиз (мурун .media-gridv1.4 чейин) сүрөттөр же видеолор торчолору, сүрөт издөө натыйжалары, чекене өнүмдөр, портфолио жана башка көптөгөн нерселер үчүн эң сонун. Алар шилтемелер же статикалык мазмун болушу мүмкүн.

Жөнөкөй, ийкемдүү белгилөө

Эскизди белгилөө жөнөкөй — ulкаалаган сандагы liэлементтер менен гана талап кылынат. Ал ошондой эле өтө ийкемдүү, мазмунуңузду ороп коюу үчүн бир аз көбүрөөк белгилөө менен мазмундун каалаган түрүнө мүмкүнчүлүк берет.

Тор мамычасынын өлчөмдөрүн колдонот

Акырында, эскиздер компоненти эскиз өлчөмдөрүн көзөмөлдөө үчүн учурдагы тор тутумунун класстарын колдонот — .span2же — сыяктуу..span3

Белгилөө

Мурда айтылгандай, эскиздер үчүн талап кылынган белги жеңил жана жөнөкөй. Шилтемеленген сүрөттөр үчүн демейки жөндөөнү карап көрүңүз :

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span3" > 
    <a href = "#" класс = "эскиз" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Эскиздеги ыңгайлаштырылган HTML мазмуну үчүн белгилөө бир аз өзгөрөт. Блок деңгээлиндеги мазмунга каалаган жерде уруксат берүү үчүн, биз окшошту <a>алмаштырабыз <div>:

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span3" > 
    <div класс = "эскиз" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Эскиз энбелгиси </h5>
      <p> Эскиздин коштомо жазуусу бул жерде... </p>
    </div>
  </li>
  ...
</ul>

Дагы мисалдар

Сизге жеткиликтүү болгон ар кандай тор класстары менен бардык варианттарыңызды изилдеңиз. Ошондой эле ар кандай өлчөмдөрдү аралаштырып, дал келтире аласыз.

Жеңил демейки

Кайра жазылган базалык класс

Bootstrap 2 менен биз базалык классты жөнөкөйлөттүк: .alertордуна .alert-message. Биз ошондой эле минималдуу талап кылынган <p>белгини азайттык — демейки боюнча жок талап кылынат, жөн гана сырткы <div>.

Жалгыз эскертүү билдирүүсү

Коду азыраак туруктуураак компонент үчүн биз блоктун эскертүүлөрүнүн, көбүрөөк толтурулган жана адатта көбүрөөк текст менен келген билдирүүлөрдүн айырмалоочу көрүнүшүн алып салдык. Класс да өзгөрдү .alert-block.

JavaScript менен сонун иштейт

Bootstrap эскертүү билдирүүлөрүн колдогон сонун jQuery плагини менен коштолуп, аларды тез жана оңой четке кагат.

Плагинди алуу »

Мисал эскертүүлөр

Жөнөкөй класс менен divге билдирүүңүздү жана кошумча жабуу сөлөкөтүн ороп алыңыз.

× Эскертүү! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.

<div класс = "эскертүү" > 
  <a класс = "жабуу" > × </a> 
  <strong> Эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз.
</div>

Стандарттык эскертүү билдирүүсүн эки кошумча класс менен оңой кеңейтиңиз: .alert-blockкөбүрөөк толтуруу жана тексттик башкаруу .alert-headingүчүн жана дал келген аталыш үчүн.

Эскертүү!

Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et.

<div класс = "эскертүүчү эскертүү-блок" > 
  <a класс = "жабуу" > × </a> 
  <h4 class = "alert-heading" > Эскертүү! </h4> 
  Өзүңдү текшерип көр, сен андай эмессиң...
</div>

Контексттик альтернативалар Эскертүүнүн коннотациясын өзгөртүү үчүн кошумча класстарды кошуңуз

Ката же коркунуч

× О, шак! Бир нече нерсени өзгөртүп, кайра тапшырып көрүңүз.

<div класс = "эсгертме-ката" > 
  ...
</div>

Ийгилик

× Мыкты жасалды! Сиз бул маанилүү эскертүү билдирүүсүн ийгиликтүү окудуңуз.

<div класс = "эскертүүчү эскертүү-ийгилик" > 
  ...
</div>

Маалымат

× Көңүл бургула! Бул эскертүүгө көңүл буруңуз, бирок бул өтө маанилүү эмес.

<div класс = "эскертүүчү эскертүү маалыматы" > 
  ...
</div>

Мисалдар жана белгилөө

Негизги

Вертикалдуу градиент менен демейки прогресс тилкеси.

<div класс = "прогресс" > 
  <div класс = "бар" 
       style = " width : 60 %; " ></div> 
</div>

Striped

Чаардуу эффект түзүү үчүн градиент колдонот.

<div class = "прогресс-информация 
     прогресс-тин» >
  <div класс = "бар" 
       style = " width : 20 %; " ></div> 
</div>

Анимацияланган

Чаардуу мисалды алып, аны жандандырат.

<div класс = "прогресс-коркунуч 
     прогресс-тин активдуу» >
  <div класс = "бар" 
       style = " width : 40 %; " ></div> 
</div>

Параметрлер жана браузерди колдоо

Кошумча түстөр

Прогресс тилкелери окшош стилдештирүү үчүн баскычтар жана эскертүүлөр сыяктуу эле класстардын кээ бир аттарын колдонот.

.progress-info
.progress-success
.progress-danger

Же болбосо, сиз LESS файлдарын ыңгайлаштыра аласыз жана өзүңүздүн түстөрүңүздү жана өлчөмдөрүңүздү өзгөртө аласыз.

Жүрүм-турум

Прогресс тилкелери CSS3 өткөөлдөрүн колдонушат, андыктан кеңдигин javascript аркылуу динамикалык түрдө туураласаңыз, анын өлчөмү акырындап өзгөрөт.

Эгер сиз .activeклассты колдонсоңуз, .progress-stripedпрогресс тилкелериңиз солдон оңго сызыктарды жандандырат.

Браузерди колдоо

Прогресс тилкелери бардык эффекттерге жетүү үчүн CSS3 градиенттерин, өтүүлөрдү жана анимацияларды колдонушат. Бул функциялар IE7-8 же Firefoxтун эски версияларында колдоого алынбайт.

Opera учурда анимацияларды колдобойт.

Wells

Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.

Карачы, мен кудуктун ичиндемин!

<div класс = "жакшылык" > 
  ...
</div>

Белгилер

Окула элек сан үчүн же жөнөкөй көрсөткүч катары элементте бейджик колдонуңуз.

<span class = "белги" > 3 </div>

Жабуу сөлөкөтү

Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.

<a class = "жабуу" > × </a>

Баскыч топтору Аспаптар тилкеси сыяктуу көбүрөөк функцияларды алуу үчүн баскычтарга кошулуңуз

Баскыч топтору

Мисал белгилөө

Белгилөө кутучасы жана радио даамдары

Башты көтөр

Баскычтар ачылуучу ылдыйкы контексттик ачылуучу менюлар баскыч топторуна курулган

Түймөктүн ачылуучу тизмелери

Мисал белгилөө

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Мисал белгилөө

Навигация , өтмөктөр жана таблеткалар Жогорку ыңгайлаштырылган тизме стилиндеги навигация

Жеңил демейкилер Бир эле белгилөө, башка класстар

Күчтүү базалык класс

Эмне үчүн таблеткалар жана таблеткалар

Негизги өтмөктөр

Негизги таблеткалар

Stackable Таблеткаларды же таблеткаларды вертикалдуу кылыңыз

Аларды кантип топтош керек

Үйүлгөн өтмөктөр

Топтолгон таблеткалар

Ашылма ылдыйлар Өркүндөтүлгөн навигация компоненттери үчүн

Бай менюлар жеңилдеди

ылдый түшүүчү өтмөктөр

Таблеткалар ылдый түшүүчү

Nav тизмелери Каптал тилкелери үчүн эң сонун жөнөкөй тизилген навигацияларды түзүңүз

Колдонмо стилиндеги навигация

Иконалар менен

Мисал навигация тизмеси

Пиктограммалар менен мисал

Өтмөктөр өтмөктөрдү JavaScript аркылуу жандандырыңыз

Эмне камтылган

Табылды мисал

Ыңгайлаштырылган jQuery плагини

Түз белгилөө

Каалаган багытта таблет

Төмөндөгү өтмөктөр

Сол жактагы өтмөктөр

Оң жактагы өтмөктөр

Navbar

Статикалык навигациянын мисалы

Navbar склад

Бренд аты

Издөө формасы

Кошумча жооп берүүчү вариация

Nav шилтемелер

Ашылма тизмелерди кошуу

Нан күкүмдөрү

Эмне үчүн аларды колдонушат

Мисалдар

Белгилөө

Беттештирүү Мазмун аркылуу пейджинг жүргүзүү үчүн эки вариант

Мультикон-баракчалар

Качан колдонуу керек

Статистикалуу барак шилтемелери

Ийкемдүү тегиздөө

Мисалдар

Белгилөө

Пейжер Тез мурунку жана кийинки шилтемелер үчүн

Пейжер жөнүндө

Демейки мисал

Тегизделген шилтемелер

Inline энбелгилери Текстти белгилөө жана аннотациялоо

Эскиз Сүрөттөр, видеолор, тексттер жана башкалар

Демейки эскиздер

Жогорку ылайыкташтырылган

Эскиз энбелгиси

Эскиз энбелгиси

Эмне үчүн эскиздерди колдонуу керек

Жөнөкөй, ийкемдүү белгилөө

Тор мамычасынын өлчөмдөрүн колдонот

Белгилөө

Дагы мисалдар

Ийгилик, эскертүү жана ката билдирүүлөрү үчүн эскертүүлөр стилдери

Жеңил демейки

Кайра жазылган базалык класс

Жалгыз эскертүү билдирүүсү

JavaScript менен сонун иштейт

Мисал эскертүүлөр

Эскертүү!

Контексттик альтернативалар Эскертүүнүн коннотациясын өзгөртүү үчүн кошумча класстарды кошуңуз