Достапни хиероглифи

Вклучува над 250 хиероглифи во формат на фонтови од сетот Glyphicon Halflings. Glyphicons Halflings вообичаено не се достапни бесплатно, но нивниот креатор ги направи достапни за Bootstrap бесплатно. Како благодарност, бараме само да вклучите врска назад до Glyphicons секогаш кога е можно.

глификон глификон-ѕвездичка
глификон глификон-плус
глификон глификон-евро
глификон глификон-еур
глификон глификон-минус
глификон глификон-облак
глификон глификон-плик
глификон глификон-молив
глификон глификон-стакло
глификон глификон-музика
glyphicon glyphicon-пребарување
глификон глификон-срце
глификон глификон-ѕвезда
глификон глификон-ѕвезда-празен
glyphicon glyphicon-корисник
глификон глификон-филм
глификон глификон-ти-голем
глификон глификон-ти
glyphicon glyphicon-th-list
глификон глификон-ок
glyphicon glyphicon-отстрани
glyphicon glyphicon-zoom-in
глификон глификон-зумирање
глификон глификон-исклучен
глификон глификон-сигнал
глификон глификон-запец
glyphicon glyphicon-ѓубре
глификон глификон-дом
glyphicon glyphicon-датотека
глификон глификон-време
глификон глификон-пат
glyphicon glyphicon-download-alt
glyphicon glyphicon-преземи
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
глификон глификон-игра-круг
глификон глификон-повтори
glyphicon glyphicon-освежи
глификон glyphicon-list-alt
глификон глификон-брава
глификон глификон-знаме
glyphicon glyphicon-слушалки
глификон глификон-исклучување на волуменот
глификон глификон-намалување на јачината на звукот
глификон глификон-волумен
glyphicon glyphicon-qrcode
глификон глификон-баркод
глификон глификон-ознака
глификон глификон-ознаки
глификон глификон-книга
глификон глификон-обележувач
глификон глификон-печатење
глификон глификон-камера
глификон глификон-фонт
глификон глификон-болд
глификон глификон-курзив
глификон глификон-текст-висина
глификон глификон-текст-ширина
глификон glyphicon-порамни-лево
глификон глификон-порамни-центар
глификон glyphicon-порамни-десно
глификон glyphicon-порамни-оправда
глификон глификон-листа
глификон глификон-вовлекување-лево
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-видео
глификон глификон-слика
глификон глификон-мапа-маркер
глификон глификон-прилагоди
глификон глификон-нијанса
glyphicon glyphicon-уреди
glyphicon glyphicon-дел
глификон глификон-проверка
глификон глификон-помести
глификон глификон-чекор-наназад
glyphicon glyphicon-брзо-назад
глификон глификон-назад
глификон глификон-игра
глификон глификон-пауза
глификон глификон-стоп
глификон глификон-напред
глификон глификон-брзо напред
глификон глификон-чекор-напред
глификон глификон-исфрли
глификон глификон-шеврон-лево
глификон глификон-шеврон-десно
глификон глификон-плус-знак
глификон глификон-минус-знак
glyphicon glyphicon-отстрани-знак
глификон глификон-ок-знак
глификон глификон-прашање-знак
глификон glyphicon-инфо-знак
glyphicon glyphicon-скриншот
glyphicon glyphicon-отстрани-круг
глификон глификон-ок-круг
глификон глификон-бан-круг
глификон глификон-стрелка-лево
глификон глификон-стрелка-десно
глификон глификон-стрелка-нагоре
глификон глификон-стрелка надолу
глификон glyphicon-сподели-алт
глификон glyphicon-промени големина-полн
глификон glyphicon-промени големина-мал
глификон глификон-извичник-знак
глификон глификон-подарок
глификон глификон-лист
глификон глификон-оган
глификон глификон-очи-отворени
глификон глификон-затвори очи
глификон глификон-предупредувачки знак
глификон глификон-рамнина
глификон глификон-календар
глификон глификон-случаен
глификон глификон-коментар
глификон глификон-магнет
глификон глификон-шеврон-ап
глификон глификон-шеврон-долу
glyphicon glyphicon-ретвит
глификон глификон-количка
глификон глификон-папка-затвори
glyphicon glyphicon-папка-отвори
glyphicon glyphicon-промени големина-вертикална
glyphicon glyphicon-промени големина-хоризонтален
глификон glyphicon-hdd
глификон glyphicon-bullhorn
глификон глификон-ѕвонче
glyphicon glyphicon-сертификат
глификон глификон-палци-нагоре
глификон глификон-палци-надолу
глификон глификон-рака-десно
глификон глификон-рака-лево
glyphicon glyphicon-рака-нагоре
глификон глификон-рака надолу
глификон глификон-круг-стрелка-десно
глификон глификон-круг-стрелка-лево
глификон глификон-круг-стрелка-нагоре
глификон глификон-круг-стрелка-надолу
глификон глификон-глобус
глификон глификон-клуч
глификон глификон-задачи
глификон глификон-филтер
глификон глификон-актовка
глификон глификон-цел екран
глификон глификон-табла
глификон глификон-клип
глификон глификон-срце-празна
глификон глификон-врска
глификон глификон-телефон
glyphicon глификон-pushpin
глификон глификон-усд
глификон glyphicon-gbp
глификон глификон-сорт
глификон глификон-подредување-по-азбука
глификон глификон-подреди-по-азбука-алт
глификон глификон-сорт-по-ред
глификон глификон-сорт-по-ред-алт
глификон глификон-сорт-по-атрибути
глификон глификон-сорт-по-атрибути-алт
глификон глификон-нештиклирано
глификон глификон-прошири
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-најави се
глификон глификон-флеш
glyphicon glyphicon-одјави
глификон глификон-нов-прозорец
глификон глификон-запис
glyphicon glyphicon-зачувај
глификон глификон-отворен
glyphicon glyphicon-зачуван
глификон глификон-увоз
глификон глификон-извоз
глификон глификон-испрати
глификон глификон-флопи-диск
glyphicon glyphicon-флопи-зачуван
glyphicon glyphicon-флопи-отстрани
glyphicon glyphicon-флопи-зачувај
глификон глификон-флопи-отворен
glyphicon glyphicon-кредитна-картичка
глификон глификон-пренос
glyphicon glyphicon-прибор за јадење
глификон глификон-заглавие
глификон глификон-компресиран
glyphicon glyphicon-слушалка
глификон глификон-телефон-алт
глификон глификон-кула
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-видео
glyphicon glyphicon-преводи
глификон глификон-звук-стерео
глификон глификон-звук-долби
глификон глификон-звук-5-1
глификон глификон-звук-6-1
глификон глификон-звук-7-1
glyphicon glyphicon-copyright-mark
глификон глификон-регистрација-ознака
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
глификон глификон-дрво-четинар
глификон глификон-дрво-листопаден
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
глификон глификон-ниво-нагоре
глификон глификон-копија
глификон глификон-паста
глификон глификон-алармирање
glyphicon glyphicon-еквалајзер
глификон глификон-крал
глификон глификон-кралица
глификон глификон-пешак
глификон глификон-епископ
глификон глификон-витез
глификон глификон-бебе-формула
глификон глификон-шатор
глификон глификон-табла
глификон глификон-кревет
глификон глификон-јаболко
glyphicon glyphicon-брише
глификон глификон-песочен часовник
глификон глификон-светилка
glyphicon glyphicon-дупликат
глификон глификон-свинче-банка
глификон глификон-ножици
глификон глификон-биткоин
glyphicon glyphicon-btc
глификон glyphicon-xbt
глификон глификон-јен
глификон glyphicon-jpy
глификон глификон-рубља
глификон глификон-руб
глификон глификон-скала
глификон глификон-ледено-лоли
glyphicon glyphicon-ледено-лол-вкус
глификон глификон-образование
глификон глификон-опција-хоризонтална
глификон глификон-опција-вертикална
glyphicon glyphicon-мени-хамбургер
глификон глификон-модален-прозорец
глификон глификон-масло
глификон глификон-зрно
glyphicon glyphicon-очила за сонце
глификон глификон-големина на текст
глификон глификон-текст-боја
глификон глификон-текст-позадина
глификон глификон-објект-порамни-врв
глификон глификон-објект-порамни-долу
глификон глификон-објект-порамни-хоризонтален
глификон глификон-објект-порамни-лево
глификон глификон-објект-порамни-вертикално
глификон глификон-објект-порамни-десно
глификон глификон-триаголник-право
глификон глификон-триаголник-лево
глификон глификон-триаголник-долу
глификон глификон-триаголник-врв
glyphicon glyphicon-конзола
глификон глификон-надреден
глификон глификон-претплата
глификон глификон-мени-лево
глификон глификон-мени-десно
глификон глификон-мени-долу
glyphicon glyphicon-мени-up

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

