Групе дугмади

Користите групе дугмади да спојите више дугмади заједно као једну сложену компоненту. Изградите их са низом елемената <a>или <button>.

Најбоље праксе

Препоручујемо следеће смернице за коришћење група дугмади и трака са алаткама:

• Увек користите исти елемент у једној групи дугмади <a>или <button>.
• Немојте мешати дугмад различитих боја у истој групи дугмади.
• Користите иконе поред или уместо текста, али обавезно укључите алт и наслов текста где је то прикладно.

Групе повезаних дугмади са падајућим менијима (погледајте доле) треба да се позивају одвојено и увек укључују падајућу таблу за означавање планираног понашања.

Подразумевани пример

Ево како ХТМЛ изгледа за стандардну групу дугмади направљену помоћу дугмади за ознаке сидра:

<див цласс = "бтн-гроуп" > 
  <буттон цласс = "бтн" > 1 </буттон> 
  <буттон цласс = "бтн" > 2 </буттон> 
  <буттон цласс = "бтн" > 3 </буттон> 
</див>

Пример траке са алаткама

Комбинујте скупове <div class="btn-group">у а <div class="btn-toolbar">за сложеније компоненте.

<див цласс = "бтн-тоолбар" > 
  <див цласс = "бтн-гроуп" > 
    ...
  </див>
</див>

Поље за потврду и радио укуси

Групе дугмади такође могу да функционишу као радио уређаји, где само једно дугме може бити активно, или поља за потврду, где може бити активан било који број дугмади. Погледајте Јавасцрипт документе за то.

Преузмите јавасцрипт »

Падајући мени у групама дугмади

Главу горе! Дугмад са падајућим менијима морају бити појединачно умотана у своје .btn-groupунутар а .btn-toolbarради правилног приказивања.

Преглед и примери

Користите било које дугме да бисте покренули падајући мени тако што ћете га поставити унутар а .btn-groupи обезбедити одговарајућу ознаку менија.

Пример маркупа

Слично групи дугмади, наше ознаке користе уобичајене ознаке дугмади, али са прегршт додатака за прецизирање стила и подршку Боотстрап-овом падајућем јКуери додатку.

<див цласс = "бтн-гроуп" > 
  < а цласс = "бтн дропдовн -тоггле" дата-тоггле = "дропдовн" хреф = "#" >   
    поступак
    <спан цласс = "царет" ></спан> 
  </а>
  <ул цласс = "падајући мени" > 
    <!-- везе падајућег менија -->
  </ул>
</див>

Ради са свим величинама дугмади

Падајући мени дугмади функционишу у било којој величини. величине ваших дугмади на .btn-large, .btn-small, или .btn-mini.

Захтева јавасцрипт

Падајући мени са дугметом захтева функционисање додатка за падајући мени Боотстрап .

У неким случајевима — попут мобилних уређаја — падајући менији ће се проширити изван оквира за приказ. Морате да решите поравнање ручно или помоћу прилагођеног јавасцрипт-а.

Преглед и примери

На основу стилова групе дугмади и ознака, лако можемо да креирамо подељено дугме. Дугмад за раздвајање карактерише стандардна радња са леве стране и падајући прекидач са десне стране са контекстуалним везама.

Величине

Користите додатне класе дугмади .btn-mini, .btn-smallили .btn-largeза одређивање величине.

<див цласс = "бтн-гроуп" > 
  ...
  <ул цласс = "падајући мени повлачење-десно" > 
    <!-- везе падајућег менија -->
  </ул>
</див>

Пример маркупа

Проширујемо обичне падајуће меније да бисмо обезбедили другу радњу дугмета која функционише као посебан окидач падајућег менија.

<див цласс = "бтн-гроуп" > 
  <буттон цласс = "бтн" > Радња </буттон> 
  <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
    <спан цласс = "царет" ></спан> 
  </буттон>
  <ул цласс = "падајући мени" > 
    <!-- везе падајућег менија -->
  </ул>
</див>

Дропуп менији

Падајући менији се такође могу пребацивати одоздо према горе додавањем једне класе непосредном родитељу .dropdown-menu. Преокреће смер .caretи промениће положај менија да се креће одоздо према горе уместо одозго према доле.

<див цласс = "бтн-гроуп дропуп" > 
  <буттон цласс = "бтн" > Дропуп </буттон> 
  <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >  
    <спан цласс = "царет" ></спан> 
  </буттон>
  <ул цласс = "падајући мени" > 
    <!-- везе падајућег менија -->
  </ул>
