Пример

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Действие </a></li>  
  <li><a tabindex = "-1" href = "#" > Друго действие </a></li>  
  <li><a tabindex = "-1" href = "#" > Нещо друго тук </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Разделена връзка </a></li>  
</ul>

Маркиране

Гледайки само падащото меню, ето необходимия HTML. Трябва да обвиете тригера на падащото меню и падащото меню в .dropdownили друг елемент, който декларира position: relative;. След това просто създайте менюто.

<div class = "dropdown" > 
  <!-- Връзка или бутон за превключване на падащото меню -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Действие </a></li>  
    <li><a tabindex = "-1" href = "#" > Друго действие </a></li>  
    <li><a tabindex = "-1" href = "#" > Нещо друго тук </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Разделена връзка </a></li>  
  </ul>
</div>

Настроики

Подравнете менютата отдясно и добавете, включете допълнителни нива на падащи менюта.

Подравняване на менютата

Добавяне .pull-rightкъм a .dropdown-menuза подравняване на падащото меню вдясно.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Подменюта в падащите менюта

Добавете допълнително ниво на падащи менюта, появяващи се при задържане на мишката като тези на OS X, с някои прости добавки за маркиране. Добавете .dropdown-submenuкъм всяко liв съществуващо падащо меню за автоматично оформяне.

По подразбиране

Спадне до

Ляво подменю

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "падащо подменю" > 
    <a tabindex = "-1" href = "#" > Още опции </a>  
    <ul class = "падащо меню" > 
      ...
    </ul>
  </li>
</ul>

Примери

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

Група с един бутон

Увийте поредица от бутони .btnс .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Множество групи бутони

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Вертикални групи бутони

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

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Кутия за отметка и аромати на радиото

Групите бутони могат също да функционират като радиостанции, където само един бутон може да е активен, или квадратчета за отметка, където произволен брой бутони могат да бъдат активни. Вижте документите на JavaScript за това.

Падащи менюта в групи бутони

Горе главата!Бутоните с падащи менюта трябва да бъдат индивидуално опаковани в собствените си .btn-groupв рамките на .btn-toolbarза правилно изобразяване.

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

Използвайте който и да е бутон, за да задействате падащо меню, като го поставите в рамките на .btn-groupи предоставите правилното маркиране на менюто.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Действие
    <span class = "caret" ></span> 
  </a>
  <ul class = "падащо меню" > 
    <!-- връзки към падащото меню -->
  </ul>
</div>

Работи с всички размери бутони

Падащите менюта с бутони работят във всякакъв размер: .btn-large, .btn-smallили .btn-mini.

Изисква JavaScript

Падащите менюта с бутони изискват приставката за падащо меню Bootstrap , за да функционират.

В някои случаи - като мобилни - падащите менюта ще се простират извън прозореца за изглед. Трябва да разрешите подравняването ръчно или с персонализиран JavaScript.

Разделяне на падащи бутони

Въз основа на стиловете и маркирането на групата бутони можем лесно да създадем разделен бутон. Разделените бутони включват стандартно действие отляво и падащо превключване отдясно с контекстуални връзки.

<div class = "btn-group" > 
  <button class = "btn" > Действие </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "падащо меню" > 
    <!-- връзки към падащото меню -->
  </ul>
</div>

Размери

Използвайте допълнителните класове бутони .btn-mini, .btn-smallили .btn-largeза оразмеряване.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Действие </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "падащо меню" > 
    <!-- връзки към падащото меню -->
  </ul>
</div>

Падащи менюта

Падащите менюта също могат да се превключват отдолу нагоре чрез добавяне на един клас към непосредствения родител на .dropdown-menu. Той ще преобърне посоката на .caretи позиционира самото меню, за да се движи отдолу нагоре вместо отгоре надолу.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "падащо меню" > 
    <!-- връзки към падащото меню -->
  </ul>
</div>

Леки настройки по подразбиране Еднакво маркиране, различни класове

Всички навигационни компоненти тук – раздели, хапчета и списъци – споделят едно и също основно маркиране и стилове в .navкласа.

Основни раздели

Вземете редовни <ul>връзки и добавете .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Начало </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Основни хапчета

Вземете същия HTML, но .nav-pillsвместо това използвайте:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#" > Начало </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Състояние с увреждания

За всеки компонент за навигация (табове, хапчета или списък), добавете .disabledза сиви връзки и без ефекти при задържане . Връзките обаче ще останат кликнати, освен ако не премахнете hrefатрибута. Като алтернатива можете да внедрите персонализиран JavaScript, за да предотвратите тези кликвания.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Начало </a></li>  
  ...