Поради перформанси, сите икони бараат основна класа и индивидуална класа на икони. За да го користите, ставете го следниов код речиси насекаде. Погрижете се да оставите празно место помеѓу иконата и текстот за правилно полнење.

Не мешајте со други компоненти

Класите на икони не можат директно да се комбинираат со други компоненти. Тие не треба да се користат заедно со други класи на истиот елемент. Наместо тоа, додадете вгнездено <span>и применете ги класите на иконите на <span>.

Само за употреба на празни елементи

Класите на икони треба да се користат само на елементи што не содржат текстуална содржина и немаат детски елементи.

Промена на локацијата на фонтот на иконата

Bootstrap претпоставува дека датотеките со фонтови со икони ќе бидат лоцирани во ../fonts/директориумот, во однос на компајлираните CSS-датотеки. Преместувањето или преименувањето на тие датотеки со фонтови значи ажурирање на CSS на еден од трите начини:

Променете ги @icon-font-pathи/или @icon-font-nameпроменливите во изворните датотеки Less.
Искористете ја опцијата за релативни URL - а дадени од компајлерот Less.
Променете ги url()патеките во компајлираниот CSS.

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

Достапни икони

Современите верзии на помошни технологии ќе објават CSS генерирана содржина, како и специфични знаци на Unicode. За да избегнеме ненамерен и збунувачки излез во читачите на екранот (особено кога иконите се користат исклучиво за украсување), ги криеме со 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>