</див>

Моћна основна класа

Све компоненте за навигацију овде — картице, таблете и листе — деле исту основну ознаку и стилове кроз .navкласу.

Када користити

Картице и таблете су одличне за делове садржаја или навигацију између страница повезаног садржаја.

Поравнање компоненти

Да бисте поравнали навигационе везе, користите .pull-leftили .pull-rightуслужне класе. Обе класе ће додати ЦСС флоат у наведеном правцу.

Основне картице

Узмите редовне <ul>везе и додајте .nav-tabs:

• Кућа
• Профил
• Поруке

<ул цласс = "нав нав-табс" > 
  <ли цласс = "ацтиве" > 
    < а хреф = "#" > Почетна < /а> 
  </ли>
  <ли>< а хреф = "#" > ... </а ></ли> 
  <ли>< а хреф = "#" > ... </а ></ли> 
</ул>

Основне таблете

Узмите исти ХТМЛ, али .nav-pillsуместо тога користите:

• Кућа
• Профил
• Поруке

<ул цласс = "нав нав-пиллс" > 
  <ли цласс = "ацтиве" > 
    < а хреф = "#" > Почетна < /а> 
  </ли>
  <ли>< а хреф = "#" > ... </а ></ли> 
  <ли>< а хреф = "#" > ... </а ></ли> 
</ул>

Како их сложити

Пошто су табови и пилуле подразумевано хоризонтални, само додајте другу класу, .nav-stacked, да би изгледали вертикално наслагани.

Наслагане картице

• Кућа
• Профил
• Поруке

<ул цласс = "нав нав-табс нав-стацкед" > 
  ...
</ул>

Наслагане таблете

• Кућа
• Профил
• Поруке

<ул цласс = "нав нав-пиллс нав-стацкед" > 
  ...
</ул>

Богати менији су олакшани

Падајући менији у Боотстрап картицама и таблетама су супер лаки и захтевају само мало додатног ХТМЛ-а и лагани јКуери додатак.

Пређите на страницу Јавасцрипт да бисте прочитали документе о иницијализацији падајућих менија у Боотстрапу.

Картице са падајућим менијима

• Кућа
• Помоћ
• Испустити
  • Action
  • Another action
  • Something else here
  • Separated link

<ул цласс = "нав нав-табс" > 
  <ли цласс = "падајући мени" > 
    <а цласс = "дропдовн-тоггле" 
       дата-тоггле = "падајући мени"
       хреф = "#" >
        Испустити
        <б цласс = "царет" ></б> 
      </а>
    <ул цласс = "падајући мени" > 
      <!-- везе -->
    </ул>
  </ли>
</ул>

Таблете са падајућим менијима

• Кућа
• Помоћ
• Испустити
  • Action
  • Another action
  • Something else here
  • Separated link

<ул цласс = "нав нав-пиллс" > 
  <ли цласс = "падајући мени" > 
    <а цласс = "дропдовн-тоггле" 
       дата-тоггле = "падајући мени"
       хреф = "#" >
        Испустити
        <б цласс = "царет" ></б> 
      </а>
    <ул цласс = "падајући мени" > 
      <!-- везе -->
    </ул>
  </ли>
</ул>

Навигација у стилу апликације

Навигационе листе пружају једноставан и лак начин за прављење група навигационих веза са опционим заглављима. Најбоље се користе у бочним тракама као што је Финдер у ОС Кс.

Структурно, они су изграђени на истим основним стиловима навигације као картице и таблете, тако да су употреба и прилагођавање једноставни.

Са иконама

Нав листе је такође лако опремити иконама. Додајте одговарајућу <i>ознаку са класом и спремни сте.

Хоризонталне преграде

Додајте хоризонтални разделник креирањем празне ставке листе са класом .divider, на следећи начин:

<ул цласс = "нав нав-лист" > 
  ...
  <ли цласс = "дивидер" ></ли> 
  ...
</ул>

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

Узмите листу веза и додајте class="nav nav-list":

<ул цласс = "нав нав-лист" > 
  <ли цласс = "нав-хеадер" > 
    Заглавље листе
  </ли>
  <ли цласс = "ацтиве" > 
    < а хреф = "#" > Почетна < /а> 
  </ли>
  <ли>
    < а хреф = "#" > Библиотека < /а> 
  </ли>
  ...
</ул>

Пример са иконама

Исти пример, али са <i>ознакама за иконе.

