компоненти

У Bootstrap вбудовано десятки повторно використовуваних компонентів, які забезпечують навігацію, сповіщення, спливаючі вікна та багато іншого.

Групи кнопок

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

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

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

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

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

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

Ось як виглядає HTML для стандартної групи кнопок, побудованої з кнопками тегів прив’язки:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Приклад панелі інструментів

Об’єднайте набори <div class="btn-group">в <div class="btn-toolbar">складніші компоненти.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

Отримати javascript »

Випадаючі списки в групах кнопок

Голови вгору! Для належного відтворення кнопки зі спадними меню мають бути окремо упаковані .btn-groupу власні ..btn-toolbar

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

Огляд і приклади

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

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

Подібно до групи кнопок, наша розмітка використовує звичайну розмітку кнопок, але з кількома доповненнями для вдосконалення стилю та підтримки плагіна jQuery, що розкривається, Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Дія
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- посилання спадного меню -->
  8. </ul>
  9. </div>

Працює з усіма розмірами кнопок

Випадаючі кнопки працюють будь-якого розміру. ваші кнопки розміром до .btn-large, .btn-smallабо .btn-mini.

Потрібен javascript

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

У деяких випадках, наприклад у мобільних, спадні меню виходять за межі області перегляду. Вам потрібно вирішити вирівнювання вручну або за допомогою спеціального JavaScript.


Розділені кнопки, що випадають

Огляд і приклади

Спираючись на стилі групи кнопок і розмітку, ми можемо легко створити розділену кнопку. Розділені кнопки мають стандартну дію ліворуч і розкривне меню праворуч із контекстними посиланнями.

Розміри

Використовуйте додаткові класи кнопок .btn-mini, .btn-smallабо .btn-largeдля визначення розміру.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- посилання спадного меню -->
  5. </ul>
  6. </div>

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

Ми розширюємо звичайні спадні списки кнопок, щоб надати другу дію кнопки, яка працює як окремий тригер спадного списку.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Дія </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- посилання спадного меню -->
  8. </ul>
  9. </div>

Випадаючі меню

Випадаючі меню також можна перемикати знизу вгору, додаючи один клас до безпосереднього батька .dropdown-menu. Це переверне напрямок .caretі перемістить саме меню, щоб рухатися знизу вгору, а не зверху вниз.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Випадання </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- посилання спадного меню -->
  8. </ul>
  9. </div>

Пагінація на кілька сторінок

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

Надзвичайно спрощена та мінімально оформлена пагінація, натхненна Rdio, чудово підходить для програм і результатів пошуку. Великий блок важко помітити, він легко масштабується та забезпечує великі області натискання.

Посилання на сторінки з підтримкою стану

Посилання можна настроїти та працювати в ряді обставин із правильним класом. .disabledдля неактивних посилань і .activeдля поточної сторінки.

Гнучке вирівнювання

Додайте один із двох додаткових класів, щоб змінити вирівнювання посилань на сторінки: .pagination-centeredі .pagination-right.

Приклади

Компонент розбиття на сторінки за замовчуванням є гнучким і працює в кількох варіантах.

Розмітка

Загорнуте в <div>, пагінація є просто <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Попередня </a></li>
  4. <li class = "active" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Далі </a></li>
  11. </ul>
  12. </div>

Пейджер Для швидких попередніх і наступних посилань

Про пейджер

Компонент пейджера — це набір посилань для простих реалізацій пагінації з легкою розміткою та ще більш легкими стилями. Це чудово підходить для простих сайтів, таких як блоги чи журнали.

Додатковий вимкнений стан

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

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

За замовчуванням пейджер центрує посилання.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Попередній </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Далі </a>
  7. </li>
  8. </ul>

Вирівняні посилання

Крім того, ви можете вирівняти кожне посилання по сторонах:

  1. <ul class = "pager" >
  2. <li class = "попередній" >
  3. <a href = "#" > Старший </a>
  4. </li>
  5. <li class = "наступний" >
  6. <a href = "#" > Новіший → </a>
  7. </li>
  8. </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, або в мобільних додатках для push-сповіщень.

Доступні класи

Ім'я приклад Розмітка
За замовчуванням 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-important">6</span>
Інформація 8 <span class="badge badge-info">8</span>
Зворотний 10 <span class="badge badge-inverse">10</span>

Одиниця героя

Bootstrap надає легкий, гнучкий компонент, який називається hero unit, щоб демонструвати вміст на вашому сайті. Він добре працює на маркетингових сайтах і сайтах із великим вмістом.

Розмітка

Оберніть свій вміст divтаким чином:

  1. <div class = "hero-unit" >
  2. <h1> Заголовок </h1>
  3. <p> Слоган </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Вивчайте більше
  7. </a>
  8. </p>
  9. </div>