Контекстуално мени за приказ на списоци со врски. Направено е интерактивно со паѓачкиот приклучок JavaScript .

Пример

Завиткајте го активирањето на паѓачкото мени и паѓачкото мени во .dropdown, или друг елемент што декларира position: relative;. Потоа додадете HTML на менито.

<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во a .dropdown-menuнадесно порамни го паѓачкото мени.

<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во a <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>

Групирајте серија копчиња заедно на една линија со групата копчиња. Додадете опционално однесување на радио JavaScript и стил на полето за избор со нашиот приклучок за копчиња .

Советите за алатки и поповерите во групите на копчиња бараат посебно поставување

Кога користите совети за алатки или поповери на елементи во .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>

Оправдани групи на копчиња

Направете група копчиња да се протегаат со еднакви големини за да ја опфаќаат целата ширина на нејзиниот родител. Работи и со паѓачки копчиња во групата на копчиња.

Ракување со граници

Поради специфичните HTML и CSS кои се користат за оправдување на копчињата (имено display: table-cell), границите меѓу нив се удвојуваат. Во редовните групи на копчиња, margin-left: -1pxсе користи за редење на границите наместо нивно отстранување. Сепак, marginне работи со display: table-cell. Како резултат на тоа, во зависност од вашите прилагодувања на Bootstrap, можеби ќе сакате да ги отстраните или повторно да ги обоите границите.

IE8 и граници

Internet Explorer 8 не ги прикажува границите на копчињата во оправдана група копчиња, без разлика дали се вклучени <a>или <button>елементи. За да го заобиколите тоа, завиткајте го секое копче во друго .btn-group.

Видете #12476 за повеќе информации.

Со `<a>`елементи

Само завиткајте серија .btns во .btn-group.btn-group-justified.

Лево Среден Во право

Лево Среден

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Врски кои делуваат како копчиња

Ако <a>елементите се користат за да дејствуваат како копчиња - активирајќи ја функционалноста на страницата, наместо да се движите до друг документ или дел во тековната страница - треба да им се даде и соодветна role="button".

Со `<button>`елементи