</ul>

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

За да подравните навигационните връзки, използвайте .pull-leftили .pull-rightпомощните класове. И двата класа ще добавят CSS float в указаната посока.

С възможност за подреждане

Тъй като разделите и хапчетата са хоризонтални по подразбиране, просто добавете втори клас, .nav-stackedза да изглеждат вертикално подредени.

Подредени раздели

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Подредени хапчета

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

падащи менюта

Добавете падащи менюта с малко допълнителен HTML и JavaScript приставката за падащи менюта .

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

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "падащо меню"
       href = "#" >
        Падащо меню
        <b class = "caret" ></b> 
      </a>
    <ul class = "падащо меню" > 
      <!-- връзки -->
    </ul>
  </li>
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "падащо меню"
       href = "#" >
        Падащо меню
        <b class = "caret" ></b> 
      </a>
    <ul class = "падащо меню" > 
      <!-- връзки -->
    </ul>
  </li>
</ul>

Навигационни списъци

Прост и лесен начин за изграждане на групи от навигационни връзки с незадължителни заглавки. Те се използват най-добре в странични ленти като Finder в OS X.

Примерен навигационен списък

Вземете списък с връзки и добавете class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Заглавка на списъка </li> 
  <li class = "active" ><a href = "#" > Начало </a></li>  
  <li><a href = "#" > Библиотека </a></li> 
  ...
</ul>

ЗабележкаЗа влагане в навигационен списък, включете class="nav nav-list"във всеки вложен <ul>.

Хоризонтални разделители

Добавете хоризонтален разделител, като създадете празен елемент от списък с класа .divider, така:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Навигация с раздели

Вдъхнете живот на вашите раздели с прост плъгин за превключване между съдържание чрез раздели. Bootstrap интегрира табулируеми раздели в четири стила: отгоре (по подразбиране), отдясно, отдолу и отляво.

Пример за раздели

За да направите разделите с възможност за разделяне, създайте .tab-paneс уникален идентификатор за всеки раздел и ги обвийте в .tab-content.

Аз съм в секция 1.

Здравейте, аз съм в секция 2.

Какво става, момиче, това е раздел 3.

<div class = "tabbable" > <!-- Изисква се само за леви/десни раздели -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Раздел 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Раздел 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Аз съм в раздел 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Здравейте, аз съм в раздел 2. </p>
    </div>
  </div>
</div>

Избледняване в раздели

За да накарате разделите да изчезват, добавете .fadeкъм всеки .tab-pane.

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

Всички табулируеми раздели се захранват от нашия лек плъгин jQuery. Прочетете повече за това как да вдъхнете живот на табулаторните раздели на страницата с документи на JavaScript .

Възможност за разделяне във всяка посока

Езичета на дъното

Обърнете реда на HTML и добавете клас, за да поставите раздели в долната част.

Аз съм в секция А.

Здравейте, аз съм в секция Б.

Какво става, момиче, това е секция C.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Раздели вляво

Разменете класа, за да поставите раздели отляво.

Аз съм в секция А.

Здравейте, аз съм в секция Б.

Какво става, момиче, това е секция C.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Раздели вдясно

Разменете класа, за да поставите раздели отдясно.

Аз съм в секция А.

Здравейте, аз съм в секция Б.

Какво става, момиче, това е секция C.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Основна навигационна лента

Като начало навигационните ленти са статични (не са фиксирани в горната част) и включват поддръжка за име на проект и основна навигация. Поставете някъде в рамките на .container, което задава ширината на вашия сайт и съдържание.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Заглавие </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Начало </a></li>  
      <li><a href = "#" > Връзка </a></li> 
      <li><a href = "#" > Връзка </a></li> 
    </ul>
  </div>
</div>

Компоненти на навигационната лента

Марка

Една проста връзка за показване на името на вашата марка или проект изисква само anchor таг.

<a class = "brand" href = "#" > Име на проекта </a>

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

Навигационните елементи се добавят лесно чрез неподредени списъци.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Начало </a> 
  </li>
  <li><a href = "#" > Връзка </a></li> 
  <li><a href = "#" > Връзка </a></li> 
</ul>

Можете лесно да добавяте разделители към вашите навигационни връзки с празен елемент от списък и прост клас. Просто добавете това между връзките:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Форми

За правилно стилизиране и позициониране на формуляр в навигационната лента, добавете подходящите класове, както е показано по-долу. За формуляр по подразбиране включете .navbar-formили .pull-leftили .pull-right, за да го подравните правилно.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Изпращане </button>  
</form>