<ул цласс = "нав нав-лист" > 
  ...
  <ли>
    < а хреф = "#" > 
      <и цласс = "ицон-боок" ></и> 
      Библиотека
    </а>
  </ли>
  ...
</ул>

Шта је укључено

Оживите своје картице помоћу једноставног додатка за пребацивање између садржаја путем картица. Боотстрап интегрише картице са картицама у четири стила: горњи (подразумевано), десно, доле и лево.

Промена између њих је лака и захтева само промену врло мало ознака.

Фаде ин табс

Да бисте учинили да картице нестају, додајте .fadeсваком .tab-pane.

Захтева јКуери додатак

Све картице са табулаторима покрећу наш лагани јКуери додатак. Прочитајте више о томе како да оживите картице са табулаторима на страници јавасцрипт докумената .

Преузмите јавасцрипт →

Табабле екампле

Да бисте омогућили табулаторе, креирајте .tab-paneса јединственим ИД-ом за сваку картицу и умотајте их у .tab-content.

За десно или лево поравнате картице, умотајте .nav-tabsи .tab-contentу .tabbable.

Јасно означавање

Коришћење картица са табулаторима захтева премотавање див, скуп картица и скуп окна садржаја са табовима.

<див цласс = "таббабле" > <!-- Потребно само за леве/десне картице -->  
  <ул цласс = "нав нав-табс" > 
    <ли цласс = "ацтиве" >< а хреф = "#таб1 " дата- тоггле = "таб" > Одељак 1 </а ></ли>   
    <ли>< а хреф = "#таб2 " дата- тоггле = "таб" > Одељак 2 </а ></ли>  
  </ул>
  <див цласс = "таб-цонтент" > 
    <див цласс = "таб-пане ацтиве" ид = "таб1" >  
      <п> Ја сам у одељку 1. </п>
    </див>
    <див цласс = "таб-пане" ид = "таб2" >  
      <п> Здраво, ја сам у одељку 2. </п>
    </див>
  </див>
</див>

Картице на дну

Окрените редослед ХТМЛ-а и додајте класу да бисте поставили картице на дно.

<див цласс = "таббабле табс-белов" > 
  <див цласс = "таб-цонтент" > 
    ...
  </див>
  <ул цласс = "нав нав-табс" > 
    ...
  </ул>
</див>

Картице са леве стране

Замените класу да бисте ставили табове са леве стране.

<див цласс = "таббабле табс-лефт" > 
  <ул цласс = "нав нав-табс" > 
    ...
  </ул>
  <див цласс = "таб-цонтент" > 
    ...
  </див>
</див>

Картице са десне стране

Замените класу да бисте ставили табове са десне стране.

<див цласс = "таббабле табс-ригхт" > 
  <ул цласс = "нав нав-табс" > 
    ...
  </ул>
  <див цласс = "таб-цонтент" > 
    ...
  </див>
</див>

Навбар скеле

Навбару је потребно само неколико дивова да би се добро структурирао за статички или фиксни приказ.

<див цласс = "навбар" > 
  <див цласс = "навбар-иннер" > 
    <див цласс = "цонтаинер" > 
      ...
    </див>
  </див>
</див>

Фиксна навигациона трака

Поправите навигациону траку на врх или дно прозора за приказ са додатном класом на најудаљенијем див, .navbar.

<див цласс = "навбар навбар-фикед-топ" > 
  ...
</див>

<див цласс = "навбар навбар-фикед-боттом" > 
  ...
</див>

Када причврстите навигациону траку, не заборавите да узмете у обзир скривену област испод. Додајте 40 пиксела или више допуна у <body>. Обавезно додајте ово после основног Боотстрап ЦСС-а и пре опционог одговорног ЦСС-а.

Марка

Једноставна веза за приказивање имена вашег бренда или пројекта захтева само ознаку сидра.

< а цласс = "бранд" хреф = "#" >  
  Назив пројекта
</а>

Обрасци у навигационој траци

Да бисте правилно стилизовали и позиционирали образац унутар траке за навигацију, додајте одговарајуће класе као што је приказано у наставку. За подразумевани образац, укључите .navbar-formи или .pull-leftили .pull-rightда бисте га правилно поравнали.

<форм цласс = "навбар-форм пулл-лефт" > 
  <инпут типе = "тект" цласс = "спан2" >  
</форм>

За прилагођенији образац за претрагу, додајте .navbar-searchи formна .search-queryулаз за специјализоване стилове на траци за навигацију.

<форм цласс = "навбар-сеарцх пулл-лефт" > 
  <инпут типе = "тект" цласс = "сеарцх-куери" плацехолдер = "Сеарцх" >   
