Компоненти

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

Групи бутони

Използвайте групи бутони, за да свържете няколко бутона заедно като един съставен компонент. Изградете ги с поредица от <a>или <button>елементи.

Най-добри практики

Препоръчваме следните насоки за използване на групи бутони и ленти с инструменти:

Винаги използвайте един и същ елемент в една група бутони <a>или <button>.
Не смесвайте бутони с различни цветове в една и съща група бутони.
Използвайте икони в допълнение или вместо текст, но не забравяйте да включите алтернативен и заглавен текст, където е подходящо.

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

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

Ето как изглежда HTML за стандартна група бутони, изградена с бутони за закрепени етикети:

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

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

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

Вземете javascript »

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

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

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

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

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

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

Подобно на група бутони, нашето маркиране използва обикновено маркиране на бутони, но с няколко допълнения за усъвършенстване на стила и поддръжка на плъгина jQuery за падащо меню на Bootstrap.

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

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

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

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

Размери

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- връзки към падащото меню -->
  </ul>
</div>

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

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

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

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

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

Кога да използвате

Разделите и хапчетата са чудесни за секции от съдържание или за навигиране между страници със сродно съдържание.

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

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

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

Вземете редовни <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>

С възможност за подреждане Направете раздели или хапчета вертикални

Как да ги подредите

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

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

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

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

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

Падащи менюта За разширени навигационни компоненти

Лесни богати менюта

Падащите менюта в разделите и хапчетата на Bootstrap са супер лесни и изискват само малко допълнителен HTML и лек плъгин jQuery.

Преминете към страницата на Javascript, за да прочетете документите за инициализиране на падащи менюта в Bootstrap.

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

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

Структурно те са изградени върху същите основни навигационни стилове като разделите и хапчетата, така че използването и персонализирането са лесни.

С икони

Навигационните списъци също са лесни за оборудване с икони. Добавете подходящия <i>етикет с клас и сте готови.

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

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

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

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

Вземете списък с връзки и добавете 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>

Пример с икони

Същият пример, но с <i>тагове за икони.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Библиотека
    </a>
  </li>
  ...
</ul>

Tabbable nav Вдъхнете живот на разделите чрез javascript

Какво е включено

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

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

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

За да направите раздели табулирани, обвийте .nav-tabsв друг div с клас .tabbable.

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

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

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

Персонализиран jQuery плъгин

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

Вземете javascript →

Директно маркиране

Използването на раздели с възможност за табулиране изисква обвиващ div, набор от раздели и набор от панели със съдържание с възможност за табулиране.

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

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

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

Обърнете реда на 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>

Пример за статична навигационна лента

Пример за статична (не фиксирана в горната част) навигационна лента с име на проект, навигация и формуляр за търсене.

Navbar скеле

Навигационната лента изисква само няколко div, за да я структурирате добре за статичен или фиксиран дисплей.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
      ...
    </div>
  </div>
</div>

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

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

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

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

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

Име на марката

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

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

Форми в навигационната лента

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

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

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

Незадължителна адаптивна вариация

В зависимост от количеството съдържание в горната ви лента, може да искате да приложите опциите за реагиране. За да направите това, обвийте навигационното си съдържание в съдържащ 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" > 
        <!-- .nav, .navbar-търсене, .navbar-форма и т.н. -->
      </div>
 
    </div>
  </div>
</div>

Горе главата! Отзивчивата навигационна лента изисква приставката за свиване .

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

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

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

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

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

Добавяне на падащи менюта

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

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

Вземете javascript →

Текст в навигационната лента

Увийте поредици от текст в <p>таг за правилен водещ и цвят.

Защо да ги използваме

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

Примери

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

Маркиране

HTML е вашият стандартен неподреден списък с връзки.

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

Връзки към страници със състояние

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

Гъвкаво подравняване

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

Примери

Компонентът за страниране по подразбиране е гъвкав и работи в редица варианти.

Маркиране

Обвито в <div>, пагинацията е просто <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Предишна </a></li> 
    <li class = "active" > 
      <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клас от пагинацията.

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

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

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