Форма за търсене

За по-персонализирана форма за търсене добавете .navbar-searchкъм formи .search-queryкъм въвеждането на специализирани стилове в навигационната лента.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

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

Подравнете навигационни връзки, формуляр за търсене или текст, използвайте .pull-leftили .pull-rightпомощните класове. И двата класа ще добавят CSS float в указаната посока.

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

Добавете падащи менюта и падащи менюта към навигацията с малко маркиране и плъгина за JavaScript за падащи менюта .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Сметка
      <b class = "caret" ></b> 
    </a>
    <ul class = "падащо меню" > 
      ...
    </ul>
  </li>
</ul>

Посетете документацията за падащи менюта на JavaScript за повече маркиране и информация относно извикването на падащи менюта.

Текст

Обвийте текстови низове в елемент с .navbar-text, обикновено върху <p>етикет за правилен водещ и цвят.

Опционални варианти на дисплея

Фиксирайте лентата за навигация в горната или долната част на прозореца за изглед с допълнителен клас на най-външния div, .navbar.

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

Добавете .navbar-fixed-topи не забравяйте да отчетете скритата област под него, като добавите поне 40px paddingкъм <body>. Не забравяйте да добавите това след основния CSS на Bootstrap и преди незадължителния отзивчив CSS.

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

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

Добавете .navbar-fixed-bottomвместо това.

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

Статична горна навигационна лента

Създайте навигационна лента с пълна ширина, която се превърта заедно със страницата, като добавите .navbar-static-top. За разлика от .navbar-fixed-topкласа, не е необходимо да променяте никакви подложки на body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Отзивчива навигационна лента

За да приложите свиваща се адаптивна навигационна лента, обвийте съдържанието на навигационната лента в съдържащ div, .nav-collapse.collapseи добавете бутона за превключване на навигационната лента, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
 
      <!-- .btn-navbar се използва като превключвател за свито съдържание на навигационната лента -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Не забравяйте да оставите марката там, ако искате да бъде показана -->
      <a class = "brand" href = "#" > Име на проекта </a>  
 
      <!-- Всичко, което искате скрито на 940px или по-малко, поставете тук -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-търсене, .navbar-форма и т.н. -->
      </div>
 
    </div>
  </div>
</div>

Горе главата! Адаптивната навигационна лента изисква приставката за свиване и адаптивния Bootstrap CSS файл .

Обърната вариация

Променете външния вид на навигационната лента, като добавите .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Примери

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

<ul class = "breadcrumb" > 
  <li><a href = "#" > Начало </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Библиотека </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Данни </li> 
</ul>

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

Проста пагинация, вдъхновена от Rdio, чудесна за приложения и резултати от търсене. Големият блок е трудно да се пропусне, лесно се мащабира и осигурява големи области за щракване.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Предишна </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 = "#" > Следващ </a></li> 
  </ul>
</div>

Настроики

Забранени и активни състояния

Връзките могат да се персонализират за различни обстоятелства. Използвайте .disabledза връзки, върху които не можете да щракнете, и .activeза обозначаване на текущата страница.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > Предишна </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

По желание можете да замените активни или деактивирани котви за участъци, за да премахнете функционалността на кликване, като същевременно запазите предвидените стилове.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> Предишна </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Размери

Искате ли по-голяма или по-малка пагинация? Добавете .pagination-large, .pagination-smallили .pagination-miniза допълнителни размери.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Подравняване

Добавете един от два незадължителни класа, за да промените подравняването на връзките за страници: .pagination-centeredи .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Пейджър

Бързи предишни и следващи връзки за прости реализации на страниране с леко маркиране и стилове. Страхотен е за прости сайтове като блогове или списания.

Пример по подразбиране

По подразбиране пейджърът центрира връзките.

<ul class = "pager" > 
  <li><a href = "#" > Предишен </a></li> 
  <li><a href = "#" > Следващ </a></li> 
</ul>

Подравнени връзки

Като алтернатива можете да подравните всяка връзка към страните:

<ul class = "pager" > 
  <li клас = "предишен" > 
    <a href = "#" > ← По-стари </a> 
  </li>
  <li class = "следващ" > 
    <a href = "#" > По-нов → </a> 
  </li>
</ul>

Незадължително забранено състояние

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

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← По-стари </a> 
  </li>
  ...
</ul>

Етикети