</форм>

Опциона прилагодљива варијација

У зависности од количине садржаја на горњој траци, можда ћете желети да примените опције одзива. Да бисте то урадили, умотајте свој навигациони садржај у див који садржи .nav-collapse.collapseи додајте дугме за пребацивање на навигационој траци .btn-navbar.

<див цласс = "навбар" > 
  <див цласс = "навбар-иннер" > 
    <див цласс = "цонтаинер" > 
 
      <!-- .бтн-навбар се користи као прекидач за скупљени садржај траке за навигацију -->
      < а цласс = "бтн бтн- навбар" дата- тоггле = "цоллапсе" дата-таргет = " .нав - цоллапсе" >   
        <спан цласс = "ицон-бар" ></спан> 
        <спан цласс = "ицон-бар" ></спан> 
        <спан цласс = "ицон-бар" ></спан> 
      </а>
 
      <!-- Обавезно оставите марку тамо ако желите да се прикаже -->
      < а цласс = "бранд" хреф = "#" > Назив пројекта < /а>  
 
      <!-- Све што желите да буде скривено на 940пк или мање, поставите овде -->
      <див цласс = "нав-цоллапсе" > 
        <!-- .нав, .навбар-сеарцх, .навбар-форм, итд. -->
      </див>
 
    </див>
  </див>
</див>

Нав линкови

Нав ставке се једноставно додају преко неуређених листа.

<ул цласс = "нав" > 
  <ли цласс = "ацтиве" > 
    < а хреф = "#" > Почетна < /а> 
  </ли>
  <ли>< а хреф = "#" > Веза </а ></ли> 
  <ли>< а хреф = "#" > Веза </а ></ли> 
</ул>

Можете лако да додате разделнике вашим навигационим везама са празном ставком листе и једноставном класом. Само додајте ово између веза:

<ул цласс = "нав" > 
  ...
  <ли цласс = "дивидер-вертицал" ></ли> 
  ...
</ул>

Поравнање компоненти

Да бисте поравнали навигацију, образац за претрагу или текст, користите .pull-leftили .pull-rightуслужне класе. Обе класе ће додати ЦСС флоат у наведеном правцу.

Додавање падајућих менија

Додавање падајућих менија и падајућих прозора у навигацију је супер једноставно, али захтева употребу нашег јавасцрипт додатка .

<ул цласс = "нав" > 
  <ли цласс = "падајући мени" > 
    <а хреф = "#" 
          цласс = "падајући-тоггле"
          дата-тоггле = "падајући мени" >
          Рачун
          <б цласс = "царет" ></б> 
    </а>
    <ул цласс = "падајући мени" > 
      ...
    </ул>
  </ли>
</ул>

Преузмите јавасцрипт →

Текст на навигационој траци

Умотајте низове текста у <.navbar-text>, обично на <p>ознаку за исправан почетак и боју.

Зашто их користити

Навигација путем бреадцрумб се користи као начин да се корисницима покаже где се налазе у оквиру апликације или сајта, али не и за примарну навигацију. Нека њихова употреба буде ретка и сажета да би била најефикаснија.

Примери

Приказан један пример како би се могао приказати на више страница.

• Кућа

• Почетна /
• Библиотека

• Почетна /
• Библиотека /
• Подаци

Означавање

ХТМЛ је ваша стандардна неуређена листа са везама.

<ул цласс = "бреадцрумб" > 
  <ли>
    < а хреф = "#" > Почетна < /а> <спан цласс = "дивидер" > / </спан>   
  </ли>
  <ли>
    < а хреф = "#" > Библиотека < /а> <спан цласс = "дивидер" > / </спан>   
  </ли>
  <ли цласс = "ацтиве" > Подаци </ли> 
</ул>

Када користити

Ултра поједностављена и минимално стилизована пагинација инспирисана Рдио-ом, одлична за апликације и резултате претраге. Велики блок је тешко промашити, лако је скалабилан и пружа велике површине кликова.

Линкови страница са статусом

Везе су прилагодљиве и раде у бројним околностима са правом класом. .disabledза везе на које се не може кликнути и .activeза тренутну страницу.

Флексибилно поравнање

Додајте било коју од две опционе класе да бисте променили поравнање веза за пагинацију: .pagination-centeredи .pagination-right.

Примери

Подразумевана компонента пагинације је флексибилна и функционише у бројним варијантама.

Означавање

Умотано у <div>, пагинација је само <ul>.

