Компоненте

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

Главу горе! Ови документи су за верзију 2.3.2, која више није званично подржана. Погледајте најновију верзију Боотстрапа!

Примери

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. <див цласс = "бтн-гроуп" >
  2. < а цласс = "бтн дропдовн -тоггле" дата-тоггле = "дропдовн" хреф = "#" >
  3. поступак
  4. <спан цласс = "царет" ></спан>
  5. </а>
  6. <ул цласс = "падајући мени" >
  7. <!-- везе падајућег менија -->
  8. </ул>
  9. </див>

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

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

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

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

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


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

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

  1. <див цласс = "бтн-гроуп" >
  2. <буттон цласс = "бтн" > Радња </буттон>
  3. <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >
  4. <спан цласс = "царет" ></спан>
  5. </буттон>
  6. <ул цласс = "падајући мени" >
  7. <!-- везе падајућег менија -->
  8. </ул>
  9. </див>

Величине

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

  1. <див цласс = "бтн-гроуп" >
  2. <буттон цласс = "бтн бтн-мини" > Радња </буттон>
  3. <буттон цласс = "бтн бтн-мини дропдовн-тоггле" дата-тоггле = "дропдовн" >
  4. <спан цласс = "царет" ></спан>
  5. </буттон>
  6. <ул цласс = "падајући мени" >
  7. <!-- везе падајућег менија -->
  8. </ул>
  9. </див>

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

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

  1. <див цласс = "бтн-гроуп дропуп" >
  2. <буттон цласс = "бтн" > Дропуп </буттон>
  3. <буттон цласс = "бтн дропдовн-тоггле" дата-тоггле = "дропдовн" >
  4. <спан цласс = "царет" ></спан>
  5. </буттон>
  6. <ул цласс = "падајући мени" >
  7. <!-- везе падајућег менија -->
  8. </ул>
  9. </див>

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

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

  1. <див цласс = "пагинатион" >
  2. <ул>
  3. <ли>< а хреф = "#" > Претходно </а ></ли>
  4. <ли>< а хреф = "#" > 1 </а ></ли>
  5. <ли>< а хреф = "#" > 2 </а ></ли>
  6. <ли>< а хреф = "#" > 3 </а ></ли>
  7. <ли>< а хреф = "#" > 4 ​​</а ></ли>
  8. <ли>< а хреф = "#" > 5 </а ></ли>
  9. <ли>< а хреф = "#" > Следеће </а ></ли>
  10. </ул>
  11. </див>

Опције

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

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

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

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

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

Величине

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

  1. <див цласс = "пагинатион пагинатион-ларге" >
  2. <ул>
  3. ...
  4. </ул>
  5. </див>
  6. <див цласс = "пагинатион" >
  7. <ул>
  8. ...
  9. </ул>
  10. </див>
  11. <див цласс = "пагинатион пагинатион-смалл" >
  12. <ул>
  13. ...
  14. </ул>
  15. </див>
  16. <див цласс = "пагинатион пагинатион-мини" >
  17. <ул>
  18. ...
  19. </ул>
  20. </див>

Поравнање

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

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

Пагер

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

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

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

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

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

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

  1. <ул цласс = "пагер" >
  2. <ли цласс = "превиоус" >
  3. < а хреф = "#" > & ларр ; Старији </ а>
  4. </ли>
  5. <ли цласс = "нект" >
  6. < а хреф = "#" > Новији &рарр ; </а>
  7. </ли>
  8. </ул>

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

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

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

Етикете

Етикете Означавање
Уобичајено <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. <див цласс = "херој-јединица" >
  2. <х1> Наслов </х1>
  3. <п> Слоган </п>
  4. <п>
  5. < а цласс = "бтн бтн-примари бтн-ларге" >
  6. Сазнајте више
  7. </а>
  8. </п>
  9. </див>

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

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

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

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

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

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

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

  • 300к200

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

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

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

  • 300к200

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

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

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

  • 300к200

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

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

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

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

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

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

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

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

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

Означавање

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

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

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

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

Још примера

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

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

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

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

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

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

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

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

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

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

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


Опције

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

Упозорење!

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

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

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

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

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

Ох снап! Промените неколико ствари и покушајте поново да пошаљете.
  1. <див цласс = "алерт алерт-еррор" >
  2. ...
  3. </див>