Етикети	Маркиране
По подразбиране	`<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>`

относно

Значките са малки, прости компоненти за показване на индикатор или някакъв брой. Те обикновено се намират в имейл клиенти като Mail.app или в мобилни приложения за насочени известия.

Налични класове

Име	Пример	Маркиране
По подразбиране	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-error">6</span>`
Информация	8	`<span class="badge badge-info">8</span>`
Обратно	10	`<span class="badge badge-inverse">10</span>`

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

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

Маркиране

Опаковайте съдържанието си divтака:

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

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

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

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

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

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

<div class = "page-header" > 
  <h1> Примерен колонтитул на страница </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.

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

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

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

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

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

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

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

Маркирането

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Етикет с миниатюра </h5>
      <p> Надпис на миниатюра точно тук... </p>
    </div>
  </li>
  ...
</ul>

Още примери

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

Леки настройки по подразбиране

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

С Bootstrap 2 опростихме базовия клас: .alertвместо .alert-message. Ние също така намалихме минимално необходимото маркиране - не <p>се изисква по подразбиране, само външният <div>.

Единично предупредително съобщение

За по-издръжлив компонент с по-малко код премахнахме диференциращия външен вид за предупреждения за блокиране, съобщения, които идват с повече подложки и обикновено повече текст. Класът също е променен на .alert-block.

Върви страхотно с javascript

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

Вземете приставката »

Примерни сигнали

Опаковайте вашето съобщение и незадължителна икона за затваряне в div с прост клас.

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

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

Лесно разширете стандартното предупредително съобщение с два незадължителни класа: .alert-blockза повече подложки и текстови контроли и .alert-headingза съответстващо заглавие.

Внимание!

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Предупреждение! </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 = " ширина : 60 %; " ></div> 
</div>

Раирана

Използва градиент за създаване на раиран ефект (без IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       style = " ширина : 20 %; " ></div> 
</div>

Анимиран

Взема примера с ивици и го анимира (без IE).

<div class = "напредък напредък-ивици 
     активен" >
  <div class = "bar" 
       style = " ширина : 40 %; " ></div> 
</div>

Опции и поддръжка на браузър

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

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

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

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

Поведение

Лентите за напредъка използват CSS3 преходи, така че ако динамично регулирате ширината чрез javascript, тя плавно ще преоразмерява.

Ако използвате .activeкласа, вашите .progress-stripedленти за напредък ще анимират ивиците отляво надясно.

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

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

Opera и IE не поддържат анимации в момента.

Уелс

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

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

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

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

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

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

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

Групи бутони

Най-добри практики

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

Пример за лента с инструменти

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

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

Падащи менюта с бутони Изградени върху групи бутони за осигуряване на контекстуални менюта

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

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

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

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

Изисква javascript

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

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

Размери

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

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

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

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

Мощен базов клас

Кога да използвате

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

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

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

С възможност за подреждане Направете раздели или хапчета вертикални

Как да ги подредите

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

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

Падащи менюта За разширени навигационни компоненти

Лесни богати менюта

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

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

Навигационни списъци Създайте прости подредени навигации, чудесни за странични ленти

Навигация в стил на приложение

С икони

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

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

Пример с икони

Tabbable nav Вдъхнете живот на разделите чрез javascript

Какво е включено

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

Персонализиран jQuery плъгин

Директно маркиране

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

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

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

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

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

Пример за статична навигационна лента

Navbar скеле

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

Име на марката

Форми в навигационната лента

Незадължителна адаптивна вариация

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

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

Добавяне на падащи менюта

Текст в навигационната лента

галета

Защо да ги използваме

Примери

Маркиране

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

Пагиниране на няколко страници

Кога да използвате

Връзки към страници със състояние

Гъвкаво подравняване

Примери

Маркиране

Пейджър За бързи предишни и следващи връзки

Относно пейджър

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

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

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

Вградени етикети Етикетирайте и анотирайте текст

Значки Индикатори и брой непрочетени

относно

Налични класове

Типографски компоненти Горен колонтитул на страница и герой за сегментиране на съдържание