<див цласс = "пагинатион" > 
  <ул>
    <ли>< а хреф = "#" > Претходно </а ></ли> 
    <ли цласс = "ацтиве" > 
      < а хреф = "#" > 1 < /а> 
    </ли>
    <ли>< а хреф = "#" > 2 </а ></ли> 
    <ли>< а хреф = "#" > 3 </а ></ли> 
    <ли>< а хреф = "#" > 4 ​​</а ></ли> 
    <ли>< а хреф = "#" > Следеће </а ></ли> 
  </ул>
</див>

О пејџеру

Компонента пејџера је скуп веза за једноставне имплементације пагинације са лаким ознакама и још лакшим стиловима. Одличан је за једноставне сајтове као што су блогови или часописи.

Опционо онемогућено стање

Везе пејџера такође користе општу .disabledкласу из пагинације.

Подразумевани пример

Подразумевано, пејџер центрира везе.

• Претходна
• Следећи

<ул цласс = "пагер" > 
  <ли>
    < а хреф = "#" > Претходно < /а> 
  </ли>
  <ли>
    < а хреф = "#" > Следеће < /а> 
  </ли>
</ул>

Поравнане везе

Алтернативно, можете да поравнате сваку везу са стране:

• ← Старији
• Новије →

<ул цласс = "пагер" > 
  <ли цласс = "превиоус" > 
    < а хреф = "#" > & ларр ; Старији </ а> 
  </ли>
  <ли цласс = "нект" > 
    < а хреф = "#" > Новији &рарр ; </а> 
  </ли>
</ул>

О томе

Значке су мале, једноставне компоненте за приказивање неког индикатора или бројања. Обично се налазе у клијентима е-поште као што је Маил.апп или у мобилним апликацијама за пусх обавештења.

Доступни часови

Боотстрап обезбеђује лагану, флексибилну компоненту која се зове херој јединица за приказивање садржаја на вашој веб локацији. Добро ради на маркетингу и сајтовима са великим садржајем.

Означавање

Умотајте свој садржај у divовако:

<див цласс = "херој-јединица" > 
  <х1> Наслов </х1>
  <п> Слоган </п>
  <п>
    < а цласс = "бтн бтн-примари бтн-ларге" > 
      Сазнајте више
    </а>
  </п>
</див>

Једноставна шкољка за h1одговарајуће размакнуће и сегментирање делова садржаја на страници. Може да користи h1подразумевани smallелемент, као и већину других компоненти (са додатним стиловима).

<див цласс = "паге-хеадер" > 
  <х1> Пример заглавља странице </х1>
</див>

Подразумеване сличице

Подразумевано, Боотстрап-ове сличице су дизајниране да приказују повезане слике са минималним потребним ознакама.

Веома прилагодљив

Уз мало додатне ознаке, могуће је додати било коју врсту ХТМЛ садржаја попут наслова, пасуса или дугмади у сличице.

• 

  Ознака сличице

  Црас јусто одио, дапибус ац фацилисис ин, егестас егет куам. Донец ид елит нон ми порта гравида ат егет метус. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

  поступак поступак

• 

  Ознака сличице

  Црас јусто одио, дапибус ац фацилисис ин, егестас егет куам. Донец ид елит нон ми порта гравида ат егет метус. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

  поступак поступак

Зашто користити сличице

Сличице (раније .media-gridдо в1.4) су одличне за мреже фотографија или видео записа, резултате претраге слика, малопродајне производе, портфеље и још много тога. То могу бити везе или статички садржај.

Једноставна, флексибилна ознака

Означавање сличица је једноставно — све што је потребно је ulса било којим бројем елемената. liТакође је супер флексибилан, омогућавајући било коју врсту садржаја са само мало више ознака за умотавање вашег садржаја.

Користи величине колона мреже

На крају, компонента сличица користи постојеће класе система мреже—као .span2или .span3—за контролу димензија сличица.

Маркуп

Као што је раније поменуто, потребна ознака за сличице је лагана и јасна. Ево погледа на подразумевано подешавање за повезане слике :

<ул цласс = "тхумбнаилс" > 
  <ли цласс = "спан3" > 
    < а хреф = "#" цласс = "тхумбнаил" >  
      <имг срц = "хттпс://плацехолд.ит/260к180" алт = "" >  
    </а>
  </ли>
  ...
</ул>

За прилагођени ХТМЛ садржај у сличицама, ознаке се незнатно мењају. Да бисмо дозволили садржај на нивоу блока било где, мењамо <a>за нешто <div>слично:

