Пример

Преклопни, контекстуални мени за приказ листа веза. Учињено интерактивним помоћу падајућег ЈаваСцрипт додатка .

<ул цласс = "дропдовн-мену" роле = "мену" ариа-лабелледби = "дропдовнМену" >   
  <ли>< а табиндек = "-1" хреф = "#" > Радња </а ></ли>  
  <ли>< а табиндек = "-1" хреф = "#" > Још једна радња </а ></ли>  
  <ли>< а табиндек = "-1" хреф = "#" > Нешто друго овде </а ></ли>  
  <ли цласс = "дивидер" ></ли> 
  <ли>< а табиндек = "-1" хреф = "#" > Одвојена веза </а ></ли>  
</ул>

Означавање

Гледајући само падајући мени, ево потребног ХТМЛ-а. Морате да умотате окидач падајућег менија и падајући мени у .dropdown, или у други елемент који декларише position: relative;. Затим само креирајте мени.

<див цласс = "падајући" > 
  <!-- Веза или дугме за пребацивање падајућег менија -->
  <ул цласс = "дропдовн-мену" роле = "мену" ариа-лабелледби = "дЛабел" >   
    <ли>< а табиндек = "-1" хреф = "#" > Радња </а ></ли>  
    <ли>< а табиндек = "-1" хреф = "#" > Још једна радња </а ></ли>  
    <ли>< а табиндек = "-1" хреф = "#" > Нешто друго овде </а ></ли>  
    <ли цласс = "дивидер" ></ли> 
    <ли>< а табиндек = "-1" хреф = "#" > Одвојена веза </а ></ли>  
  </ул>
</див>

Опције

Поравнајте меније удесно и додајте додатне нивое падајућих менија.

Усклађивање менија

Додајте .pull-rightна .dropdown-menuдесно поравнајте падајући мени.

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

Онемогућене опције менија

Додајте .disabledу а <li>у падајућем менију да бисте онемогућили везу.

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

Подменији на падајућим менијима

Додајте додатни ниво падајућих менија, који се појављују при лебдењу попут оних у ОС Кс-у, уз неке једноставне додатке за означавање. Додајте .dropdown-submenuу било који liу постојећем падајућем менију за аутоматско обликовање.

Уобичајено

Дропуп

Леви подмени

<ул цласс = "дропдовн-мену" роле = "мену" ариа-лабелледби = "дЛабел" >   
  ...
  <ли цласс = "падајући-подмени" > 
    < а табиндек = "-1" хреф = "#" > Више опција < /а>  
    <ул цласс = "падајући мени" > 
      ...
    </ул>
  </ли>
</ул>

Примери

Две основне опције, заједно са још две специфичне варијације.

Група са једним дугметом

Умотајте низ дугмади са .btnу .btn-group.

<див цласс = "бтн-гроуп" > 
  <буттон цласс = "бтн" > Лево </буттон> 
  <буттон цласс = "бтн" > Средња </буттон> 
  <буттон цласс = "бтн" > Десно </буттон> 
</див>

Више група дугмади

Комбинујте скупове <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класу.

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

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

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

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

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

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

Дисаблед стате

За било коју компоненту за навигацију (картице, таблете или листу), додајте .disabledза сиве везе и без ефеката лебдења . Међутим, везе ће остати на које се може кликнути осим ако не уклоните hrefатрибут. Алтернативно, можете да примените прилагођени ЈаваСцрипт да бисте спречили те кликове.

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

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

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

Стацкабле

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

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

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

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

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

Падајући мени

Додајте падајуће меније са мало додатног ХТМЛ-а и падајуће ЈаваСцрипт додатке .

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

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

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

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

Нав листе

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

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

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

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

БелешкаЗа угнежђење унутар навигационе листе, укључите class="nav nav-list"у било који угнежђени <ul>.

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

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

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

Таббабле нав

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

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

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

Ја сам у одељку 1.

Здраво, ја сам у одељку 2.

Шта има девојко, ово је одељак 3.

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

Фаде ин табс

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

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

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

Табулатор у било ком правцу

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

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

Ја сам у одељку А.

Здраво, ја сам у одељку Б.

Шта има девојко, ово је одељак Ц.

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

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

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

Ја сам у одељку А.

Здраво, ја сам у одељку Б.

Шта има девојко, ово је одељак Ц.

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

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

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

Ја сам у одељку А.

Здраво, ја сам у одељку Б.

Шта има девојко, ово је одељак Ц.

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

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

За почетак, навигационе траке су статичне (нису фиксиране на врху) и укључују подршку за назив пројекта и основну навигацију. Поставите га било где у оквиру .container, који поставља ширину вашег сајта и садржаја.

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

Компоненте Навбар-а

Марка

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

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

Нав линкови

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

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

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

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

Формс

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

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

Образац за претрагу

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

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

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

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

Коришћење падајућих менија

Додајте падајуће меније и падајуће меније у навигацију са мало ознака и падајућим ЈаваСцрипт додацима .

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

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

Текст

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

Опционе варијације приказа

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

Фиксно на врху