Етикети	Маркиране
По подразбиране	`<span class="label">Default</span>`
Успех	`<span class="label label-success">Success</span>`
Внимание	`<span class="label label-warning">Warning</span>`
важно	`<span class="label label-important">Important</span>`
Информация	`<span class="label label-info">Info</span>`
Обратно	`<span class="label label-inverse">Inverse</span>`

Значки

Име	Пример	Маркиране
По подразбиране	1	`<span class="badge">1</span>`
Успех	2	`<span class="badge badge-success">2</span>`
Внимание	4	`<span class="badge badge-warning">4</span>`
важно	6	`<span class="badge badge-important">6</span>`
Информация	8	`<span class="badge badge-info">8</span>`
Обратно	10	`<span class="badge badge-inverse">10</span>`

Герой единица

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

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

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

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

<div class = "hero-unit" > 
  <h1> Заглавие </h1>
  <p> Слоган </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Научете повече
    </a>
  </p>
</div>

Горен колонтитул на страница

Проста обвивка за h1подходящо разпределяне и сегментиране на секции от съдържание на страница. Може да използва елемента по h1подразбиране small, както и повечето други компоненти (с допълнителни стилове).

<div class = "page-header" > 
  <h1> Примерен колонтитул на страница <small> Подтекст за горен колонтитул </small></h1>
</div>

Миниатюри по подразбиране

По подразбиране миниатюрите на Bootstrap са проектирани да показват свързани изображения с минимално необходимо маркиране.

Силно персонализиран

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

Действие Действие

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

Миниатюрите (преди това .media-gridдо v1.4) са страхотни за мрежи от снимки или видеоклипове, резултати от търсене на изображения, продукти на дребно, портфолио и много други. Те могат да бъдат връзки или статично съдържание.

Просто, гъвкаво маркиране

Маркирането на миниатюри е просто – всичко, което е необходимо, е a ulс произволен брой елементи. liОсвен това е супер гъвкав, позволяващ всякакъв тип съдържание само с малко повече маркиране, за да обвие вашето съдържание.

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

И накрая, компонентът за миниатюри използва съществуващи класове на мрежова система - като .span2или .span3- за контрол на размерите на миниатюрите.

Маркиране

Както бе споменато по-рано, необходимото маркиране за миниатюри е леко и ясно. Ето преглед на настройката по подразбиране за свързани изображения :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

За персонализирано HTML съдържание в миниатюри маркирането се променя леко. За да позволим съдържание на ниво блок навсякъде, ние заменяме <a>с <div>подобно така:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Етикет с миниатюра </h3>
      <p> Надпис с миниатюра... </p>
    </div>
  </li>
  ...
</ul>

Още примери

Разгледайте всичките си възможности с различните класове на мрежата, достъпни за вас. Можете също да смесвате и комбинирате различни размери.

Сигнал по подразбиране

Обвийте произволен текст и опционален бутон за отхвърляне .alertза основно предупредително предупредително съобщение.

Внимание! Най-добре проверете себе си, не изглеждате много добре.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре.
</div>

Бутони за отхвърляне

Браузърите Mobile Safari и Mobile Opera, в допълнение към data-dismiss="alert"атрибута, изискват href="#"за отхвърляне на предупреждения при използване на <a>етикет.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

Като алтернатива можете да използвате <button>елемент с атрибута data, което сме избрали да направим за нашите документи. Когато използвате <button>, трябва да включите type="button"или вашите формуляри може да не бъдат изпратени.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

Отхвърляне на сигнали чрез JavaScript

Използвайте приставката за предупреждения jQuery за бързо и лесно отхвърляне на предупреждения.

Настроики

За по-дълги съобщения увеличете подложката в горната и долната част на обвивката на предупреждението, като добавите .alert-block.

Внимание!

Най-добре проверете себе си, не изглеждате много добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Внимание! </h4>
  Най-добре проверете себе си, не сте...
</div>

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

Добавете незадължителни класове, за да промените конотацията на предупреждение.

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

Ужас! Променете няколко неща и опитайте да изпратите отново.

<div class = "alert alert-error" > 
  ...
</div>

Успех

Много добре! Успешно прочетохте това важно предупредително съобщение.

<div class = "alert alert-success" > 
  ...
</div>

Информация

Горе главата! Този сигнал се нуждае от вашето внимание, но не е особено важен.

<div class = "alert alert-info" > 
  ...
</div>

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

Основен

Лента за напредък по подразбиране с вертикален градиент.

<div class = "напредък" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Раирана

Използва градиент за създаване на раиран ефект. Не се предлага в IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Анимиран

Добавете .activeкъм .progress-striped, за да анимирате ивиците отдясно наляво. Не се предлага във всички версии на IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Подредени

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

