Групи кнопок

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

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

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

Потрібен javascript

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

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

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

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

Розміри

Використовуйте додаткові кнопки classe .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 = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </ul>
</div>

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

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Випадання </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <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.

Вкладки з розкривними меню

• додому
• Довідка
• спадний список
  • Дія
  • Інша дія
  • Тут ще щось
  • Окреме посилання
• Dropup
  • Дія
  • Інша дія
  • Тут ще щось
  • Окреме посилання

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

Таблетки з випадаючими

• додому
• Довідка
• спадний список
  • Дія
  • Інша дія
  • Тут ще щось
  • Окреме посилання
• Dropup
  • Дія
  • Інша дія
  • Тут ще щось
  • Окреме посилання

<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>тег із класом, і все готово.

Горизонтальні роздільники

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

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

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

Щоб зробити вкладки доступними для вкладок, оберніть .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>

Виправлена ​​панель навігації

Зафіксуйте навігаційну панель у верхній або нижній частині вікна перегляду за допомогою додаткового класу на зовнішньому div, .navbar.

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

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

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

Назва бренду

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

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

Текст на навігаційній панелі

Оберніть рядки тексту в <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 class = "попередній" > 
    <a href = "#" > ← Старший </a> 
  </li>
  <li class = "наступний" > 
    <a href = "#" > Новіший → </a> 
  </li>
</ul>

про

Бейджі — це невеликі прості компоненти для відображення індикатора чи певного підрахунку. Зазвичай їх можна знайти в поштових клієнтах, як-от Mail.app, або в мобільних додатках для push-повідомлень.

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

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до версії 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>

Смугастий

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

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

Анімований

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

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

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

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

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

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

Поведінка

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

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

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

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

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

Велс

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

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

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

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

×

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