Компоненте
Преко десетак компоненти за вишекратну употребу направљених да обезбеде иконографију, падајуће меније, групе уноса, навигацију, упозорења и још много тога.
Глификони
Доступни глифови
Укључује преко 250 глифова у формату фонта из сета Глипхицон Халфлингс. Глипхицонс Халфлингс обично нису доступни бесплатно, али их је њихов креатор учинио доступним за Боотстрап бесплатно. У знак захвалности, само вас молимо да укључите везу до Глификона кад год је то могуће.
- глификон глификон-звездица
- глификон глификон-плус
- глификон глификон-евро
- глификон глификон-еур
- глификон глификон-минус
- глификон глификон-облак
- глификон глификон-коверат
- глификон глификон-оловка
- глификон глификон-стакло
- глификон глификон-музика
- глификон глификон-претрага
- глификон глификон-срце
- глификон глификон-звезда
- глификон глификон-звезда-празан
- глификон глификон-корисник
- глификон глификон-филм
- глификон глификон-тх-велики
- глификон глификон-тх
- глификон глипхицон-тх-лист
- глификон глификон-ок
- глификон глификон-уклонити
- глификон глификон-зум-ин
- глификон глификон-зумирање
- глификон глификон-офф
- глификон глификон-сигнал
- глификон глификон-зупчаник
- глификон глификон-смеће
- глификон глификон-дом
- глификон глификон-датотека
- глификон глификон-време
- глификон глификон-пут
- глипхицон глипхицон-довнлоад-алт
- глификон глификон-преузимање
- глификон глипхицон-уплоад
- глификон глификон-примљено
- глификон глификон-игра-круг
- глификон глификон-понављање
- глификон глификон-освежи
- глификон глипхицон-лист-алт
- глификон глификон-брава
- глификон глификон-застава
- глификон глификон-слушалице
- глификон глификон-волум-искључен
- глификон глификон-смањи звук
- глификон глификон-волумен-уп
- глификон глипхицон-крцоде
- глификон глификон-баркод
- глификон глификон-ознака
- глификон глификон-ознаке
- глификон глификон-књига
- глификон глификон-обележивач
- глификон глификон-отисак
- глификон глификон-камера
- глификон глификон-фонт
- глификон глификон-подебљан
- глификон глификон-курзив
- глификон глификон-текст-висина
- глификон глификон-текст-ширина
- глификон глификон-поравнати-лево
- глификон глификон-поравнати-центар
- глификон глификон-поравнати-десно
- глификон глификон-поравнати-оправдати
- глификон глификон-лист
- глификон глификон-увлачење-лево
- глификон глификон-увлачење-десно
- глификон глификон-фацетиме-видео
- глификон глификон-слика
- глификон глификон-карта-маркер
- глификон глификон-подесити
- глификон глификон-боја
- глификон глификон-уреди
- глификон глификон-удео
- глификон глификон-провера
- глификон глификон-померати
- глификон глификон-корак-назад
- глификон глификон-брзо-назад
- глификон глификон-назад
- глификон глификон-игра
- глификон глификон-пауза
- глификон глификон-стоп
- глификон глификон-напред
- глификон глификон-премотавање унапред
- глификон глификон-корак напред
- глификон глификон-избацити
- глификон глификон-шеврон-лево
- глификон глификон-шеврон-десно
- глификон глификон-плус-знак
- глификон глификон-минус-знак
- глификон глификон-уклони-знак
- глификон глификон-ок-знак
- глификон глификон-знак-питање
- глификон глификон-инфо-знак
- глификон глификон-снимак екрана
- глификон глификон-уклони-круг
- глификон глификон-ок-круг
- глификон глификон-забран-круг
- глификон глификон-стрелица-лево
- глификон глификон-стрелица-десно
- глификон глификон-стрелица-горе
- глификон глификон-стрелица-доле
- глификон глификон-удео-алт
- глификон глипхицон-ресизе-фулл
- глификон глификон-промена величине-мали
- глификон глификон-узвичник-знак
- глификон глификон-дар
- глификон глификон-лист
- глификон глификон-ватра
- глификон глификон-отворено око
- глификон глификон-око-затвори
- глификон глификон-знак-упозорење
- глификон глификон-раван
- глификон глификон-календар
- глификон глификон-случајан
- глификон глификон-коментар
- глификон глификон-магнет
- глификон глификон-шеврон-уп
- глификон глификон-шеврон-доле
- глификон глификон-ретвит
- глификон глификон-колица за куповину
- глификон глификон-фолдер-затвори
- глификон глификон-фасцикла-отворена
- глификон глификон-промена величине-вертикални
- глификон глификон-промена величине-хоризонтално
- глификон глификон-хдд
- глификон глификон-булхорн
- глификон глификон-звоно
- глификон глификон-сертификат
- глификон глификон-палац-горе
- глификон глификон-палац-доле
- глификон глификон-рука-десно
- глификон глификон-рука-лево
- глификон глификон-рука-горе
- глификон глификон-рука-доле
- глификон глификон-круг-стрелица-десно
- глификон глификон-круг-стрелица-лево
- глификон глификон-круг-стрелица-горе
- глификон глификон-круг-стрелица-доле
- глификон глификон-глобус
- глификон глификон-кључ
- глификон глификон-задаци
- глификон глификон-филтер
- глификон глификон-актовка
- глификон глификон на целом екрану
- глификон глификон-контролна табла
- глификон глификон-спојница
- глификон глификон-срце-празно
- глификон глификон-веза
- глификон глификон-телефон
- глификон глификон-пин
- глификон глификон-усд
- глификон глификон-гбп
- глификон глификон-врста
- глификон глификон-разврстај по абецеди
- глификон глификон-разврстај-по-азбуци-алт
- глификон глификон-разврстај по реду
- глификон глификон-сорт-по-ред-алт
- глификон глификон сортирај по атрибутима
- глификон глипхицон-сорт-би-аттрибутес-алт
- глификон глификон-неозначен
- глификон глификон-прошири
- глификон глификон-срушити се
- глификон глификон-срушити се
- глификон глификон-лог-ин
- глификон глификон-блиц
- глификон глификон-одјава
- глификон глификон-нови-прозор
- глификон глификон-запис
- глификон глификон-сачувај
- глификон глификон-отворен
- глификон глификон-сачуван
- глификон глификон-увоз
- глификон глификон-извоз
- глификон глификон-пошаљи
- глификон глификон-флопи-диск
- глификон глификон-флопи-сачуван
- глификон глификон-дискета-уклони
- глификон глипхицон-флоппи-саве
- глификон глификон-флопи-отворен
- глификон глификон-кредитна-картица
- глификон глификон-пренос
- глификон глификон-прибор за јело
- глификон глификон-заглавље
- глификон глификон-компримован
- глификон глификон-слушалица
- глификон глификон-телефон-алт
- глификон глификон-кула
- глификон глификон-стат
- глипхицон глипхицон-сд-видео
- глипхицон глипхицон-хд-видео
- глификон глификон-поднаслови
- глификон глификон-звук-стерео
- глификон глификон-звук-долби
- глификон глификон-звук-5-1
- глификон глификон-звук-6-1
- глификон глификон-звук-7-1
- глификон глификон-ознака ауторског права
- глификон глификон-регистрациони знак
- глипхицон глипхицон-цлоуд-довнлоад
- глификон глификон-облак-уплоад
- глификон глификон-дрво-четина
- глификон глификон-дрво-листопадни
- глипхицон глипхицон-цд
- глификон глификон-сачувај-датотеку
- глификон глификон-отвори-фајл
- глификон глификон-ниво навише
- глификон глификон-копија
- глификон глификон-паста
- глификон глификон-упозорење
- глификон глификон-еквилајзер
- глификон глификон-краљ
- глификон глификон-краљица
- глификон глификон-пешак
- глификон глификон-епископ
- глификон глификон-витез
- глификон глификон-беба-формула
- глификон глификон-шатор
- глификон глификон-табла
- глификон глификон-кревет
- глификон глификон-јабука
- глификон глификон-брисање
- глификон глификон-пешчани сат
- глификон глификон-лампа
- глификон глификон-двојник
- глификон глификон-прасица
- глификон глификон-маказе
- глификон глификон-битцоин
- глипхицон глипхицон-бтц
- глипхицон глипхицон-кбт
- глификон глификон-јен
- глификон глипхицон-јпи
- глификон глификон-рубља
- глификон глификон-руб
- глификон глификон-скала
- глификон глификон-лед-лизалица
- глификон глификон-лед-лизалица-укус
- глификон глификон-образовање
- глификон глификон-опција-хоризонтално
- глификон глификон-опција-вертикала
- глификон глификон-мени-хамбургер
- глификон глификон-модални-прозор
- глификон глификон-уље
- глификон глификон-зрно
- глификон глификон-наочаре за сунце
- глификон глификон-величина текста
- глификон глификон-текст-боја
- глификон глификон-текст-позадина
- глификон глификон-објекат-поравнање-врх
- глификон глификон-објекат-поравнати-дно
- глификон глификон-објекат-поравнати-хоризонтално
- глификон глификон-објекат-поравнати-лево
- глификон глификон-објекат-поравнати-вертикалан
- глификон глификон-објекат-поравнати-десно
- глификон глификон-троугао-десно
- глификон глификон-троугао-лево
- глификон глификон-троугао-дно
- глификон глификон-троугао-врх
- глификон глификон-конзола
- глификон глификон-надпис
- глификон глификон-подпис
- глификон глификон-мени-лево
- глификон глификон-мени-десно
- глификон глификон-мени-доле
- глификон глификон-мени-уп
Како се користи
Из разлога перформанси, све иконе захтевају основну класу и појединачну класу икона. Да бисте га користили, поставите следећи код било где. Обавезно оставите размак између иконе и текста ради правилног попуњавања.
Не мешати са другим компонентама
Класе икона се не могу директно комбиновати са другим компонентама. Не треба их користити заједно са другим класама на истом елементу. Уместо тога, додајте угнежђени <span>и примените класе икона на <span>.
Само за употребу на празним елементима
Класе икона треба да се користе само на елементима који не садрже текстуални садржај и немају подређене елементе.
Промена локације фонта иконе
Боотстрап претпоставља да ће се датотеке фонтова икона налазити у ../fonts/директоријуму, у односу на компајлиране ЦСС датотеке. Премјештање или преименовање тих датотека фонтова значи ажурирање ЦСС-а на један од три начина:
- Промените
@icon-font-pathи/или@icon-font-nameпроменљиве у изворним датотекама Лесс. - Користите опцију релативних УРЛ -ова коју обезбеђује компајлер Лесс.
- Промените
url()путање у преведеном ЦСС-у.
Користите било коју опцију која најбоље одговара вашем специфичном подешавању развоја.
Доступне иконе
Модерне верзије помоћних технологија ће најавити ЦСС генерисан садржај, као и специфичне Уницоде карактере. Да бисмо избегли ненамеран и збуњујући излаз у читачима екрана (нарочито када се иконе користе искључиво за декорацију), сакривамо их помоћу aria-hidden="true"атрибута.
Ако користите икону за преношење значења (а не само као декоративни елемент), обезбедите да се ово значење пренесе и на помоћне технологије – на пример, укључите додатни садржај, визуелно скривен .sr-onlyкласом.
Ако креирате контроле без другог текста (као што је <button>онај који садржи само икону), увек треба да обезбедите алтернативни садржај да бисте идентификовали сврху контроле, тако да ће имати смисла за кориснике помоћних технологија. У овом случају, можете додати aria-labelатрибут на самој контроли.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Примери
Користите их у дугмадима, групама дугмади за траку са алаткама, навигацију или уносе у претходном обрасцу.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>Икона која се користи у упозорењу да се каже да је у питању порука о грешци, са додатним .sr-onlyтекстом за преношење овог наговештаја корисницима помоћних технологија.
Грешка:Унесите исправну е-маил адресу
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>Падајући мени
Преклопни, контекстуални мени за приказ листа веза. Учињено интерактивним помоћу падајућег ЈаваСцрипт додатка .
Пример
Умотајте окидач падајућег менија и падајући мени у .dropdown, или у други елемент који декларише position: relative;. Затим додајте ХТМЛ менија.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Падајући менији се могу променити тако да се проширују нагоре (уместо надоле) додавањем .dropupу надређени.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Поравнање
Подразумевано, падајући мени се аутоматски поставља 100% од врха и дуж леве стране свог надређеног. Додајте .dropdown-menu-rightна .dropdown-menuдесно поравнајте падајући мени.
Може захтевати додатно позиционирање
Падајући мени се аутоматски позиционира преко ЦСС-а унутар нормалног тока документа. То значи да родитељи могу да исеку падајуће меније са одређеним overflowсвојствима или да се појављују ван граница оквира за приказ. Сами решите ове проблеме када се појаве.
Застарело .pull-rightпоравнање
Од верзије 3.1.0, застарели смо .pull-rightу падајућим менијима. Да бисте десним поравнали мени, користите .dropdown-menu-right. Десно поравнате навигационе компоненте у навигационој траци користе микс верзију ове класе да аутоматски поравнају мени. Да бисте га заменили, користите .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Заглавља
Додајте заглавље да означите делове радњи у било ком падајућем менију.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Дивидер
Додајте разделник у одвојене серије веза у падајућем менију.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Онемогућене ставке менија
Додајте .disabledу а <li>у падајућем менију да бисте онемогућили везу.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>Групе дугмади
Групирајте низ дугмади заједно у једну линију са групом дугмади. Додајте опциони ЈаваСцрипт радио и понашање у стилу поља за потврду помоћу нашег додатка за дугмад .
Објашњење алата и искачући огласи у групама дугмади захтевају посебно подешавање
Када користите описе алатки или искачуће елементе на елементима унутар .btn-group, мораћете да наведете опцију container: 'body'да бисте избегли нежељене нежељене ефекте (као што је елемент који расте шири и/или губи своје заобљене углове када се покрене опис алата или искачући прозор).
Уверите се да је исправно roleи обезбедите етикету
Да би помоћне технологије – као што су читачи екрана – пренеле да је низ дугмади груписан, потребно је обезбедити одговарајући roleатрибут. За групе дугмади, ово би било role="group", док траке са алаткама треба да имају role="toolbar".
Један изузетак су групе које садрже само једну контролу (на пример групе са поравнатим дугмадима са <button>елементима) или падајући мени.
Поред тога, групама и тракама са алаткама треба дати експлицитну ознаку, јер их већина помоћних технологија иначе неће објавити, упркос присуству исправног roleатрибута. У примерима датим овде користимо , али се могу користити aria-labelи алтернативе као што су.aria-labelledby
Основни пример
Умотајте низ дугмади са .btnу .btn-group.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>Трака са дугмадима
Комбинујте скупове <div class="btn-group">у а <div class="btn-toolbar">за сложеније компоненте.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>Одређивање величине
Уместо да примењујете класе величине дугмади на свако дугме у групи, само додајте .btn-group-*сваком .btn-group, укључујући и када угнеждите више група.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>Нестинг
Поставите а .btn-groupунутар другог .btn-groupкада желите падајуће меније помешане са низом дугмади.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Вертикална варијација
Нека скуп дугмади изгледа вертикално наслагано, а не хоризонтално. Падајући мени дугмета за раздвајање овде није подржан.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Оправдане групе дугмади
Учините да се група дугмади растегне у једнаким величинама тако да обухвата целу ширину свог родитеља. Такође ради са падајућим менијима дугмади унутар групе дугмади.
Руковање границама
Због специфичног ХТМЛ-а и ЦСС-а који се користе за прављење дугмади (наиме display: table-cell), границе између њих су удвостручене. У регуларним групама дугмади, margin-left: -1pxкористи се за слагање ивица уместо за њихово уклањање. Међутим, marginне ради са display: table-cell. Као резултат тога, у зависности од ваших прилагођавања за Боотстрап, можда ћете желети да уклоните или поново обојите ивице.
ИЕ8 и границе
Интернет Екплорер 8 не приказује ивице дугмади у групи са поравнатом дугмадима, било да је укључена <a>или <button>елементи. Да бисте то заобишли, умотајте свако дугме у друго .btn-group.
Погледајте #12476 за више информација.
Са <a>елементима
Само умотајте серију .btnс у .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Везе које делују као дугмад
Ако се <a>елементи користе да делују као дугмад – покрећући функционалност унутар странице, уместо да се крећу до другог документа или одељка у оквиру тренутне странице – треба им такође дати одговарајући role="button".
Са <button>елементима
Да бисте користили оправдане групе дугмади са <button>елементима, морате свако дугме умотати у групу дугмади . Већина прегледача не примењује правилно наш ЦСС за прављење <button>елемената, али пошто подржавамо падајуће меније са дугмадима, можемо то да заобиђемо.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Падајући мени са дугметом
Користите било које дугме да бисте покренули падајући мени тако што ћете га поставити унутар а .btn-groupи обезбедити одговарајућу ознаку менија.
Зависност од додатака
Падајући мени са дугметом захтева да додатак за падајући мени буде укључен у вашу верзију Боотстрап-а.
Падајући мени са једним дугметом
Претворите дугме у падајући прекидач са неким основним променама ознака.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Падајући мени дугмета за раздвајање
Слично томе, креирајте падајуће меније за подељено дугме са истим променама ознака, само са посебним дугметом.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Одређивање величине
Падајући мени са дугмадима функционише са дугмадима свих величина.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>Дропуп варијација
Покрените падајуће меније изнад елемената додавањем .dropupу надређени.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>Групе уноса
Проширите контроле обрасца додавањем текста или дугмади пре, после или са обе стране било ког текста заснованог на тексту <input>. Користите .input-groupса .input-group-addonили .input-group-btnза додавање или додавање елемената једном .form-control.
<input>Само текстуални
Избегавајте коришћење <select>елемената овде јер се не могу у потпуности стилизовати у ВебКит претраживачима.
Избегавајте коришћење <textarea>елемената овде јер се њихов rowsатрибут у неким случајевима неће поштовати.
Објашњење алатки и искачући огласи у групама за унос захтевају посебну поставку
Када користите описе алата или искачуће елементе на елементима унутар .input-group, мораћете да наведете опцију container: 'body'да бисте избегли нежељене нежељене ефекте (као што је елемент који расте шири и/или губи своје заобљене углове када се покрене опис алатке или искачући прозор).
Не мешати са другим компонентама
Немојте мешати групе образаца или класе колона мреже директно са улазним групама. Уместо тога, угнездите улазну групу унутар групе образаца или елемента који се односи на мрежу.
Увек додајте ознаке
Читачи екрана ће имати проблема са вашим обрасцима ако не укључите ознаку за сваки унос. За ове групе уноса, обезбедите да се свака додатна ознака или функционалност пренесе на помоћне технологије.
Тачна техника која ће се користити (видљиви <label>елементи, <label>елементи скривени коришћењем .sr-onlyкласе или коришћење атрибута aria-label, aria-labelledby, aria-describedby, titleили placeholderатрибута) и које додатне информације треба да се пренесу варираће у зависности од тачног типа виџета интерфејса који имплементирате. Примери у овом одељку пружају неколико предложених приступа специфичних за случај.
Основни пример
Поставите један додатак или дугме са обе стране улаза. Такође можете поставити један на обе стране улаза.
Не подржавамо више додатака ( .input-group-addonили .input-group-btn) на једној страни.
Не подржавамо више контрола обрасца у једној групи уноса.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>Одређивање величине
Додајте релативне класе величине обрасца у .input-groupсаму себе и садржај унутар ће аутоматски променити величину — нема потребе за понављањем класа величине контроле обрасца на сваком елементу.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Поља за потврду и радио додаци
Поставите било које поље за потврду или радио опцију у додатак групе за унос уместо текста.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Додаци за дугме
Дугмад у групама за унос су мало другачија и захтевају један додатни ниво угнежђења. Уместо .input-group-addon, мораћете да користите .input-group-btnда омотате дугмад. Ово је потребно због подразумеваних стилова прегледача који се не могу заменити.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Дугмад са падајућим менијима
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Сегментирана дугмад
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>Више дугмади
Иако можете имати само један додатак по страни, можете имати више дугмади унутар једног .input-group-btn.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>Навс
Навс доступни у Боотстрап-у имају заједничку ознаку, почевши од основне .navкласе, као и дељена стања. Замените класе модификатора да бисте се пребацивали између сваког стила.
Табс
Имајте на уму да .nav-tabsкласа захтева .navосновну класу.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>пилуле
Узмите исти ХТМЛ, али .nav-pillsуместо тога користите:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Пилуле се такође могу вертикално слагати. Само додајте .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Оправдано
Лако направите картице или таблете једнаке ширине њихових родитеља на екранима ширим од 768 пиксела са .nav-justified. На мањим екранима, навигацијске везе су наслагане.
Оправдане навигацијске везе за навигацију тренутно нису подржане.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Онемогућене везе
За било коју компоненту за навигацију (таблице или таблете), додајте .disabledза сиве везе и без ефеката лебдења .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Коришћење падајућих менија
Додајте падајуће меније са мало додатног ХТМЛ-а и падајуће ЈаваСцрипт додатке .
Картице са падајућим менијима
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Таблете са падајућим менијима
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Навбар
Подразумевана навигациона трака
Навбари су брзе мета компоненте које служе као заглавља за навигацију за вашу апликацију или сајт. Они почињу да се скупљају (и могу се мењати) у приказима за мобилне уређаје и постају хоризонтални како се ширина расположивог оквира за приказ повећава.
Оправдане навигацијске везе за навигацију тренутно нису подржане.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Слика бренда
Замените бренд навигационе траке својом сликом тако што ћете заменити текст за <img>. Пошто .navbar-brandима свој пад и висину, можда ћете морати да замените неки ЦСС у зависности од ваше слике.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Формс
Поставите садржај обрасца унутар .navbar-formза правилно вертикално поравнање и скупљено понашање у уским оквирима за приказ. Користите опције поравнања да бисте одлучили где ће се налазити унутар садржаја навигационе траке.
Као хеадс уп, .navbar-formдели већи део свог кода са .form-inlineпреко микин-а. Неке контроле обрасца, као што су групе за унос, могу захтевати да се фиксне ширине правилно приказују унутар траке за навигацију.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Дугмад
Додајте .navbar-btnкласу <button>елементима који се не налазе у а <form>да бисте их вертикално центрирали на навигационој траци.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Текст
Умотајте низове текста у елемент са .navbar-text, обично на <p>ознаку за исправан почетак и боју.
<p class="navbar-text">Signed in as Mark Otto</p>Не-навигацијске везе
За људе који користе стандардне везе које нису у оквиру стандардне компоненте навигационе траке, користите .navbar-linkкласу да додате одговарајуће боје за подразумеване и инверзне опције навигационе траке.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Поравнање компоненти
Поравнајте навигацијске везе, обрасце, дугмад или текст користећи .navbar-leftили .navbar-rightуслужне класе. Обе класе ће додати ЦСС флоат у наведеном правцу. На пример, да бисте поравнали навигационе везе, ставите их у одвојено <ul>са примењеном одговарајућом класом корисности.
Ове класе су комбиноване верзије .pull-leftи .pull-right, али су ограничене на медијске упите ради лакшег руковања компонентама навигационе траке у различитим величинама уређаја.
Фиксно на врху
Додајте .navbar-fixed-topи укључите .containerили .container-fluidу центар и садржај навигационе траке.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Фиксно на дну
Додајте .navbar-fixed-bottomи укључите .containerили .container-fluidу центар и садржај навигационе траке.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Статички врх
Направите навигациону траку пуне ширине која се помера у страну тако што ћете додати .navbar-static-topи укључити .containerили .container-fluidу центар и садржај навигационе траке.
За разлику од .navbar-fixed-*класа, не морате да мењате допуну на body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Обрнута навигациона трака
Измените изглед навигационе траке додавањем .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Хлебне мрвице
Означите локацију тренутне странице унутар хијерархије навигације.
Сепаратори се аутоматски додају у ЦСС преко :beforeи content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Пагинација
Обезбедите везе за пагинацију за свој сајт или апликацију са компонентом пагинације на више страница или једноставнијом алтернативом пејџером .
Подразумевана пагинација
Једноставна пагинација инспирисана Рдио-ом, одлична за апликације и резултате претраге. Велики блок је тешко промашити, лако је скалабилан и пружа велике површине кликова.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Означавање компоненте пагинације
Компонента пагинације треба да буде умотана у <nav>елемент да би се идентификовала као одељак за навигацију за читаче екрана и друге помоћне технологије. Поред тога, пошто страница вероватно већ има више од једног одељка за навигацију (као што је примарна навигација у заглављу или навигација на бочној траци), препоручљиво је да наведете опис aria-labelкоји <nav>одражава њену сврху. На пример, ако се компонента пагинације користи за навигацију између скупа резултата претраге, одговарајућа ознака може бити aria-label="Search results pages".
Онемогућено и активно стање
Везе се могу прилагодити различитим околностима. Користи .disabledсе за везе на које се не може кликнути и .activeза означавање тренутне странице.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Препоручујемо да замените активна или онемогућена сидра за <span>, или изоставите сидро у случају претходне/следеће стрелице, да бисте уклонили функционалност клика уз задржавање предвиђених стилова.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>Одређивање величине
Желите већу или мању пагинацију? Додајте .pagination-lgили .pagination-smза додатне величине.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>Пагер
Брзе претходне и следеће везе за једноставне имплементације пагинације са лаганим ознакама и стиловима. Одличан је за једноставне сајтове као што су блогови или часописи.
Подразумевани пример
Подразумевано, пејџер центрира везе.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Поравнане везе
Алтернативно, можете да поравнате сваку везу са стране:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Опционо онемогућено стање
Везе за пејџер такође користе општу .disabledуслужну класу из пагинације.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Етикете
Пример
Пример наслова Ново
Пример наслова Ново
Пример наслова Ново
Пример наслова Ново
Пример наслова Ново
Пример наслова Ново
<h3>Example heading <span class="label label-default">New</span></h3>Доступне варијације
Додајте било коју од доле наведених класа модификатора да бисте променили изглед етикете.
Подразумевана
примарна
информација о успеху
Упозорење Опасност
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>Имате тоне етикета?
Проблеми са приказивањем могу настати када имате десетине инлине етикета унутар уског контејнера, од којих свака садржи свој inline-blockелемент (попут иконе). Пут око овога је подешавање display: inline-block;. За контекст и пример, погледајте #13219 .
Значке
Лако истакните нове или непрочитане ставке додавањем а <span class="badge">на везе, Боотстрап навигацију и још много тога.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Самоурушавање
Када нема нових или непрочитаних ставки, значке ће се једноставно скупити (преко ЦСС-овог :emptyселектора) под условом да у њима нема садржаја.
Компатибилност са више претраживача
Значке се неће сами срушити у Интернет Екплорер-у 8 јер му недостаје подршка за :emptyбирач.
Прилагођава се активним навигацијским стањима
Уграђени стилови су укључени за постављање значки у активна стања у навигацији таблета.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Јумботрон
Лагана, флексибилна компонента која опционо може да прошири цео оквир за приказ да би приказала кључни садржај на вашој веб локацији.
Здраво Свете!
Ово је једноставна јединица хероја, једноставна компонента у стилу јумботрона за привлачење додатне пажње на истакнути садржај или информације.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Да бисте направили јумботрон пуне ширине и без заобљених углова, поставите га изван свих .containerс и уместо тога додајте а .containerунутар.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Заглавље странице
Једноставна љуска за h1одговарајућу расподелу и сегментирање делова садржаја на страници. Може да користи h1подразумевани smallелемент ', као и већину других компоненти (са додатним стиловима).
Пример заглавља странице Подтекст за заглавље
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Сличице
Проширите Боотстрап-ов систем мреже помоћу компоненте сличица да бисте лако приказали мреже слика, видео записа, текста и још много тога.
Ако тражите презентацију сличица налик на Пинтерест-у различите висине и/или ширине, мораћете да користите додатак треће стране као што су Масонри , Исотоп или Салватторе .
Подразумевани пример
Подразумевано, Боотстрап-ове сличице су дизајниране да приказују повезане слике са минималним потребним ознакама.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Прилагођени садржај
Уз мало додатне ознаке, могуће је додати било коју врсту ХТМЛ садржаја попут наслова, пасуса или дугмади у сличице.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>Алертс
Обезбедите контекстуалне повратне поруке за типичне радње корисника уз прегршт доступних и флексибилних порука упозорења.
Примери
Умотајте било који текст и опционо дугме за одбацивање .alertи једну од четири контекстуалне класе (нпр. .alert-success) за основне поруке упозорења.
Нема подразумеване класе
Упозорења немају подразумеване класе, само основне и модификационе класе. Подразумевано сиво упозорење нема превише смисла, па се од вас тражи да наведете тип преко контекстуалне класе. Изаберите успех, информације, упозорење или опасност.
Добро урађено! Успешно сте прочитали ову важну поруку упозорења.
Главу горе! Ово упозорење захтева вашу пажњу, али није превише важно.
Упозорење! Боље се провери, не изгледаш баш добро.
Ох снап! Промените неколико ствари и покушајте поново да пошаљете.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Одбацити упозорења
Надоградите било које упозорење додавањем опционог .alert-dismissibleдугмета и дугмета за затварање.
Захтева додатак за ЈаваСцрипт упозорење
За потпуно функционисање и одбацивање упозорења, морате користити ЈаваСцрипт додатак за упозорења .
Упозорење! Боље се провери, не изгледаш баш добро.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Обезбедите правилно понашање на свим уређајима
Обавезно користите <button>елемент са data-dismiss="alert"атрибутом података.
Везе у упозорењима
Користите .alert-linkкласу услужних програма да бисте брзо обезбедили одговарајуће везе у боји унутар било ког упозорења.
Добро урађено! Успешно сте прочитали
ову важну поруку упозорења .
Главу горе! Ово
упозорење захтева вашу пажњу , али није превише важно.
Упозорење! Боље се провери,
не изгледаш баш добро .
Ох снап!
Промените неколико ствари и покушајте поново да пошаљете.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>Траке напретка
Обезбедите најновије повратне информације о напретку тока посла или радње помоћу једноставних, али флексибилних трака напретка.
Компатибилност са више претраживача
Траке напретка користе ЦСС3 прелазе и анимације да би постигли неке од својих ефеката. Ове функције нису подржане у Интернет Екплорер-у 9 и старијим верзијама Фирефок-а. Опера 12 не подржава анимације.
Компатибилност са политиком безбедности садржаја (ЦСП).
Ако ваша веб локација има Политику безбедности садржаја (ЦСП) која не дозвољава style-src 'unsafe-inline', тада нећете моћи да користите инлине styleатрибуте да бисте подесили ширину траке напретка као што је приказано у нашим примерима испод. Алтернативне методе за подешавање ширина које су компатибилне са строгим ЦСП-овима укључују коришћење мало прилагођеног ЈаваСцрипт-а (који поставља element.style.width) или коришћење прилагођених ЦСС класа.
Основни пример
Подразумевана трака напретка.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>Са етикетом
Уклоните класу <span>витх .sr-onlyиз траке напретка да бисте приказали видљиви проценат.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Да бисте осигурали да текст ознаке остане читљив чак и за мале проценте, размислите о додавању а min-widthна траку напретка.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>Контекстуалне алтернативе
Траке напретка користе неке од истих дугмади и класа упозорења за доследне стилове.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Пругасте
Користи градијент за стварање пругастог ефекта. Није доступно у ИЕ9 и старијим верзијама.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Анимирани
Додајте .activeу да .progress-bar-stripedбисте анимирали пруге с десна на лево. Није доступно у ИЕ9 и старијим верзијама.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Сложени
Ставите више шипки у исте .progressда бисте их сложили.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>Медијски објекат
Стилови апстрактних објеката за прављење различитих типова компоненти (као што су коментари на блогу, твитови, итд.) које садрже слику поравнату лево или десно поред текстуалног садржаја.
Подразумевани медиј
Подразумевани медиј приказује медијски објекат (слике, видео, аудио) лево или десно од блока садржаја.
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Угнежђени медијски наслов
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>Класе .pull-leftи .pull-rightтакође постоје и раније су коришћене као део медијске компоненте, али су застареле за ту употребу од в3.3.0. Они су приближно еквивалентни .media-leftи .media-right, осим што .media-rightби требало да буду постављени после .media-bodyу хтмл-у.
Усклађивање медија
Слике или други медији могу бити поравнати на врху, на средини или на дну. Подразумевано је поравнато одозго.
Медији поравнати на врху
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
Средње оријентисани медији
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
Медији поравнати на дну
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Листа медија
Уз мало додатне ознаке, можете користити медије унутар листе (корисно за теме коментара или листе чланака).
-
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
Угнежђени медијски наслов
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
Угнежђени медијски наслов
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
Угнежђени медијски наслов
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин цоммодо. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>Група листа
Групе листа су флексибилна и моћна компонента за приказивање не само једноставних листа елемената, већ и сложених са прилагођеним садржајем.
Основни пример
Најосновнија група листа је једноставно неуређена листа са ставкама листе и одговарајућим класама. Надоградите га опцијама које следе или сопственим ЦСС-ом по потреби.
- Црас јусто одио
- Дапибус ац фацилисис ин
- Морби лео рисус
- Порта ац цонсецтетур ац
- Вестибулум у еросу
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Значке
Додајте компоненту значке било којој групи листе и она ће аутоматски бити позиционирана на десној страни.
- 14Црас јусто одио
- 2Дапибус ац фацилисис ин
- 1Морби лео рисус
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Повезане ставке
Повежите ставке групе листе коришћењем ознака сидра уместо ставки листе (то такође значи родитељ <div>уместо <ul>). Нема потребе за појединачним родитељима око сваког елемента.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Ставке дугмади
Ставке групе листе могу бити дугмад уместо ставки листе (то такође значи родитељ <div>уместо <ul>). Нема потребе за појединачним родитељима око сваког елемента. Не користите стандардне .btnкласе овде.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>Онемогућене ставке
Додајте .disabledу а .list-group-itemда бисте га засивили да изгледа онемогућено.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Контекстуалне класе
Користите контекстуалне класе за стилизовање ставки листе, подразумеваних или повезаних. Такође укључује .activeдржаву.
- Дапибус ац фацилисис ин
- Црас сит амет нибх либеро
- Порта ац цонсецтетур ац
- Вестибулум у еросу
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Прилагођени садржај
Додајте скоро било који ХТМЛ унутар, чак и за групе повезаних листа попут оне испод.
Наслов ставке групе
Донец ид елит нон ми порта гравида ат егет метус. Меценас сед диам егет рисус вариус бландит.
Наслов ставке групе
Донец ид елит нон ми порта гравида ат егет метус. Меценас сед диам егет рисус вариус бландит.
Наслов ставке групе
Донец ид елит нон ми порта гравида ат егет метус. Меценас сед диам егет рисус вариус бландит.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Панели
Иако није увек неопходно, понекад морате да ставите свој ДОМ у кутију. За те ситуације, испробајте компоненту панела.
Основни пример
Подразумевано, све што .panelтреба да урадите је да примените неке основне ивице и паддинг да бисте садржали неки садржај.
Пример основног панела
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Панел са насловом
Лако додајте контејнер наслова на панел помоћу .panel-heading. Такође можете укључити било који <h1>- <h6>са .panel-titleкласом да бисте додали унапред стилизовани наслов. Међутим, величине фонта <h1>- <h6>су замењене са .panel-heading.
За правилно бојење линкова, обавезно поставите везе у наслове унутар .panel-title.
Наслов панела без наслова
Садржај панела
Наслов панела
Садржај панела
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Панел са подножјем
Премотајте дугмад или секундарни текст у .panel-footer. Имајте на уму да подножја панела не наслеђују боје и ивице када се користе контекстуалне варијације јер нису предвиђене да буду у првом плану.
Садржај панела
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Контекстуалне алтернативе
Као и друге компоненте, лако учините панел смисленијим за одређени контекст додавањем било које од контекстуалних класа стања.
Наслов панела
Садржај панела
Наслов панела
Садржај панела
Наслов панела
Садржај панела
Наслов панела
Садржај панела
Наслов панела
Садржај панела
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>Са столовима
Додајте све неограничене .tableунутар панела за беспрекоран дизајн. Ако постоји .panel-body, додајемо додатну ивицу на врх табеле ради раздвајања.
Наслов панела
Неки подразумевани садржај панела овде. Нулла витае елит либеро, а пхаретра аугуе. Аенеан лациниа бибендум нулла сед цонсецтетур. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Ларри | птица | @твиттер |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Ако нема тела панела, компонента се креће од заглавља панела до табеле без прекида.
Наслов панела
| # | Име | Презиме | Корисничко име |
|---|---|---|---|
| 1 | Марк | Отто | @мдо |
| 2 | Јацоб | Тхорнтон | @дебео |
| 3 | Ларри | птица | @твиттер |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Са групама листа
Лако укључите групе листе пуне ширине у било који панел.
Наслов панела
Неки подразумевани садржај панела овде. Нулла витае елит либеро, а пхаретра аугуе. Аенеан лациниа бибендум нулла сед цонсецтетур. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.
- Црас јусто одио
- Дапибус ац фацилисис ин
- Морби лео рисус
- Порта ац цонсецтетур ац
- Вестибулум у еросу
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Респонсиве ембед
Дозволите прегледачима да одреде димензије видеа или пројекције слајдова на основу ширине блока који их садржи тако што ће креирати суштински однос који ће се правилно скалирати на било ком уређају.
Правила се директно примењују на <iframe>, <embed>, <video>, и <object>елементе; опционо користите експлицитну класу потомака .embed-responsive-itemкада желите да ускладите стил за друге атрибуте.
Про врх! Не морате да укључите frameborder="0"у своје <iframe>с јер ми то замењујемо за вас.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Веллс
Подразумевано добро
Користите бунар као једноставан ефекат на елемент да бисте му дали уметнути ефекат.
Види, ја сам у бунару!
<div class="well">...</div>Факултативни часови
Контролишите паддинг и заобљене углове са две опционе класе модификатора.
Види, ја сам у великом бунару!
<div class="well well-lg">...</div>
Види, ја сам у малом бунару!
<div class="well well-sm">...</div>