Групи бутони

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

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

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

Размери

Използвайте допълнителните класове бутони .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.

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

• У дома
• Помогне
• Падащо меню
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• У дома
• Помогне
• Падащо меню
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

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

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

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

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

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

Вземете javascript →

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

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

За раздели, подравнени вдясно или вляво, увийте .nav-tabsи .tab-contentв .tabbable.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Увийте текстови низове в <.navbar-text>, обикновено върху <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>

относно

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

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

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

Маркиране

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

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

Горе главата! Устройствата с iOS изискват href="#"за отхвърляне на предупреждения. Не забравяйте да включите него и атрибута data за икони за затваряне на котва. Като алтернатива можете да използвате <button>елемент с атрибута data, което сме избрали да направим за нашите документи. Когато използвате <button>, трябва да включите type="button"или вашите формуляри може да не бъдат изпратени.

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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>

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

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

×

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

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

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