Налични глифове

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

глификон глификон-звездичка
глификон глификон-плюс
глификон глификон-евро
глификон glyphicon-eur
глификон глификон-минус
глификон глификон-облак
глификон глификон-плик
глификон глификон-молив
глификон глификон-стъкло
глификон глификон-музика
glyphicon glyphicon-търсене
глификон глификон-сърце
глификон глификон-звезда
глификон глификон-звезда-празен
glyphicon glyphicon-потребител
глификон глификон-филм
глификон глификон-та-голям
глификон глификон-та
glyphicon glyphicon-ти-списък
глификон глификон-ок
glyphicon glyphicon-премахване
glyphicon glyphicon-увеличаване
glyphicon glyphicon-намаляване
глификон глификон-изкл
глификон глификон-сигнал
глификон glyphicon-cog
глификон глификон-боклук
glyphicon glyphicon-начало
glyphicon glyphicon-файл
глификон глификон-време
глификон глификон-път
glyphicon glyphicon-изтегляне-алт
glyphicon glyphicon-изтегляне
glyphicon glyphicon-качване
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-повтаряне
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
глификон глификон-заключване
глификон глификон-знаме
glyphicon glyphicon-слушалки
glyphicon glyphicon-volume-off
glyphicon glyphicon-намаляване на звука
glyphicon glyphicon-обем
glyphicon glyphicon-qrcode
glyphicon glyphicon-баркод
глификон глификон-етикет
glyphicon glyphicon-тагове
glyphicon glyphicon-книга
glyphicon glyphicon-отметка
глификон глификон-печат
glyphicon glyphicon-камера
glyphicon glyphicon-шрифт
глификон глификон-удебелен
глификон glyphicon-курсив
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-списък
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-видео
глификон глификон-картина
glyphicon glyphicon-map-маркер
glyphicon glyphicon-adjust
глификон глификон-оттенък
glyphicon glyphicon-edit
глификон глификон-сподели
glyphicon glyphicon-проверка
глификон глификон-ход
glyphicon glyphicon-стъпка-назад
glyphicon glyphicon-бързо-назад
глификон глификон-назад
глификон глификон-игра
глификон глификон-пауза
глификон глификон-стоп
глификон глификон-напред
glyphicon glyphicon-бързо превъртане напред
glyphicon glyphicon-стъпка-напред
глификон глификон-изваждане
глификон глификон-шеврон-вляво
глификон глификон-шеврон-вдясно
глификон глификон-знак-плюс
глификон глификон-знак-минус
glyphicon glyphicon-премахване-знак
glyphicon glyphicon-ok-знак
глификон глификон-въпросителен знак
glyphicon glyphicon-info-знак
glyphicon glyphicon-екранна снимка
glyphicon glyphicon-премахване-кръг
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-стрелка-наляво
glyphicon glyphicon-стрелка-надясно
glyphicon glyphicon-стрелка-нагоре
glyphicon glyphicon-стрелка-надолу
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
глификон глификон-удивителен-знак
глификон глификон-подарък
глификон глификон-лист
глификон глификон-огън
глификон глификон-око-отворено
глификон глификон-око-затвори
глификон глификон-предупредителен-знак
глификон глификон-равнина
glyphicon glyphicon-календар
глификон глификон-случаен
глификон глификон-коментар
глификон глификон-магнит
глификон glyphicon-chevron-up
глификон глификон-шеврон-надолу
glyphicon glyphicon-ретуит
glyphicon glyphicon-количка за пазаруване
glyphicon glyphicon-папка-затвори
glyphicon glyphicon-папка-отворена
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
глификон глификон-мегафон
глификон глификон-камбана
glyphicon glyphicon-сертификат
glyphicon glyphicon-палец нагоре
glyphicon glyphicon-thumbs-down
глификон глификон-ръка-дясна
глификон глификон-ръка-лява
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
глификон глификон-кръг-стрелка-наляво
glyphicon glyphicon-circle-стрелка-нагоре
glyphicon glyphicon-кръг-стрелка-надолу
глификон глификон-глобус
глификон глификон-гаечен ключ
glyphicon glyphicon-задачи
glyphicon glyphicon-филтър
glyphicon glyphicon-куфарче
glyphicon glyphicon-цял екран
glyphicon glyphicon-табло за управление
глификон глификон-кламер
глификон глификон-сърце-празно
глификон глификон-връзка
glyphicon glyphicon-телефон
глификон glyphicon-пушка
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
глификон глификон-вид
glyphicon glyphicon-сортирай-по-азбука
glyphicon glyphicon-sort-by-alphabet-alt
глификон glyphicon-сортирай-по-ред
glyphicon glyphicon-sort-by-order-alt
glyphicon сортиране-по-атрибути на glyphicon
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-без отметка
glyphicon glyphicon-разширяване
глификон глификон-свиване-надолу
glyphicon glyphicon-свиване
glyphicon glyphicon-вход
глификон глификон-флаш
glyphicon glyphicon-излизане
glyphicon glyphicon-нов прозорец
глификон глификон-запис
glyphicon glyphicon-запазване
глификон глификон-отворен
glyphicon glyphicon-saved
glyphicon glyphicon-импорт
глификон глификон-експорт
glyphicon glyphicon-изпрати
glyphicon glyphicon-флопи-диск
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-кредитна-карта
глификон глификон-трансфер
glyphicon glyphicon-прибори за хранене
glyphicon glyphicon-header
glyphicon glyphicon-компресиран
glyphicon glyphicon-слушалка
glyphicon glyphicon-phone-alt
глификон глификон-кула
glyphicon glyphicon-статистика
glyphicon glyphicon-sd-видео
glyphicon glyphicon-hd-видео
glyphicon glyphicon-субтитри
glyphicon glyphicon-звук-стерео
glyphicon glyphicon-sound-dolby
глификон глификон-звук-5-1
глификон глификон-звук-6-1
глификон глификон-звук-7-1
glyphicon glyphicon-марка за авторско право
glyphicon glyphicon-registration-mark
glyphicon glyphicon-облак-изтегляне
glyphicon glyphicon-облачно качване
glyphicon glyphicon-дърво-иглолистно дърво
глификон глификон-дърво-широколистно
глификон glyphicon-cd
glyphicon glyphicon-запазване на файл
glyphicon glyphicon-open-file
glyphicon glyphicon-ниво нагоре
глификон глификон-копие
глификон глификон-паста
glyphicon glyphicon-предупреждение
glyphicon glyphicon-еквалайзер
глификон глификон-цар
глификон глификон-кралица
глификон глификон-пешка
глификон глификон-епископ
глификон глификон-рицар
glyphicon glyphicon-baby-formula
глификон глификон-палатка
glyphicon glyphicon-черна дъска
глификон глификон-легло
глификон глификон-ябълка
глификон глификон-изтриване
глификон глификон-пясъчен часовник
глификон глификон-лампа
глификон глификон-дубликат
glyphicon glyphicon-касичка
глификон глификон-ножица
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон глификон-йен
glyphicon glyphicon-jpy
глификон глификон-рубла
глификон глификон-търкайте
глификон глификон-скала
glyphicon glyphicon-ледена близалка
glyphicon glyphicon-ледена близалка с вкус
глификон глификон-образование
glyphicon glyphicon-опция-хоризонтален
glyphicon glyphicon-option-vertical
glyphicon glyphicon-меню-хамбургер
glyphicon glyphicon-modal-window
глификон глификон-масло
глификон глификон-зърно
glyphicon glyphicon-слънчеви очила
glyphicon glyphicon-text-size
глификон цвят на глификон-текст
glyphicon glyphicon-текст-фон
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
глификон глификон-триъгълник-вдясно
глификон глификон-триъгълник-вляво
глификон глификон-триъгълник-отдолу
глификон glyphicon-триъгълник-върх
glyphicon glyphicon-конзола
глификон глификон-горен индекс
глификон глификон-долен индекс
glyphicon glyphicon-меню-вляво
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-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>