Додајте .navbar-fixed-topи не заборавите да узмете у обзир скривену област испод ње додавањем најмање 40 пиксела paddingу <body>. Обавезно додајте ово после основног Боотстрап ЦСС-а и пре опционог одговорног ЦСС-а.

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

Фиксирано на дно

Додајте .navbar-fixed-bottomуместо тога.

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

Статичка горња навигациона трака

Направите навигациону траку пуне ширине која се помера са странице додавањем .navbar-static-top. За разлику од .navbar-fixed-topкласе, не морате да мењате допуну на body.

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

Респонсиве Навбар

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

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

Главу горе!Реакциона навигациона трака захтева додатак за сажимање и ЦСС датотеку која реагује на Боотстрап .

Обрнута варијација

Измените изглед навигационе траке додавањем.navbar-inverse .

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

Примери

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

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

Стандардна пагинација

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

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

Опције

Онемогућено и активно стање

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

<див цласс = "пагинатион" > 
  <ул>
    <ли цласс = "дисаблед" >< а хреф = "#" > & лакуо ; </а></ли>  
    <ли цласс = "ацтиве" >< а хреф = " # " > 1 </а ></ли>  
    ...
  </ул>
</див>

Опционо можете да замените активна или онемогућена сидра за распоне да бисте уклонили функционалност клика уз задржавање предвиђених стилова.

<див цласс = "пагинатион" > 
  <ул>
    <ли цласс = "дисаблед" ><спан> &лакуо; </спан></ли> 
    <ли цласс = "ацтиве" ><спан> 1 </спан></ли> 
    ...
  </ул>
</див>

Величине

Желите већу или мању пагинацију? Додајте .pagination-large, .pagination-small, или .pagination-miniза додатне величине.

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

Поравнање

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

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

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

Пагер

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

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

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

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

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

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

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

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

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

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

Етикете

Етикете	Означавање
Уобичајено	`<span class="label">Default</span>`
Успех	`<span class="label label-success">Success</span>`
Упозорење	`<span class="label label-warning">Warning</span>`
Важно	`<span class="label label-important">Important</span>`
Инфо	`<span class="label label-info">Info</span>`
Инверзно	`<span class="label label-inverse">Inverse</span>`

Значке

Име	Пример	Означавање
Уобичајено	1	`<span class="badge">1</span>`
Успех	2	`<span class="badge badge-success">2</span>`
Упозорење	4	`<span class="badge badge-warning">4</span>`
Важно	6	`<span class="badge badge-important">6</span>`
Инфо	8	`<span class="badge badge-info">8</span>`
Инверзно	10	`<span class="badge badge-inverse">10</span>`

Лако склопиви

За лаку примену, ознаке и значке ће се једноставно скупити (преко ЦСС-овог :emptyселектора) када у њима нема садржаја.

Јединица хероја

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

Здраво Свете!

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

Сазнајте више

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

Заглавље странице

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

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

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

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

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

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

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

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

поступак поступак
Ознака сличице

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

поступак поступак
Ознака сличице

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

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

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

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

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

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

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

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

Означавање

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

<ул цласс = "тхумбнаилс" > 
  <ли цласс = "спан4" > 
    < а хреф = "#" цласс = "тхумбнаил" >  
      <имг дата-срц = "холдер.јс/300к200" алт = "" >  
    </а>
  </ли>
  ...
</ул>

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

<ул цласс = "тхумбнаилс" > 
  <ли цласс = "спан4" > 
    <див цласс = "тхумбнаил" > 
      <имг дата-срц = "холдер.јс/300к200" алт = "" >  
      <х3> Ознака сличице </х3>
      <п> Натпис сличице... </п>
    </див>
  </ли>
  ...
</ул>

Још примера

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

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

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

Упозорење! Најбоље да се провери, не изгледаш баш добро.

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

Дугмад за одбацивање

Мобилни Сафари и Мобиле Опера претраживачи, поред data-dismiss="alert"атрибута, захтевају и href="#"за одбацивање упозорења када се користи <a>ознака.

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

Алтернативно, можете користити <button>елемент са атрибутом података, што смо одлучили да урадимо за наше документе. Када користите <button>, морате укључити type="button"или се ваши обрасци можда неће послати.

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

Одбаци упозорења преко ЈаваСцрипт-а

Користите јКуери додатак за упозорења за брзо и лако одбацивање упозорења.

Опције

За дуже поруке повећајте допуну на врху и дну омота упозорења додавањем .alert-block.

Упозорење!

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

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

Контекстуалне алтернативе

Додајте опционе класе да бисте променили конотацију упозорења.

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

Ох снап! Промените неколико ствари и покушајте поново да пошаљете.

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

Успех

Добро урађено! Успешно сте прочитали ову важну поруку упозорења.

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

Информације

Главу горе! Ово упозорење захтева вашу пажњу, али није превише важно.

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

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

Басиц

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

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

Пругасте

Користи градијент за стварање пругастог ефекта. Није доступно у ИЕ7-8.

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

Анимирани

Додајте .activeу да .progress-stripedбисте анимирали пруге с десна на лево. Није доступно у свим верзијама ИЕ.

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

Сложени

