Групи кнопок

Використовуйте групи кнопок, щоб об’єднати кілька кнопок в один складений компонент. Побудуйте їх за допомогою серії <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 = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </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 = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </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 = "dropdown-menu" > 
      <!-- посилання -->
    </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 = "dropdown-menu" > 
      <!-- посилання -->
    </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>

Що включено

Оживіть свої вкладки за допомогою простого плагіна для перемикання між вмістом за допомогою вкладок. Bootstrap інтегрує вкладки з можливістю вкладок у чотирьох стилях: зверху (за замовчуванням), справа, знизу та зліва.

Перемикатися між ними легко і вимагає лише зміни дуже невеликої розмітки.

Приклад із вкладками

Щоб зробити вкладки доступними для вкладок, оберніть .nav-tabsв інший div за допомогою класу .tabbable.

Спеціальний плагін jQuery

Усі вкладки з можливістю вкладок працюють на основі нашого легкого плагіна jQuery. Дізнайтеся більше про те, як оживити вкладки з можливістю вкладок, на сторінці документів javascript.

Отримати javascript →

Вкладки внизу

Переверніть порядок 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>

Навбар будівельні ліси

Панель навігації потребує лише кількох елементів div, щоб добре структурувати її для статичного чи фіксованого відображення.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Щоб зафіксувати навігаційну панель у верхній частині вікна перегляду, додайте .navbar-fixed-topдо крайнього елемента div .navbar. У вашому CSS вам також потрібно буде врахувати перекриття, яке це спричиняє, додаючи padding-top: 40px;до вашого <body>.

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

Назва бренду

Для простого посилання, щоб показати назву вашого бренду чи проекту, потрібен лише тег прив’язки.

<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 = "container" > 
 
      <!-- .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>  
 
      <!-- Усе, що ви хочете приховати на 940 пікселів або менше, розмістіть тут -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form тощо -->
      </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 = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Обліковий запис
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </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 class = "попередній" > 
    <a href = "#" > ← Старший </a> 
  </li>
  <li class = "наступний" > 
    <a href = "#" > Новіший → </a> 
  </li>
</ul>

Ескізи за замовчуванням

За замовчуванням мініатюри 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до версії 1.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 comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

<div class="alert">
  <a class="close">×</a>
  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
</div>

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

<div class="alert alert-block">
  <a class="close">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you’re not...
</div>

Error or danger

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

Success

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

Information

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

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect.

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

Animated

Takes the striped example and animates it.

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

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

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

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

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

Значки

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

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<a class="close">&times;</a>