Гнездене

Поставете a .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>

Използвайте който и да е бутон, за да задействате падащо меню, като го поставите в рамките на .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>

Наличните навигации в Bootstrap имат споделена маркировка, започваща с базовия .navклас, както и споделени състояния. Разменете класовете модификатори, за да превключвате между всеки стил.

Използването на навигации за панели с раздели изисква плъгин за раздели на JavaScript

За раздели с табулируеми области трябва да използвате JavaScript плъгина за раздели . Маркирането също така ще изисква допълнителни roleи ARIA атрибути – вижте примерното маркиране на плъгина за повече подробности.

Направете навигациите, използвани като навигация, достъпни

Ако използвате навигации, за да предоставите лента за навигация, не забравяйте да добавите 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>

Оправдано

Лесно направете раздели или хапчета с еднаква ширина на родителя си на екрани, по-широки от 768px с .nav-justified. На по-малки екрани навигационните връзки са подредени.

Понастоящем не се поддържат навигационни връзки в лентата за навигация.

Safari и отзивчиви оправдани навигации

Считано от v9.1.2, Safari проявява грешка, при която хоризонталното преоразмеряване на вашия браузър причинява грешки при рендиране в оправданата навигация, които се изчистват при опресняване. Този бъг също е показан в примера за оправдана навигация .

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