За да користите оправдани групи копчиња со <button>елементи, мора да го завиткате секое копче во група копчиња . Повеќето прелистувачи не го применуваат правилно нашиот CSS за оправдување на <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>

Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во a .btn-groupи ќе обезбедите соодветна ознака на менито.

Зависност од приклучокот

Паѓачките копчиња бараат паѓачкиот приклучок да биде вклучен во вашата верзија на Bootstrap.

Паѓања со едно копче

Претворете го копче во паѓачкото копче со некои основни промени во обележувањето.

<!-- 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>елементи овде бидејќи тие не можат целосно да се стилизираат во прелистувачите на WebKit.

Избегнувајте да користите <textarea>елементи овде бидејќи нивниот rowsатрибут нема да се почитува во некои случаи.

Советите за алатки и поповерите во групите за внес бараат посебно поставување

Кога користите совети за алатки или поповери на елементи во .input-group, ќе мора да ја наведете опцијата container: 'body'за да се избегнат несаканите несакани ефекти (како што е елементот да расте пошироко и/или да ги изгуби заоблените агли кога ќе се активира советот за алатка или пукањето).

Не мешајте со други компоненти

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

Секогаш додавајте етикети

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

Точната техника што треба да се користи (видливи <label>елементи, <label>елементи скриени со користење на класата или .sr-onlyупотреба на aria-label, aria-labelledby, aria-describedbyили атрибут) и кои дополнителни информации ќе треба да се пренесат ќе се разликуваат во зависност од точниот тип на графичка контрола за интерфејс што ја имплементирате. Примерите во овој дел даваат неколку предложени пристапи специфични за случајот.titleplaceholder

Основен пример

Ставете еден додаток или копче на двете страни на влезот. Можете исто така да поставите еден од двете страни на влезот.

