Компоненти

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

Групи бутони

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

И с лента с инструменти за множество групи:

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

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

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

Вземете javascript »

Горе главата

CSS за групи бутони е в отделен файл, button-groups.less.

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

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

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

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

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

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

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

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

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

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

Защо таблетки и хапчета

Разделите и хапчетата в Bootstrap са изградени върху един <ul>и същ основен HTML, списък с връзки. Сменяйте между раздели или хапчета само с клас.

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

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

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

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

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

За да направите лентата за навигация фиксирана в горната част на прозореца за изглед, добавете .navbar-fixed-topкъм най-външния div, .navbar. Във вашия CSS ще трябва също да отчетете припокриването, което причинява чрез добавяне padding-top: 40px;към вашия <body>.

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

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

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

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

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

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

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

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

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

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

Вземете javascript →

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

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

Примери

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

Маркиране

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" > 
    <a href = "#" > Данни </a> 
  </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>

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

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

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

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

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

<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">New</span>`
Внимание	`<span class="label label-warning">Warning</span>`
важно	`<span class="label label-important">Important</span>`
Информация	`<span class="label label-info">Info</span>`

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

По подразбиране миниатюрите на 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" > × </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" > × </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>

Раирана

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

<div class = "информация за напредъка 
     прогрес-раиран" >
  <div class = "bar" 
       style = " ширина : 20 %; " ></div> 
</div>

Анимиран

Взема раирания пример и го анимира.

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

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

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

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

.progress-info
.progress-success
.progress-danger

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

Поведение

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

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

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

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

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

Уелс

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

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

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

Значки

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

<span class = "badge" > 3 </div>

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

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

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

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

Групи бутони

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

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

Горе главата

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

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

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

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

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

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

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

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

Защо таблетки и хапчета

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

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

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

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

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

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

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

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

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

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

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

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

С икони

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

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

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

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

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

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

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

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

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

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

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

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

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

Navbar скеле

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

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

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

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

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

галета

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

Примери

Маркиране

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

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

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

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

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

Примери

Маркиране

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

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

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

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

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

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

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

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

Етикет с миниатюра

Етикет с миниатюра

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

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

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

Маркирането

Още примери

Сигнали Стилове за успех, предупреждение и съобщения за грешка

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

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

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

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

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

Внимание!

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