<div class = "напредък" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Настроики

Допълнителни цветове

Лентите за напредъка използват някои от едни и същи бутони и класове за предупреждение за последователни стилове.

<div class = "информация за прогреса на напредъка" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прогрес прогрес-успех" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "предупреждение за напредъка на напредъка" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "прогрес прогрес-опасност" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Раирани барове

Подобно на плътните цветове, имаме разнообразни ленти за прогрес.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Поддръжка на браузър

Лентите за напредък използват CSS3 градиенти, преходи и анимации, за да постигнат всичките си ефекти. Тези функции не се поддържат в IE7-9 или по-стари версии на Firefox.

Версии, по-стари от Internet Explorer 10 и Opera 12, не поддържат анимации.

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

Пример по подразбиране

Медиите по подразбиране позволяват плаващ медиен обект (изображения, видео, аудио) отляво или отдясно на блок със съдържание.

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

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.

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

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Медийно заглавие </h4> 
    ...
 
    <!-- Вложен медиен обект -->
    <div class = "media" > 
      ...
    </div>
  </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.
Медийно заглавие
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" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Медийно заглавие </h4> 
      ...
 
      <!-- Вложен медиен обект -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Уелс

Използвайте кладенеца като прост ефект върху елемент, за да му придадете ефект на вмъкване.

Виж, в кладенец съм!

<div class = "well" > 
  ...
</div>

Избираеми часове

Контролирайте подложките и заоблените ъгли с два незадължителни класа модификатори.

Виж, в кладенец съм!

<div class = "добре добре-голямо" > 
  ...
</div>

Виж, в кладенец съм!

<div class = "добре добре-малък" > 
  ...
</div>

Икона за затваряне

Използвайте общата икона за затваряне, за да отхвърлите съдържание като модални и сигнали.

<button class = "close" > × </button>

Устройствата с iOS изискват href="#" за събития с щракване, ако предпочитате да използвате котва.

<a class = "close" href = "#" > × </a>

Помощни класове

Прости, фокусирани класове за малки настройки на дисплея или поведението.

.дърпане-наляво

Плаване на елемент наляво

клас = "дърпане-наляво"

. дръпнете - наляво {
  float : ляво ;
}

.дърпане надясно

Плаване на елемент надясно

клас = "дърпане надясно"

. дръпнете - надясно {
  float : надясно ;
}

.заглушен

Променете цвета на елемент на#999

клас = "заглушен"

. заглушен {
  цвят : #999; 
}

.clearfix

Изчистете на floatвсеки елемент

клас = "clearfix"

. clearfix {
  * мащабиране : 1 ; 
  &: преди ,
  &: след {
    дисплей : маса ;
    съдържание : "" ; 
  }
  &: след {
    ясно : и двете ;
  }
}

Падащи менюта

Пример

Маркиране

Настроики

Подравняване на менютата

Подменюта в падащите менюта

Групи бутони

Примери

Група с един бутон

Множество групи бутони

Вертикални групи бутони

Кутия за отметка и аромати на радиото

Падащи менюта в групи бутони

Падащи менюта с бутони

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

Работи с всички размери бутони

Изисква JavaScript

Разделяне на падащи бутони

Размери

Падащи менюта

Навигация: раздели, хапчета и списъци

Леки настройки по подразбиране Еднакво маркиране, различни класове

Основни раздели

Основни хапчета

Състояние с увреждания

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

С възможност за подреждане

Подредени раздели

Подредени хапчета

падащи менюта

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

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

Навигационни списъци

Примерен навигационен списък

Хоризонтални разделители

Навигация с раздели

Пример за раздели

Избледняване в раздели

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

Възможност за разделяне във всяка посока

Езичета на дъното

Раздели вляво

Раздели вдясно

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

Основна навигационна лента

Компоненти на навигационната лента

Марка

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

Форми

Форма за търсене

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

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

Текст

Опционални варианти на дисплея

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

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

Статична горна навигационна лента

Отзивчива навигационна лента

Обърната вариация

галета

Примери

Страниране Две опции за прелистване на съдържание

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

Настроики

Забранени и активни състояния

Размери

Подравняване

Пейджър

Пример по подразбиране

Подравнени връзки

Незадължително забранено състояние

Етикети и значки

Етикети

Значки

Типографски компоненти

Герой единица

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

Горен колонтитул на страница

Примерен колонтитул на страница Подтекст за горен колонтитул

Миниатюри Решетки от изображения, видеоклипове, текст и др