Групи кнопок

Використовуйте групи кнопок, щоб об’єднати кілька кнопок в один складений компонент. Побудуйте їх за допомогою серії <a>або <button>елементів.

Кращі практики

Ми рекомендуємо наступні вказівки щодо використання груп кнопок і панелей інструментів:

• Завжди використовуйте той самий елемент в одній групі кнопок <a>або <button>.
• Не змішуйте кнопки різних кольорів в одній групі кнопок.
• Використовуйте піктограми на додаток до тексту або замість нього, але обов’язково додайте альтернативний текст і текст заголовка, де це необхідно.

Пов’язані групи кнопок із розкривними меню (див. нижче) слід викликати окремо та завжди містити розкривне меню для вказівки бажаної поведінки.

Приклад за замовчуванням

Ось як виглядає 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-group">в <div class="btn-toolbar">складніші компоненти.

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

Прапорець і радіо аромати

Групи кнопок також можуть функціонувати як радіо, де може бути активна лише одна кнопка, або як прапорці, де може бути активна будь-яка кількість кнопок. Для цього перегляньте документи Javascript .

Отримати javascript »

Голови вгору

CSS для груп кнопок знаходиться в окремому файлі button-groups.less.

Випадаючі кнопки

Використовуйте будь-яку кнопку, щоб викликати спадне меню, розташувавши його в межах .btn-groupі вказавши правильну розмітку меню.

Голови вгору! Для роботи спадних меню кнопок потрібен плагін Bootstrap .

Приклад розмітки

Подібно до групи кнопок, наша розмітка використовує звичайну розмітку кнопок, але з кількома доповненнями для вдосконалення стилю та підтримки плагіна 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класі.

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

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

Вирівнювання компонентів

Щоб вирівняти навігаційні посилання, використовуйте службові класи .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 = "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.

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

У вашому CSS вам також потрібно буде врахувати перекриття, яке це спричиняє, додавши 40 пікселів або більше відступу до вашого <body>. Обов’язково додайте це після основного CSS Bootstrap і перед необов’язковим адаптивним CSS.

Назва бренду

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

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

Ви можете легко додати роздільники до своїх навігаційних посилань за допомогою порожнього елемента списку та простого класу. Просто додайте це між посиланнями:

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

Вирівнювання компонентів

Щоб вирівняти навігацію, форму пошуку або текст, використовуйте службові класи .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 = "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 надає легкий, гнучкий компонент, який називається 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-haeder" > 
  <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до версії 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 постачається з чудовим плагіном jQuery, який підтримує сповіщення, що дозволяє швидко та легко їх відхиляти.

Отримати плагін »

Приклад сповіщень

Оберніть своє повідомлення та додаткову піктограму закриття в div за допомогою простого класу.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Попередження! </strong> Краще перевірте себе, ви виглядаєте не дуже добре.
</div>

Легко розширте стандартне попереджувальне повідомлення двома необов’язковими класами: .alert-blockдля більшої кількості відступів і елементів керування текстом, а .alert-headingтакож для відповідного заголовка.

<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 = "progress" > 
  <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>