Привіт Світ!

Це простий герой, простий компонент у стилі jumbotron для привернення додаткової уваги до рекомендованого вмісту чи інформації.

Вивчайте більше

Верхній колонтитул сторінки

Проста оболонка для h1відповідного розподілу та сегментації розділів вмісту на сторінці. Він може використовувати елемент h1за замовчуванням small, а також більшість інших компонентів (з додатковими стилями).

  1. <div class = "page-header" >
  2. <h1> Приклад заголовка сторінки </h1>
  3. </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— для керування розмірами ескізів.

Розмітка

Як згадувалося раніше, необхідна розмітка для мініатюр легка та зрозуміла. Ось погляд на налаштування за замовчуванням для пов’язаних зображень :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Для спеціального HTML-вмісту в мініатюрах розмітка дещо змінюється. Щоб дозволити вміст блокового рівня будь-де, ми замінюємо на <a>такий <div>:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Мітка мініатюри </h5>
  6. <p> Ескіз підпису тут... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Більше прикладів

Досліджуйте всі ваші можливості з різними класами сітки, доступними для вас. Ви також можете комбінувати різні розміри.

Легкі параметри за замовчуванням

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

За допомогою Bootstrap 2 ми спростили базовий клас: .alertзамість .alert-message. Ми також зменшили мінімальну необхідну розмітку <p>— за замовчуванням не потрібно, лише зовнішня <div>.

Єдине сповіщення

Для більш довговічного компонента з меншою кількістю коду ми видалили диференціальний вигляд сповіщень про блокування, повідомлень, які мають більше відступів і зазвичай більше тексту. Клас також змінився на .alert-block.


Чудово поєднується з javascript

Bootstrap постачається з чудовим плагіном jQuery, який підтримує сповіщення, що дозволяє швидко та легко їх відхиляти.

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

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

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

УВАГА! Краще перевірте себе, ви виглядаєте не дуже добре.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Попередження! </strong> Краще перевірте себе, ви виглядаєте не дуже добре.
  4. </div>

Голови вгору! Пристрої iOS потребують href="#"для відхилення сповіщень. Обов’язково включіть його та атрибут data для піктограм закриття прив’язки. Крім того, ви можете використовувати <button>елемент з атрибутом data, який ми вирішили зробити для наших документів. Використовуючи <button>, ви повинні включити, type="button"інакше ваші форми можуть не надсилатися.

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

УВАГА!

Краще перевірте себе, ви виглядаєте не дуже добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Увага! </h4>
  4. Найкраще перевірте себе, ви не...
  5. </div>

Контекстні альтернативи Додайте додаткові класи, щоб змінити конотацію сповіщення

Помилка або небезпека

Ох, чорт! Змініть дещо та спробуйте надіслати ще раз.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Успіх

молодець! Ви успішно прочитали це важливе сповіщення.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Інформація

Голови вгору! Це сповіщення потребує вашої уваги, але воно не надважливе.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

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

Базовий

Індикатор прогресу за умовчанням із вертикальним градієнтом.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. style = " ширина : 60 %; " ></div>
  4. </div>

Смугастий

Використовує градієнт для створення смугастого ефекту (без IE).

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

Анімований

Бере смугастий приклад і анімує його (без IE).

  1. <div class = "progress progress-striped
  2. активний" >
  3. <div class = "bar"
  4. style = " ширина : 40 %; " ></div>
  5. </div>

Опції та підтримка браузера

Додаткові кольори

Індикатори виконання використовують деякі з однакових класів кнопок і сповіщень для узгоджених стилів.

Смугасті штанги

Подібно до суцільних кольорів, у нас є різноманітні смугасті індикатори прогресу.

Поведінка

Індикатори виконання використовують переходи CSS3, тож якщо ви динамічно регулюєте ширину за допомогою JavaScript, розмір змінюватиметься плавно.

Якщо ви користуєтеся .activeкласом, .progress-stripedіндикатори прогресу анімують смуги зліва направо.

Підтримка браузера

Індикатори прогресу використовують градієнти, переходи та анімацію CSS3 для досягнення всіх своїх ефектів. Ці функції не підтримуються в IE7-9 або старіших версіях Firefox.

Opera та IE наразі не підтримують анімацію.

Велс

Використовуйте свердловину як простий ефект на елементі, щоб надати йому ефекту вставки.

Дивіться, я в колодязі!
  1. <div class = "well" >
  2. ...
  3. </div>

Закрити значок

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

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

Пристрої iOS вимагають href="#" для подій клацання, якщо ви віддаєте перевагу використанню прив’язки.

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