Успех

Добро урађено! Успешно сте прочитали ову важну поруку упозорења.
  1. <див цласс = "алерт алерт-суццесс" >
  2. ...
  3. </див>

Информације

Главу горе! Ово упозорење захтева вашу пажњу, али није превише важно.
  1. <див цласс = "алерт алерт-инфо" >
  2. ...
  3. </див>

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

Басиц

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

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

Пругасте

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

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

Анимирани

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

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

Сложени

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

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

Опције

Додатне боје

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

  1. <див цласс = "прогресс прогресс-инфо" >
  2. <див цласс = "бар" стиле = " видтх : 20 % " ></див>
  3. </див>
  4. <див цласс = "прогресс прогресс-суццесс" >
  5. <див цласс = "бар" стиле = " видтх : 40 % " ></див>
  6. </див>
  7. <див цласс = "прогресс прогресс-варнинг" >
  8. <див цласс = "бар" стиле = " видтх : 60 % " ></див>
  9. </див>
  10. <див цласс = "прогресс прогресс-дангер" >
  11. <див цласс = "бар" стиле = " видтх : 80 % " ></див>
  12. </див>

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

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

  1. <див цласс = "прогресс прогресс-инфо прогресс-стрипед" >
  2. <див цласс = "бар" стиле = " видтх : 20 % " ></див>
  3. </див>
  4. <див цласс = "прогресс прогресс-суццесс прогресс-стрипед" >
  5. <див цласс = "бар" стиле = " видтх : 40 % " ></див>
  6. </див>
  7. <див цласс = "прогресс прогресс-варнинг прогресс-стрипед" >
  8. <див цласс = "бар" стиле = " видтх : 60 % " ></див>
  9. </див>
  10. <див цласс = "прогресс прогресс-дангер прогресс-стрипед" >
  11. <див цласс = "бар" стиле = " видтх : 80 % " ></див>
  12. </див>

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

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

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

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

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

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

64к64

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

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

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

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

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

Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.
  1. <див цласс = "медиа" >
  2. < а цласс = "пулл-лефт" хреф = "#" >
  3. <имг цласс = "медиа-објецт" дата-срц = "холдер.јс/64к64" >
  4. </а>
  5. <див цласс = "медиа-боди" >
  6. <х4 цласс = "медиа-хеадинг" > Наслов медија </х4>
  7. ...
  8.  
  9. <!-- Угнежђени медијски објекат -->
  10. <див цласс = "медиа" >
  11. ...
  12. </див>
  13. </див>
  14. </див>

Листа медија

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

  • 64к64

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

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

    64к64

    Угнежђени медијски наслов

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

    Угнежђени медијски наслов

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

    Угнежђени медијски наслов

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

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

    Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
  1. <ул цласс = "медиа-лист" >
  2. <ли цласс = "медији" >
  3. < а цласс = "пулл-лефт" хреф = "#" >
  4. <имг цласс = "медиа-објецт" дата-срц = "холдер.јс/64к64" >
  5. </а>
  6. <див цласс = "медиа-боди" >
  7. <х4 цласс = "медиа-хеадинг" > Наслов медија </х4>
  8. ...
  9.  
  10. <!-- Угнежђени медијски објекат -->
  11. <див цласс = "медиа" >
  12. ...
  13. </див>
  14. </див>
  15. </ли>
  16. </ул>

Веллс

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

Види, ја сам у бунару!
  1. <див цласс = "велл" >
  2. ...
  3. </див>

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

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

Види, ја сам у бунару!
  1. <див цласс = "велл велл-ларге" >
  2. ...
  3. </див>
Види, ја сам у бунару!
  1. <див цласс = "добро добро-мало" >
  2. ...
  3. </див>

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

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

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

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

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

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

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

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

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

  1. класа = "повуци-лево"
  1. . повуци - лево {
  2. флоат : лево ;
  3. }

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

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

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

.мутед

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

  1. цласс = "искључено"
  1. . пригушен {
  2. боја : #999;
  3. }

.цлеарфик

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

  1. цласс = "цлеарфик"
  1. . цлеарфик {
  2. * зум : 1 ;
  3. &: пре ,
  4. &: после {
  5. дисплеј : табела ;
  6. садржај : "" ;
  7. }
  8. &: после {
  9. јасно : оба ;
  10. }
  11. }