<ул цласс = "тхумбнаилс" > 
  <ли цласс = "спан3" > 
    <див цласс = "тхумбнаил" > 
      <имг срц = "хттпс://плацехолд.ит/260к180" алт = "" >  
      <х5> Ознака сличице </х5>
      <п> Натпис сличице управо овде... </п>
    </див>
  </ли>
  ...
</ул>

Још примера

Истражите све своје могућности помоћу различитих класа мреже које су вам доступне. Такође можете мешати и комбиновати различите величине.

Преписана основна класа

Уз Боотстрап 2, поједноставили смо основну класу: .alertуместо .alert-message. Такође смо смањили минималну потребну ознаку—не <p>захтева се подразумевано, само спољашњи <div>.

Једна порука упозорења

За трајнију компоненту са мање кода, уклонили смо диференцирајући изглед за блокада упозорења, поруке које долазе са више допуна и обично више текста. Класа је такође промењена у .alert-block.

Одлично иде са јавасцрипт-ом

Боотстрап долази са одличним јКуери додатком који подржава поруке упозорења, што чини њихово одбацивање брзим и лаким.

Преузмите додатак »

Пример упозорења

Умотајте своју поруку и опциону икону за затварање у див помоћу једноставне класе.

<див цласс = "алерт" > 
  <буттон цласс = "цлосе" дата-дисмисс = "алерт" > × </буттон>  
  <стронг> Упозорење! </стронг> Најбоље је да се сами проверите, не изгледате баш добро.
</див>

Главу горе! иОС уређајима је потребан ан href="#"за одбацивање упозорења. Обавезно га укључите и атрибут података за иконе затварања сидра. Алтернативно, можете користити <button>елемент са атрибутом података, што смо одлучили да урадимо за наше документе. Када користите <button>, морате укључити type="button"или се ваши обрасци можда неће послати.

Лако проширите стандардну поруку упозорења са две опционе класе: .alert-blockза више допуна и контрола текста и .alert-headingза одговарајући наслов.

<див цласс = "алерт алерт-блоцк" > 
  < а цласс = "цлосе " дата-дисмисс = " алерт" хреф = "#" > × < /а>   
  <х4 цласс = "алерт-хеадинг" > Упозорење! </х4> 
  Најбоље да се сами проверите, нисте...
</див>

Грешка или опасност

<див цласс = "алерт алерт-еррор" > 
  ...
</див>

Успех

<див цласс = "алерт алерт-суццесс" > 
  ...
</див>

Информације

<див цласс = "алерт алерт-инфо" > 
  ...
</див>

Басиц

Подразумевана трака напретка са вертикалним градијентом.

<див цласс = "прогресс" > 
  <див цласс = "бар" 
       стиле = " ширина : 60 %; " ></див> 
</див>

Пругасте

Користи градијент за стварање пругастог ефекта (без ИЕ).

<див цласс = "прогресс прогресс-стрипед" > 
  <див цласс = "бар" 
       стиле = " ширина : 20 %; " ></див> 
</див>

Анимирани

Узима пругасти пример и анимира га (без ИЕ).

<див цласс = "прогресс прогресс-стрипед 
     активан" >
  <див цласс = "бар" 
       стиле = " ширина : 40 %; " ></див> 
</див>

Додатне боје

Траке напретка користе неке од истих дугмади и класа упозорења за доследне стилове.

пругасте шипке

Слично чврстим бојама, имамо различите пругасте траке напретка.

Понашање

Траке напретка користе ЦСС3 прелазе, тако да ако динамички подешавате ширину преко јавасцрипт-а, она ће глатко мењати величину.

Ако користите .activeкласу, ваше .progress-stripedтраке напретка ће анимирати пруге с лева на десно.

Подршка за претраживач

Траке напретка користе ЦСС3 градијенте, прелазе и анимације да би постигли све своје ефекте. Ове функције нису подржане у ИЕ7-9 или старијим верзијама Фирефок-а.

Опера и ИЕ тренутно не подржавају анимације.

Веллс

Користите бунар као једноставан ефекат на елемент да бисте му дали уметнути ефекат.

<див цласс = "велл" > 
  ...
</див>

Затвори икона

Користите генеричку икону за затварање за одбацивање садржаја као што су модали и упозорења.

×

<буттон цласс = "цлосе" > &тимес; </буттон> 

иОС уређаји захтевају хреф="#" за кликове ако радије користите сидро.

< а цласс = "цлосе" хреф = "#" > &тимес; </а>