Компоненте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Величине

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

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

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

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

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

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

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

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

Пагинација на више страница

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

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

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

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

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

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

Примери

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

Означавање

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

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

Пејџер За брзе претходне и следеће везе

О пејџеру

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

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

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

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

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

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

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

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

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

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

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

Означавање

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маркуп

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

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

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

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

Још примера

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

Лагане подразумеване вредности

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

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

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

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


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

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

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

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

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

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

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

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

Упозорење!

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

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

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

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

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

Успех

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

Информације

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

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

Басиц

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

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

Пругасте

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

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

Анимирани

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

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

Опције и подршка претраживача

Додатне боје

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

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

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

Понашање

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

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

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

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

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

Веллс

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

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

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

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

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

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

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