Не поддржуваме повеќе додатоци ( .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>

Navs достапни во Bootstrap имаат споделено обележување, почнувајќи од основната .navкласа, како и споделени состојби. Заменете ги класите на модификаторите за да се префрлате помеѓу секој стил.

Користењето на навигација за панели со јазичиња бара приклучок за јазичиња JavaScript

За јазичиња со области со табли, мора да го користите приклучокот за јазичиња JavaScript . Обележувањето исто така ќе бара дополнителни атрибути и ARIA - видете го примерот за означувањеrole на приклучокот за повеќе детали.

Направете ги навигациите што се користат како навигација достапни

Ако користите навигација за да обезбедите лента за навигација, погрижете се да додадете a role="navigation"во најлогичниот родителски контејнер на <ul>, или да завиткате <nav>елемент околу целата навигација. Не ја додавајте улогата на <ul>самата, бидејќи тоа ќе спречи да биде објавена како вистинска листа од помошните технологии.

Јазичиња

Забележете дека .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>

Апчиња

Земете го истиот HTML, но .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. На помалите екрани, врските за навигација се наредени.

Оправданите врски за навигација на лентата за навигација во моментов не се поддржани.

Сафари и одговорни оправдани навигација

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Оневозможени врски

За која било компонента за навигација (јазичиња или апчиња), додадете .disabledза сиви врски и без ефекти на лебдење .

Функционалноста на врската не е засегната

Оваа класа ќе го промени само <a>изгледот на 's, не и неговата функционалност. Користете прилагоден JavaScript за да ги оневозможите врските овде.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Користење на паѓачки мени

Додадете паѓачки менија со малку дополнителен HTML и паѓачкиот приклучок JavaScript .

Јазичиња со паѓачки мени

<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>

Navbars се одговорни мета компоненти кои служат како заглавија за навигација за вашата апликација или локација. Тие почнуваат да се собираат (и се префрлаат) во мобилните прикази и стануваат хоризонтални како што се зголемува достапната ширина на приказот.

Оправданите врски за навигација на лентата за навигација во моментов не се поддржани.

Преполна содржина

Бидејќи Bootstrap не знае колку простор и е потребен на содржината во вашата лента за навигација, може да наидете на проблеми со завиткување на содржината во втор ред. За да го решите ова, можете:

Намалете ја количината или ширината на ставките на лентата за навигација.
Сокријте одредени ставки на лентата за навигација на одредени големини на екранот користејќи респонзивни класи на алатки .
Променете ја точката во која вашата лента за навигација се префрла помеѓу склопен и хоризонтален режим. Прилагодете ја @grid-float-breakpointпроменливата или додајте сопствено барање за медиум.

Потребен е приклучок за JavaScript

Ако JavaScript е оневозможен и пристаништето за преглед е доволно тесно што лентата за навигација се сруши, ќе биде невозможно да се прошири лентата за навигација и да се прегледа содржината во .navbar-collapse.

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

Менување на прекинатата точка на прекинуваната лента за навигација на мобилниот телефон

Навивачката лента се собира во нејзиниот вертикален мобилен приказ кога пристаништето за гледање е потесно од @grid-float-breakpoint, и се проширува во хоризонталниот не-мобилен приказ кога приказот е барем @grid-float-breakpointво ширина. Прилагодете ја оваа променлива во изворот Помалку за да контролирате кога лентата за навигација ќе се сруши/проширува. Стандардната вредност е 768px(најмалиот „мал“ или „таблет“ екран).

Направете ги лентите за навигација достапни

Погрижете се да користите <nav>елемент или, ако користите погенерички елемент, како што е <div>, додајте го на role="navigation"секоја лента за навигација за експлицитно да го идентификувате како значаен регион за корисниците на помошни технологии.

<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>

Заменете го брендот на navbar со своја сопствена слика со замена на текстот за <img>. Со оглед на тоа што .navbar-brandима сопствено полнење и висина, можеби ќе треба да отфрлите дел од CSS во зависност од вашата слика.

<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преку mixin. Некои контроли на форми, како што се групите за внесување, може да бараат фиксни ширини да се прикажуваат правилно во лентата за навигација.

<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>

Секогаш додавајте етикети

Читателите на екранот ќе имаат проблем со вашите формулари ако не вклучите етикета за секој влез. За овие вградени форми, можете да ги скриете етикетите користејќи ја .sr-onlyкласата. Постојат дополнителни алтернативни методи за обезбедување ознака за помошни технологии, како што е атрибутот aria-label, aria-labelledbyили . titleАко ниту едно од овие не е присутно, читателите на екранот може да прибегнат кон користење на placeholderатрибутот, доколку е присутен, но имајте предвид дека употребата на placeholderкако замена за други методи за етикетирање не се препорачува.

Додадете ја .navbar-btnкласата на <button>елементи кои не се наоѓаат во a <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класите на услужните програми. Двете класи ќе додадат CSS плови во наведената насока. На пример, за да ги усогласите врските за навигација, ставете ги во посебен <ul>со применетата соодветна класа на услужни програми.

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

Десно порамнување на повеќе компоненти

Navbars моментално имаат ограничување со повеќе .navbar-rightкласи. За правилно празно место, користиме негативна маргина на последниот .navbar-rightелемент. Кога има повеќе елементи кои ја користат таа класа, овие маргини не функционираат како што е предвидено.

Ќе го повториме ова кога ќе можеме да ја преработиме таа компонента во v4.

Додајте .navbar-fixed-topи вклучете содржина на .containerлентата .container-fluidза навигација во центарот и подлогата.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Потребно е полнење на телото

Фиксната лента за навигација ќе ја прекрие другата содржина, освен ако не додадете paddingна врвот на <body>. Испробајте ги вашите сопствени вредности или користете го нашиот фрагмент подолу. Совет: Стандардно, лентата за навигација е висока 50 пиксели.

body { padding-top: 70px; }

Погрижете се да го вклучите ова по основниот Bootstrap CSS.

Додајте .navbar-fixed-bottomи вклучете содржина на .containerлентата .container-fluidза навигација во центарот и подлогата.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Потребно е полнење на телото

Фиксната лента за навигација ќе ја прекрие другата содржина, освен ако не додадете paddingна дното на <body>. Испробајте ги вашите сопствени вредности или користете го нашиот фрагмент подолу. Совет: Стандардно, лентата за навигација е висока 50 пиксели.

body { padding-bottom: 70px; }

Погрижете се да го вклучите ова по основниот Bootstrap CSS.

Создадете лента за навигација со целосна ширина што се оддалечува со страницата со додавање .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>

Трошки од леб

Наведете ја локацијата на тековната страница во рамките на навигациската хиерархија.

Сепараторите автоматски се додаваат во CSS преку :beforeи content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Пагинација

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

Стандардна страница

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Факултативна оневозможена состојба

Пејџер-врските исто така ја користат .disabledкласата за општа корист од страницата.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">линкови, навигација на Bootstrap и многу повеќе.

Инбокс42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Самоколапсирање

Кога нема нови или непрочитани ставки, значките едноставно ќе се срушат (преку :emptyизбирачот на CSS) под услов да нема содржина внатре.

Компатибилност со вкрстени прелистувачи

Значките нема да се срушат сами во Internet Explorer 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>

За да го направите џамботронот со целосна ширина и без заоблени агли, ставете го надвор од сите .containers и наместо тоа додадете .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>

Проширете го мрежниот систем на Bootstrap со компонентата за сликички за лес��о прикажување на мрежи од слики, видеа, текст и многу повеќе.

Ако барате презентација на сликички со различна висина и/или ширина слична на Pinterest, ќе треба да користите приклучок од трета страна, како што се Masonry , Isotope или Salvattore .

Стандарден пример

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Прилагодена содржина

Со малку дополнително обележување, можно е да се додаде секаков вид HTML содржина како наслови, параграфи или копчиња во сликички.

Етикета за сликички

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Копче Копче

Етикета за сликички

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Копче Копче

Етикета за сликички

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Копче Копче

<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копче и затворање.

Потребен е приклучок за предупредување JavaScript

За целосно функционирање, отфрлени предупредувања, мора да го користите приклучокот JavaScript за предупредувања .

Предупредување! Подобро проверете се, не изгледате премногу добро.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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>

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

Компатибилност со вкрстени прелистувачи

Лентите за напредок користат CSS3 транзиции и анимации за да постигнат некои од нивните ефекти. Овие функции не се поддржани во Internet Explorer 9 и подолу или постари верзии на Firefox. Opera 12 не поддржува анимации.

Компатибилност на Политика за безбедност на содржината (CSP).

Ако вашата веб-локација има Политика за безбедност на содржината (CSP) која не дозволува style-src 'unsafe-inline', тогаш нема да можете да користите вградени styleатрибути за да поставите ширина на лентата за напредок како што е прикажано во нашите примери подолу. Алтернативните методи за поставување на широчините кои се компатибилни со строгите CSP вклучуваат користење на малку прилагоден JavaScript (што поставува element.style.width) или користење на сопствени класи CSS.

Основен пример

Стандардна лента за напредок.

<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од лентата за напредок за да се прикаже видлив процент.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

За да се осигурате дека текстот на етикетата останува читлив дури и за ниски проценти, размислете да додадете a min-widthна лентата за напредок.

0%

2%

<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>

Пругасти

Користи градиент за да создаде ефект на риги. Не е достапно во IE9 и подолу.

<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ги анимирате лентите од десно кон лево. Не е достапно во IE9 и подолу.

<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>

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

Стандарден медиум

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

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Вгнезден медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<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исто така постојат и претходно се користеа како дел од медиумската компонента, но се застарени за таа употреба од v3.3.0. Тие се приближно еквивалентни на .media-leftи .media-right, освен што .media-rightтреба да бидат поставени по .media-bodyво html.

Порамнување на медиумите

Сликите или другите медиуми може да се порамнат нагоре, на средината или на дното. Стандардно е порамнето одозгора.

Топ порамнети медиуми

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Средно порамнети медиуми

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<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>

Медиумска листа

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

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<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>

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

Основен пример

Најосновната група списоци е едноставно неуредена листа со ставки од списокот и соодветни класи. Надоградете го со опциите што следат, или ваш сопствен CSS по потреба.

Cras justo odio
Dapibus ac facilisis во
Морби Лео Ризус
Porta ac consectetur ac
Вестибулум и ерос

<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>

Значки

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

14Cras justo odio
2Dapibus ac facilisis во
1Морби Лео Ризус

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Поврзани ставки

Поврзете ги групните ставки на списокот со користење на прицврстувачки ознаки наместо ставки од списокот (тоа значи и родител <div>наместо <ul>). Нема потреба од индивидуални родители околу секој елемент.

Cras justo odio Dapibus ac facilisis во Морби Лео Ризус Porta ac consectetur ac Вестибулум и ерос

<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во a .list-group-itemза да се сиви за да изгледа оневозможено.

Cras justo odio Dapibus ac facilisis во Морби Лео Ризус Porta ac consectetur ac Вестибулум и ерос

<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држава.

Dapibus ac facilisis во
Крас седи амет нибх либеро
Porta ac consectetur ac
Вестибулум и ерос

Dapibus ac facilisis во Крас седи амет нибх либеро Porta ac consectetur ac Вестибулум и ерос

<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>

Прилагодена содржина

Додадете речиси секој HTML во себе, дури и за групите поврзани со списоци како оваа подолу.

Заглавие на група ставки на листа

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Заглавие на група ставки на листа

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Заглавие на група ставки на листа

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<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>

Иако не е секогаш потребно, понекогаш треба да го ставите вашиот DOM во кутија. За тие ситуации, обидете се со компонентата на панелот.

Основен пример

Стандардно, сè што .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, додаваме дополнителна граница на горниот дел од табелата за одвојување.

Наслов на панелот

Некои стандардни содржини на панелот овде. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

<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	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Со групи на списоци

Лесно вклучете групи на списоци со целосна ширина во кој било панел.

Наслов на панелот

Некои стандардни содржини на панелот овде. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis во
Морби Лео Ризус
Porta ac consectetur ac
Вестибулум и ерос

<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>s бидејќи ние го отфрламе тоа за вас.

<!-- 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>

Компоненти

Глификони

Достапни хиероглифи

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

Не мешајте со други компоненти

Само за употреба на празни елементи

Промена на локацијата на фонтот на иконата

Достапни икони

Примери

Паѓања

Пример

Порамнување

Може да бара дополнително позиционирање

Застарено .pull-rightпорамнување

Заглавија

Разделник

Оневозможени ставки од менито

Групи на копчиња

Советите за алатки и поповерите во групите на копчиња бараат посебно поставување

Проверете дали е точно roleи обезбедете етикета

Основен пример

Лента со алатки за копчиња

Димензионирање

Гнездење

Вертикална варијација

Оправдани групи на копчиња

Ракување со граници

IE8 и граници

Со <a>елементи

Врски кои делуваат како копчиња

Со <button>елементи

Спуштање на копчињата

Зависност од приклучокот

Паѓања со едно копче

Спуштање на копчињата за поделување

Димензионирање

Падна варијација

Влезни групи

<input>Само текстуални

Советите за алатки и поповерите во групите за внес бараат посебно поставување

Не мешајте со други компоненти

Секогаш додавајте етикети

Основен пример

Димензионирање

Поле за избор и радио додатоци

Додатоци за копчиња

Копчиња со паѓачки мени

Сегментирани копчиња

Повеќе копчиња

Navs

Користењето на навигација за панели со јазичиња бара приклучок за јазичиња JavaScript

Направете ги навигациите што се користат како навигација достапни

Јазичиња

Апчиња

Оправдано

Сафари и одговорни оправдани навигација

Оневозможени врски

Функционалноста на врската не е засегната

Користење на паѓачки мени

Јазичиња со паѓачки мени

Апчиња со капки

Navbar

Стандардна лента за навигација

Преполна содржина

Потребен е приклучок за JavaScript

Менување на прекинатата точка на прекинуваната лента за навигација на мобилниот телефон

Направете ги лентите за навигација достапни

Имиџ на брендот

Форми

Забелешки за мобилни уреди

Секогаш додавајте етикети

Копчиња

Употреба специфична за контекст

Текст

Линкови кои не се на навигација

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

Десно порамнување на повеќе компоненти

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

Потребно е полнење на телото

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

Застарено `.pull-right`порамнување

Проверете дали е точно `role`и обезбедете етикета

Со `<a>`елементи

Со `<button>`елементи

`<input>`Само текстуални