Ставите више шипки у исте .progressда бисте их сложили.

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

Опције

Додатне боје

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

<див цласс = "прогресс прогресс-инфо" > 
  <див цласс = "бар" стиле = " видтх : 20 % " ></див>   
</див>
<див цласс = "прогресс прогресс-суццесс" > 
  <див цласс = "бар" стиле = " видтх : 40 % " ></див>   
</див>
<див цласс = "прогресс прогресс-варнинг" > 
  <див цласс = "бар" стиле = " видтх : 60 % " ></див>   
</див>
<див цласс = "прогресс прогресс-дангер" > 
  <див цласс = "бар" стиле = " видтх : 80 % " ></див>   
</див>

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

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

<див цласс = "прогресс прогресс-инфо прогресс-стрипед" > 
  <див цласс = "бар" стиле = " видтх : 20 % " ></див>   
</див>
<див цласс = "прогресс прогресс-суццесс прогресс-стрипед" > 
  <див цласс = "бар" стиле = " видтх : 40 % " ></див>   
</див>
<див цласс = "прогресс прогресс-варнинг прогресс-стрипед" > 
  <див цласс = "бар" стиле = " видтх : 60 % " ></див>   
</див>
<див цласс = "прогресс прогресс-дангер прогресс-стрипед" > 
  <див цласс = "бар" стиле = " видтх : 80 % " ></див>   
</див>

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

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

Верзије старије од Интернет Екплорер 10 и Опера 12 не подржавају анимације.

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

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

Подразумевани медији дозвољавају да се медијски објекат (слике, видео, аудио) лебди лево или десно од блока садржаја.

Наслов медија

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

Наслов медија

<див цласс = "медиа" > 
  < а цласс = "пулл-лефт" хреф = "#" >  
    <имг цласс = "медиа-објецт" дата-срц = "холдер.јс/64к64" >  
  </а>
  <див цласс = "медиа-боди" > 
    <х4 цласс = "медиа-хеадинг" > Наслов медија </х4> 
    ...
 
    <!-- Угнежђени медијски објекат -->
    <див цласс = "медиа" > 
      ...
    </див>
  </див>
</див>

Листа медија

Уз мало додатне ознаке, можете користити медије унутар листе (корисно за теме коментара или листе чланака).

Наслов медија

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

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

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

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

<ул цласс = "медиа-лист" > 
  <ли цласс = "медији" > 
    < а цласс = "пулл-лефт" хреф = "#" >  
      <имг цласс = "медиа-објецт" дата-срц = "холдер.јс/64к64" >  
    </а>
    <див цласс = "медиа-боди" > 
      <х4 цласс = "медиа-хеадинг" > Наслов медија </х4> 
      ...
 
      <!-- Угнежђени медијски објекат -->
      <див цласс = "медиа" > 
        ...
     </див>
    </див>
  </ли>
</ул>

Веллс

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

Види, ја сам у бунару!

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

Факултативни часови

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

Види, ја сам у бунару!

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

Види, ја сам у бунару!

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

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

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

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

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

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

Часови за помоћнике

Једноставне, фокусиране класе за мала подешавања приказа или понашања.

.повуци-лево

Померите елемент лево

класа = "повуци-лево"

. повуци - лево {
  флоат : лево ;
}

.повуци-десно

Померите елемент удесно

цласс = "повуци-десно"

. повуци - десно {
  флоат : десно ;
}

.мутед

Промените боју елемента у#999

цласс = "искључено"

. пригушен {
  боја : #999; 
}

.цлеарфик

Обришите floatна било ком елементу

цласс = "цлеарфик"

. цлеарфик {
  * зум : 1 ; 
  &: пре ,
  &: после {
    дисплеј : табела ;
    садржај : "" ; 
  }
  &: после {
    јасно : оба ;
  }
}

Падајући менији

Пример

Означавање

Опције

Усклађивање менија

Онемогућене опције менија

Подменији на падајућим менијима

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

Примери

Група са једним дугметом

Више група дугмади

Вертикалне групе дугмади

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

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

Падајући менији са дугметом

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

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

Захтева ЈаваСцрипт

Падајући мени дугмета за раздвајање

Величине

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

Навигација: картице, таблете и листе

Лагане подразумеване вредности Иста ознака, различите класе

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

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

Дисаблед стате

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

Стацкабле

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

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

Падајући мени

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

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

Нав листе

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

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

Таббабле нав

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

Фаде ин табс

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

Табулатор у било ком правцу

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

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

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

Навбар

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

Компоненте Навбар-а

Марка

Нав линкови

Формс

Образац за претрагу

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

Коришћење падајућих менија

Текст

Опционе варијације приказа

Фиксно на врху

Фиксирано на дно

Статичка горња навигациона трака

Респонсиве Навбар

Обрнута варијација

Хлебне мрвице

Примери

Пагинација Две опције за листање садржаја

Стандардна пагинација

Опције

Онемогућено и активно стање

Величине

Поравнање

Пагер

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

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

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

Ознаке и значке

Етикете

Значке

Лако склопиви

Типографске компоненте

Јединица хероја

Здраво Свете!

Заглавље странице