Деактивирани връзки

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

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

Този клас ще промени само <a>външния вид, но не и функционалността му. Използвайте персонализиран 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по ширина. Коригирайте тази променлива в източника Less, за да контролирате кога навигационната лента се свива/разгъва. Стойността по подразбиране е 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>

Заменете марката на навигационната лента с вашето собствено изображение, като замените текста с <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 float в указаната посока. Например, за да подравните връзките за навигация, поставете ги отделно <ul>с приложения съответен полезен клас.

Тези класове са смесени версии на .pull-leftи .pull-right, но те са обхванати от медийни заявки за по-лесно боравене с компоненти на лентата за навигация в различни размери на устройства.

Дясно подравняване на множество компоненти

Навигационните ленти в момента имат ограничение с множество .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>. Изпробвайте вашите собствени стойности или използвайте нашия фрагмент по-долу. Съвет: По подразбиране навигационната лента е висока 50px.

body { padding-top: 70px; }

Уверете се, че сте включили това след основния CSS на Bootstrap.

Добавете .navbar-fixed-bottomи включете .containerили .container-fluidкъм центриране и подложка на съдържанието на навигационната лента.

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

Изисква се подплата за тялото

Фиксираната навигационна лента ще наслагва другото ви съдържание, освен ако не добавите paddingв долната част на <body>. Изпробвайте вашите собствени стойности или използвайте нашия фрагмент по-долу. Съвет: По подразбиране навигационната лента е висока 50px.

body { padding-bottom: 70px; }

Уверете се, че сте включили това след основния CSS на Bootstrap.

Създайте навигационна лента с пълна ширина, която се превърта настрани със страницата, като добавите .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>

Лек, гъвкав компонент, който по желание може да разшири целия изгледен прозорец, за да покаже ключово съдържание на вашия сайт.

Здравей свят!

Това е проста геройска единица, прост компонент в стил jumbotron за привличане на допълнително внимание към представено съдържание или информация.

Научете повече

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

За да направите jumbotron с пълна ширина и без заоблени ъгли, поставете го извън всички .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"атрибута data.

Връзки в сигнали

Използвайте .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>

За да сте сигурни, че текстът на етикета остава четлив дори при ниски проценти, помислете за добавяне 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медийно заглавие

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Вложено медийно заглавие

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медийно заглавие

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Медийно заглавие

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вложено медийно заглавие
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вложено медийно заглавие
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вложено медийно заглавие
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 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 in
Morbi leo risus
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 in
1Morbi leo risus

<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 in Morbi leo risus 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 in Morbi leo risus 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 in
Cras sit amet nibh libero
Porta ac consectetur ac
Вестибулум при ерос

Dapibus ac facilisis in Cras sit amet nibh libero 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. Меценат sed diam eget risus varius blandit.

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

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

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

Donec id elit non mi porta gravida at eget metus. Меценат 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, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
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	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Лари	птицата	@туитър

<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, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
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>Само текстови

Подсказките и изскачащите екрани в групите за въвеждане изискват специална настройка

Да не се смесва с други компоненти

Винаги добавяйте етикети

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

Оразмеряване

Полета за отметка и добавки за радио

Добавки за бутони

Бутони с падащи менюта

Сегментирани бутони

Множество бутони

навигация

Използването на навигации за панели с раздели изисква плъгин за раздели на JavaScript

Направете навигациите, използвани като навигация, достъпни

Раздели

Хапчета

Оправдано

Safari и отзивчиви оправдани навигации

Деактивирани връзки

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

Използване на падащи менюта

Раздели с падащи менюта

Хапчета с падащи менюта

Навигационна лента

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

Преливащо съдържание

Изисква плъгин за JavaScript

Промяна на свитата точка на прекъсване на мобилната навигационна лента

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

Имидж на марката

Форми

Предупреждения за мобилни устройства

Винаги добавяйте етикети

Бутони

Използване в зависимост от контекста

Текст

Ненавигационни връзки

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

Дясно подравняване на множество компоненти

Фиксиран отгоре

Изисква се подплата за тялото

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

Отхвърлено `.pull-right`подравняване

Уверете се, че е правилен `role`и предоставете етикет

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

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

`<input>`Само текстови