Понад дюжина багаторазових компонентів, створених для забезпечення іконографії, спадних меню, груп введення, навігації, сповіщень та багато іншого.
Гліфікони
Доступні гліфи
Містить понад 250 гліфів у форматі шрифту з набору Glyphicon Halflings. Glyphicons Halflings зазвичай не доступні безкоштовно, але їхній творець зробив їх доступними для Bootstrap безкоштовно. На знак подяки ми лише просимо вас додати посилання на Glyphicons , коли це можливо.
гліфікон гліфікон-зірочка
гліфікон гліфікон-плюс
гліфікон гліфікон-євро
гліфікон glyphicon-eur
глификон гліфікон-мінус
гліфікон гліфікон-хмара
глификон гліфікон-конверт
глификон гліфікон-олівець
глификон гліфікон-скло
гліфікон гліфікон-муз
glyphicon glyphicon-пошук
гліфікон гліфікон-серце
гліфікон гліфікон-зірка
гліфікон гліфікон-зірка-порожній
glyphicon користувач glyphicon
гліфікон гліфікон-плівка
глификон гліфікон-ий-великий
глификон гліфікон-й
glyphicon glyphicon-th-list
гліфікон гліфікон-ок
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
глификон гліфікон-викл
глификон гліфікон-сигнал
глификон гліфікон-ког
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-файл
гліфікон гліфікон-час
глификон гліфікон-дорога
glyphicon glyphicon-download-alt
glyphicon glyphicon-завантажити
glyphicon glyphicon-завантаження
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-повтор
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
глификон гліфікон-замок
гліфікон гліфікон-прапор
glyphicon glyphicon-навушники
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-штрих-код
glyphicon glyphicon-tag
glyphicon glyphicon-теги
glyphicon glyphicon-книга
гліфікон гліфікон-закладка
гліфікон гліфікон-друк
гліфікон гліфікон-камера
glyphicon glyphicon-шрифт
гліфікон гліфікон-жирний
гліфікон гліфікон-курсив
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
гліфікон гліфікон-зображення
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
глификон гліфікон-відтінок
glyphicon glyphicon-edit
глификон гліфікон-доля
глификон гліфікон-перевірка
глификон гліфікон-переїзд
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
гліфікон гліфікон-назад
glyphicon glyphicon-play
гліфікон гліфікон-пауза
гліфікон гліфікон-стоп
гліфікон гліфікон-вперед
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
гліфікон гліфікон-мінус-знак
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
гліфікон гліфікон-знак питання
glyphicon glyphicon-info-sign
glyphicon glyphicon-скріншот
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
гліфікон гліфікон-знак-оклику
гліфікон гліфікон-дар
гліфікон гліфікон-лист
гліфікон гліфікон-вогняний
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
гліфікон гліфікон-попередження-знак
глификон гліфікон-площина
гліфікон гліфікон-календар
гліфікон гліфікон-рандом
гліфікон гліфікон-коментар
глификон гліфікон-магніт
гліфікон glyphicon-chevron-up
гліфікон гліфікон-шеврон-вниз
glyphicon glyphicon-ретвіт
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
гліфікон гліфікон-мегафон
глификон гліфікон-дзвіночок
глификон гліфікон-сертифікат
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
гліфікон гліфікон-рука-ліва
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
глификон гліфікон-глобус
гліфікон гліфікон-гайковий ключ
гліфікон гліфікон-завдання
glyphicon glyphicon-фільтр
глификон глификон-портфель
glyphicon glyphicon-повноекранний
glyphicon glyphicon-панель
гліфікон гліфікон-скріпка
гліфікон гліфікон-серце-порожнє
glyphicon glyphicon-link
гліфікон гліфікон-телефон
глификон глификон-кнопка
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
гліфікон гліфікон-род
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-не перевірено
гліфікон гліфікон-розгорнути
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-вхід
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-нове вікно
гліфікон гліфікон-запис
glyphicon glyphicon-зберегти
гліфікон гліфікон-відкритий
glyphicon glyphicon-saved
гліфікон гліфікон-імпорт
гліфікон гліфікон-експорт
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
глификон гліфікон-перенос
glyphicon glyphicon-столовий прилад
glyphicon glyphicon-header
гліфікон гліфікон-стиснутий
glyphicon glyphicon-навушники
glyphicon glyphicon-phone-alt
глификон гліфікон-вежа
glyphicon glyphicon-stats
glyphicon glyphicon-sd-відео
glyphicon glyphicon-hd-відео
glyphicon glyphicon-субтитри
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-завантаження
glyphicon glyphicon-cloud-upload
гліфікон гліфікон-дерево-хвойне
гліфікон гліфікон-дерево-листяний
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
гліфікон гліфікон-копія
гліфікон гліфікон-паста
glyphicon glyphicon-alert
glyphicon glyphicon-еквалайзер
гліфікон гліфікон-цар
гліфікон гліфікон-королева
глификон глификон-пішак
гліфікон гліфікон-єпископ
гліфікон гліфікон-лицар
glyphicon glyphicon-baby-formula
глификон гліфікон-намет
гліфікон гліфікон-дошка
глификон гліфікон-ложе
гліфікон гліфікон-яблуко
глификон гліфікон-стерти
гліфікон гліфікон-пісочний годинник
глификон гліфікон-лампа
гліфікон гліфікон-дублікат
гліфікон гліфікон-скарбничка
глификон гліфікон-ножиці
glyphicon glyphicon-біткойн
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон гліфікон-єн
glyphicon glyphicon-jpy
глификон глификон-рубль
глификон глификон-руб
глификон гліфікон-луска
гліфікон гліфікон-льодяник
glyphicon glyphicon-ice-lolly-tasted
гліфікон гліфікон-освіта
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
гліфікон гліфікон-олія
глификон глификон-зерно
сонцезахисні окуляри glyphicon glyphicon
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-консоль
глификон гліфікон-надрядковий
гліфікон гліфікон-підрядковий
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Як використовувати
З міркувань продуктивності всі піктограми потребують базового класу та окремого класу піктограм. Щоб використовувати, розмістіть наведений нижче код де завгодно. Обов’язково залишайте простір між піктограмою та текстом для правильного відступу.
Не змішувати з іншими компонентами
Класи піктограм не можна безпосередньо поєднувати з іншими компонентами. Їх не слід використовувати разом з іншими класами для того самого елемента. Замість цього додайте вкладений <span>і застосуйте класи значків до <span>.
Тільки для використання на порожніх елементах
Класи значків слід використовувати лише для елементів, які не містять текстового вмісту та не мають дочірніх елементів.
Зміна розташування шрифту значка
Bootstrap передбачає, що файли шрифтів значків будуть розташовані в ../fonts/каталозі відносно скомпільованих файлів CSS. Переміщення або перейменування цих файлів шрифтів означає оновлення CSS одним із трьох способів:
Змініть @icon-font-pathта/або @icon-font-nameзмінні у вихідних файлах Less.
Використовуйте будь-який варіант, який найкраще відповідає вашим конкретним налаштуванням розробки.
Доступні значки
Сучасні версії допоміжних технологій оголошуватимуть вміст, згенерований CSS, а також певні символи Unicode. Щоб уникнути ненавмисного та заплутаного виведення в програмах зчитування з екрана (зокрема, коли піктограми використовуються виключно для прикраси), ми приховуємо їх за допомогою aria-hidden="true"атрибута.
Якщо ви використовуєте значок для передачі значення (а не лише як декоративний елемент), переконайтеся, що це значення також передається допоміжним технологіям – наприклад, додайте додатковий вміст, візуально прихований за допомогою .sr-onlyкласу.
Якщо ви створюєте елементи керування без іншого тексту (наприклад, <button>який містить лише піктограму), вам слід завжди надавати альтернативний вміст, щоб визначити призначення елемента керування, щоб він був зрозумілим для користувачів допоміжних технологій. У цьому випадку ви можете додати aria-labelатрибут до самого елемента керування.
Приклади
Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.
Піктограма, яка використовується в сповіщенні , щоб передати, що це повідомлення про помилку, з додатковим .sr-onlyтекстом, щоб передати цю підказку користувачам допоміжних технологій.
Помилка:Введіть дійсну адресу електронної пошти
Випадаючі списки
Перемикається контекстне меню для відображення списків посилань. Зроблено інтерактивним за допомогою спадного плагіна JavaScript .
приклад
Загорніть тригер спадного меню та спадне меню всередину .dropdownабо інший елемент, який оголошує position: relative;. Потім додайте HTML меню.
За замовчуванням спадне меню автоматично розташовується на 100% від верхнього краю та вздовж лівого боку батьківського меню. Додайте .dropdown-menu-rightдо a, .dropdown-menuщоб вирівняти спадне меню праворуч.
Може вимагати додаткового позиціонування
Випадаючі списки автоматично розміщуються за допомогою CSS у звичайному потоці документа. Це означає, що спадні списки можуть бути обрізані батьками з певними overflowвластивостями або з’являтися поза межами вікна перегляду. Вирішуйте ці проблеми самостійно, коли вони виникають.
Застаріле .pull-rightвирівнювання
Починаючи з версії 3.1.0, ми припинили підтримку .pull-rightспадних меню. Щоб вирівняти меню за правим краєм, використовуйте .dropdown-menu-right. Вирівняні за правим краєм навігаційні компоненти на навігаційній панелі використовують версію mixin цього класу для автоматичного вирівнювання меню. Щоб змінити це, використовуйте .dropdown-menu-left.
Заголовки
Додайте заголовок, щоб позначити розділи дій у будь-якому спадному меню.
Згрупуйте ряд кнопок разом на одному рядку за допомогою групи кнопок. Додайте необов’язкове перемикач JavaScript і поведінку стилю прапорця за допомогою нашого плагіна кнопок .
Спливаючі підказки та спливаючі вікна в групах кнопок потребують спеціального налаштування
Під час використання спливаючих підказок або спливаючих елементів для елементів у .btn-group, вам доведеться вказати опцію, container: 'body'щоб уникнути небажаних побічних ефектів (таких як елемент стає ширшим і/або втрачає свої заокруглені кути, коли спрацьовує підказка чи спливаюче вікно).
Переконайтеся в правильності roleта надайте мітку
Щоб допоміжні технології, такі як програми зчитування з екрана, передавали групу кнопок, потрібно надати відповідний roleатрибут. Для груп кнопок це буде role="group", тоді як панелі інструментів повинні мати role="toolbar".
Виняток становлять групи, які містять лише один елемент керування (наприклад, вирівняні групи кнопок з <button>елементами) або спадне меню.
Крім того, групам і панелям інструментів слід надати чітку мітку, оскільки в іншому випадку більшість допоміжних технологій не повідомлять про них, незважаючи на наявність правильного roleатрибута. У наведених тут прикладах ми використовуємо , але також можна використовувати aria-labelтакі альтернативи, як .aria-labelledby
Замість того, щоб застосовувати класи розміру кнопки до кожної кнопки в групі, просто додайте .btn-group-*до кожної .btn-group, у тому числі під час вкладення кількох груп.
Гніздування
Розмістіть одне .btn-groupв іншому .btn-group, якщо ви бажаєте, щоб спадні меню були змішані з серією кнопок.
Зробіть так, щоб група ґудзиків розтягувалася на однакові розміри, щоб охопити всю ширину свого батька. Також працює зі спадними меню кнопок у групі кнопок.
Обробка кордонів
Через особливості HTML і CSS, які використовуються для вирівнювання кнопок (а саме display: table-cell), межі між ними подвоюються. У звичайних групах кнопок margin-left: -1pxвикористовується для складання рамок замість їх видалення. Однак marginне працює з display: table-cell. У результаті, залежно від ваших налаштувань Bootstrap, ви можете видалити або змінити колір рамок.
IE8 і межі
Internet Explorer 8 не відображає межі кнопок у вирівняній групі кнопок, незалежно від того, увімкнено <a>чи <button>елементи. Щоб уникнути цього, загорніть кожну кнопку в іншу .btn-group.
Дивіться #12476 для отримання додаткової інформації.
З <a>елементами
Просто оберніть ряд .btns у .btn-group.btn-group-justified.
Якщо <a>елементи використовуються як кнопки – для запуску функціональних можливостей на сторінці, а не для переходу до іншого документа чи розділу на поточній сторінці – їм також слід надати відповідний role="button".
З <button>елементами
Щоб використовувати вирівняні групи кнопок з <button>елементами, ви повинні обернути кожну кнопку в групу кнопок . Більшість браузерів неправильно застосовують наш CSS для обґрунтування <button>елементів, але оскільки ми підтримуємо розкривні списки кнопок, ми можемо це обійти.
Випадаючі кнопки
Використовуйте будь-яку кнопку, щоб викликати спадне меню, розташувавши його в межах .btn-groupі вказавши правильну розмітку меню.
Залежність плагіна
Випадаючі списки кнопок вимагають, щоб у вашій версії Bootstrap був включений плагін спадного меню .
Випадаючі меню з однією кнопкою
Перетворіть кнопку на розкривний перемикач із деякими базовими змінами розмітки.
Розширте елементи керування форми, додавши текст або кнопки до, після або з обох боків будь-якого текстового <input>. Використовуйте .input-groupз .input-group-addonабо .input-group-btn, щоб додавати елементи до одного .form-control.
<input>Лише текстові
Уникайте використання <select>елементів тут, оскільки вони не можуть бути повністю стилізовані в браузерах WebKit.
Уникайте використання <textarea>тут елементів, оскільки їхній rowsатрибут у деяких випадках не поважатиметься.
Підказки та спливаючі вікна в групах введення вимагають спеціального налаштування
Під час використання спливаючих підказок або спливаючих елементів для елементів у межах .input-group, вам доведеться вказати опцію, container: 'body'щоб уникнути небажаних побічних ефектів (таких як елемент стає ширшим і/або втрачає свої заокруглені кути під час спрацьовування підказки чи спливного вікна).
Не змішувати з іншими компонентами
Не змішуйте групи форм або класи стовпців сітки безпосередньо з групами введення. Натомість вкладіть групу введення всередину групи форми або пов’язаного з сіткою елемента.
Завжди додавайте мітки
Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих груп вводу переконайтеся, що будь-яка додаткова мітка або функція передається до допоміжних технологій.
Точна техніка, яка буде використана (видимі <label>елементи, <label>елементи, приховані за допомогою .sr-onlyкласу, або використання атрибутів aria-label, aria-labelledby, aria-describedby, titleабо placeholder) і яку додаткову інформацію потрібно буде передати, залежатимуть від точного типу віджета інтерфейсу, який ви реалізуєте. Приклади в цьому розділі надають кілька пропонованих підходів до конкретних випадків.
Базовий приклад
Розмістіть по одному додатку або кнопці з обох боків від входу. Ви також можете розмістити по обидві сторони входу.
Ми не підтримуємо кілька доповнень ( .input-group-addonабо .input-group-btn) на одній стороні.
Ми не підтримуємо кілька елементів керування формою в одній групі введення.
Розміри
Додайте до себе відносні класи розміру форми .input-group, і вміст усередині автоматично змінить розмір — не потрібно повторювати класи розміру керування формою для кожного елемента.
Прапорці та радіододатки
Розмістіть будь-який прапорець або перемикач у аддоні групи введення замість тексту.
Кнопкові аддони
Кнопки в групах введення дещо відрізняються і потребують додаткового рівня вкладеності. Замість .input-group-addon, вам потрібно буде використовувати .input-group-btnдля обертання кнопок. Це потрібно через стандартні стилі веб-переглядача, які не можна змінити.
Кнопки з розкривними меню
Сегментовані кнопки
Кілька кнопок
Хоча ви можете мати лише одне доповнення на кожній стороні, ви можете мати кілька кнопок всередині одного .input-group-btn.
Navs
Nav, доступні в Bootstrap, мають спільну розмітку, починаючи з базового .navкласу, а також спільні стани. Поміняйте місцями класи модифікаторів для перемикання між кожним стилем.
Щоб використовувати навігацію для панелей вкладок, потрібен плагін вкладок JavaScript
Для вкладок із областями табуляції необхідно використовувати плагін JavaScript для вкладок . Для розмітки також знадобляться додаткові атрибути та атрибути ARIA – подробиці див. у прикладі розміткиrole плагіна .
Зробити навігацію доступною для навігації
Якщо ви використовуєте nav для надання навігаційної панелі, обов’язково додайте role="navigation"до найбільш логічного батьківського контейнера <ul>, або оберніть <nav>елемент навколо всієї навігації. Не додавайте роль до <ul>себе, оскільки це запобіжить оголошенню її як справжнього списку допоміжними технологіями.
Вкладки
Зверніть увагу, що для .nav-tabsкласу потрібен .navбазовий клас.
Легко створюйте вкладки або таблетки такої ж ширини, як і їхні батьківські елементи, на екранах із шириною понад 768 пікселів за допомогою .nav-justified. На менших екранах навігаційні посилання згруповані.
Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.
Safari та адаптивна вирівняна навігація
Починаючи з версії 9.1.2, Safari демонструє помилку, через яку зміна розміру веб-переглядача по горизонталі спричиняє помилки візуалізації у вирівняній навігації, які очищаються після оновлення. Ця помилка також показана у прикладі вирівняної навігації .
Панелі навігації — це адаптивні метакомпоненти, які служать навігаційними заголовками для вашої програми або сайту. Вони починають згортатися (і їх можна перемикати) у мобільних переглядах і стають горизонтальними зі збільшенням доступної ширини вікна перегляду.
Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.
Переповнений вміст
Оскільки Bootstrap не знає, скільки місця потрібно вмісту на панелі навігації, у вас можуть виникнути проблеми з перенесенням вмісту у другий рядок. Щоб вирішити цю проблему, ви можете:
Зменшіть кількість або ширину елементів панелі навігації.
Приховати певні елементи панелі навігації на певних розмірах екрану за допомогою адаптивних класів утиліт .
Змініть точку, коли навігаційна панель перемикається між згорнутим і горизонтальним режимами. Налаштуйте @grid-float-breakpointзмінну або додайте власний медіа-запит.
Потрібен плагін JavaScript
Якщо JavaScript вимкнено, а вікно перегляду достатньо вузьке, що навігаційна панель згортається, буде неможливо розгорнути навігаційну панель і переглянути вміст у .navbar-collapse.
Адаптивна навігаційна панель вимагає, щоб плагін згортання був включений у вашу версію Bootstrap.
Зміна точки зупинки згорнутої мобільної панелі навігації
Панель навігації згортається до свого вертикального мобільного перегляду, коли вікно перегляду вужче, ніж @grid-float-breakpoint, і розгортається до свого горизонтального немобільного перегляду, коли вікно перегляду має принаймні @grid-float-breakpointширину. Налаштуйте цю змінну в джерелі Less, щоб контролювати, коли навігаційна панель згортається/розгортається. Значення за замовчуванням 768px(найменший «маленький» або «планшетний» екран).
Зробіть навігаційні панелі доступними
Обов’язково використовуйте <nav>елемент або, якщо використовуєте більш загальний елемент, наприклад <div>, додайте role="navigation"до кожної навігаційної панелі, щоб чітко визначити її як орієнтир для користувачів допоміжних технологій.
Імідж бренду
Замініть бренд навігаційної панелі на власне зображення, замінивши текст на <img>. Оскільки у .navbar-brandнього є власні відступи та висота, вам може знадобитися змінити деякі CSS залежно від вашого зображення.
Форми
Розмістіть вміст форми .navbar-formдля належного вертикального вирівнювання та згорнутої поведінки у вузьких вікнах перегляду. Використовуйте параметри вирівнювання, щоб визначити, де він знаходиться в межах вмісту панелі навігації.
Як хедз-ап, .navbar-formділиться більшою частиною свого коду з .form-inlineчерез mixin. Деякі елементи керування форми, як-от групи введення, можуть вимагати фіксованої ширини, щоб належним чином відображатися на панелі навігації.
Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих вбудованих форм ви можете приховати мітки за допомогою .sr-onlyкласу. Існують інші альтернативні методи надання мітки для допоміжних технологій, наприклад атрибут aria-label, aria-labelledbyабо . titleЯкщо жоден із них відсутній, програми зчитування з екрана можуть вдатися до використання placeholderатрибута, якщо він присутній, але зауважте, що використовувати placeholderяк заміну для інших методів позначення не рекомендується.
кнопки
Додайте .navbar-btnклас до <button>елементів, які не знаходяться в a <form>, щоб вертикально відцентрувати їх на навігаційній панелі.
Контекстне використання
Як і стандартні класи кнопок , .navbar-btnможна використовувати для елементів <a>і . <input>Однак .navbar-btnані стандартні класи кнопок не слід використовувати для <a>елементів у межах .navbar-nav.
текст
Обгортання рядків тексту в елементі з .navbar-text, як правило, на <p>тегу для правильного інтервенію та кольору.
Ненавігаційні посилання
Для людей, які використовують стандартні посилання, які не входять до звичайного навігаційного компонента навігаційної панелі, скористайтеся .navbar-linkкласом, щоб додати відповідні кольори для стандартних і інверсних параметрів навігаційної панелі.
Вирівнювання компонентів
Вирівняйте навігаційні посилання, форми, кнопки або текст за допомогою службових класів .navbar-leftабо . .navbar-rightОбидва класи додадуть CSS float у вказаному напрямку. Наприклад, щоб вирівняти навігаційні посилання, розмістіть їх окремо <ul>із застосуванням відповідного класу корисності.
Ці класи є змішаними версіями .pull-leftі .pull-right, але вони призначені для медіа-запитів для легшої обробки компонентів навігаційної панелі на різних розмірах пристроїв.
Вирівнювання кількох компонентів праворуч
Панелі навігації наразі мають обмеження кількома .navbar-rightкласами. Щоб правильно розподілити вміст, ми використовуємо негативне поле на останньому .navbar-rightелементі. Коли є кілька елементів, які використовують цей клас, ці поля не працюють належним чином.
Ми повернемося до цього, коли зможемо переписати цей компонент у v4.
Фіксується до верху
Додайте .navbar-fixed-topта включите .containerабо .container-fluidдо центру та додавання вмісту панелі навігації.
Необхідна підкладка тіла
Фіксована навігаційна панель перекриватиме ваш інший вміст, якщо ви не додасте paddingїї вгору <body>. Спробуйте власні значення або скористайтеся нашим фрагментом нижче. Порада. За замовчуванням навігаційна панель має висоту 50 пікселів.
Обов’язково включите це після основного CSS Bootstrap.
Фіксується до дна
Додайте .navbar-fixed-bottomта включите .containerабо .container-fluidдо центру та додавання вмісту панелі навігації.
Необхідна підкладка тіла
Фіксована навігаційна панель перекриватиме інший вміст, якщо ви не додасте paddingвнизу <body>. Спробуйте власні значення або скористайтеся нашим фрагментом нижче. Порада. За замовчуванням навігаційна панель має висоту 50 пікселів.
Обов’язково включите це після основного CSS Bootstrap.
Статичний верх
Створіть навігаційну панель на всю ширину, яка прокручується разом із сторінкою, додавши .navbar-static-topта включивши .containerабо .container-fluid, щоб відцентрувати та розмістити вміст навігаційної панелі.
На відміну від .navbar-fixed-*класів, вам не потрібно змінювати відступи на body.
Перевернута панель навігації
Змініть вигляд навігаційної панелі, додавши .navbar-inverse.
Панірувальні сухарі
Укажіть розташування поточної сторінки в навігаційній ієрархії.
Роздільники автоматично додаються в CSS через :beforeі content.
Надайте посилання на розбивку сторінок для свого сайту чи програми за допомогою компонента розбиття на багато сторінок або простішої альтернативи пейджера .
Пагінація за замовчуванням
Просте розбиття сторінок на основі Rdio, чудове для додатків і результатів пошуку. Великий блок важко помітити, він легко масштабується та забезпечує великі області натискання.
Позначення компонента сторінки
Компонент розбиття на сторінки має бути загорнутий в <nav>елемент, щоб ідентифікувати його як розділ навігації для програм зчитування з екрана та інших допоміжних технологій. Крім того, оскільки сторінка, імовірно, уже має більше одного такого розділу навігації (наприклад, основна навігація в заголовку або навігація на бічній панелі), доцільно надати опис aria-label, <nav>який відображає її призначення. Наприклад, якщо компонент розбиття на сторінки використовується для навігації між набором результатів пошуку, відповідною міткою може бути aria-label="Search results pages".
Відключений і активний стани
Посилання можна налаштувати для різних обставин. Використовуйте .disabledдля неактивних посилань і .activeдля позначення поточної сторінки.
Ми рекомендуємо замінити активні чи вимкнені прив’язки на <span>, або опустити прив’язку у випадку попередніх/наступних стрілок, щоб видалити функцію клацання, зберігаючи заплановані стилі.
Розміри
Бажаєте збільшити чи зменшити сторінки? Додати .pagination-lgабо .pagination-smдля додаткових розмірів.
Пейджер
Швидкі попередні та наступні посилання для простого розбиття на сторінки з легкою розміткою та стилями. Це чудово підходить для простих сайтів, таких як блоги чи журнали.
Приклад за замовчуванням
За замовчуванням пейджер центрує посилання.
Вирівняні посилання
Крім того, ви можете вирівняти кожне посилання по сторонах:
Додатковий вимкнений стан
Посилання на пейджер також використовують загальний .disabledкорисний клас із пагінації.
етикетки
приклад
Приклад заголовка Новий
Приклад заголовка Новий
Приклад заголовка Новий
Приклад заголовка Новий
Приклад заголовка Новий
Приклад заголовка Новий
Доступні варіації
Додайте будь-який із наведених нижче класів модифікаторів, щоб змінити зовнішній вигляд мітки.
Основна інформація про успіх за замовчуванням Попередження Небезпека
У вас безліч етикеток?
Проблеми з візуалізацією можуть виникнути, якщо у вас є десятки вбудованих міток у вузькому контейнері, кожна з яких містить свій власний inline-blockелемент (наприклад, значок). Спосіб обійти це налаштування display: inline-block;. Для контексту та прикладу див. #13219 .
Значки
Легко виділяйте нові або непрочитані елементи, додаючи <span class="badge">до посилань, навігацій Bootstrap тощо.
Щоб зробити jumbotron повної ширини та без заокруглених кутів, розмістіть його за межами всіх .containers і натомість додайте .containerвсередині.
Верхній колонтитул сторінки
Проста оболонка для h1відповідного розподілу та сегментації розділів вмісту на сторінці. Він може використовувати елемент h1за замовчуванням small, а також більшість інших компонентів (з додатковими стилями).
Приклад заголовка сторінки Підтекст для заголовка
Мініатюри
Розширте систему сіток Bootstrap за допомогою компонента мініатюр, щоб легко відображати сітки зображень, відео, тексту тощо.
Якщо ви шукаєте презентацію мініатюр різної висоти та/або ширини, подібну до Pinterest, вам знадобиться використовувати сторонній плагін, наприклад Masonry , Isotope або Salvattore .
Приклад за замовчуванням
За замовчуванням мініатюри 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.
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.
Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.
Приклади
Перенести будь-який текст і необов’язкову кнопку відхилення в .alertодин із чотирьох контекстних класів (наприклад, .alert-success) для базових повідомлень попередження.
Немає класу за замовчуванням
Сповіщення не мають класів за замовчуванням, лише базові класи та класи-модифікатори. Стандартне сіре сповіщення не має особливого сенсу, тому вам потрібно вказати тип через контекстний клас. Виберіть успіх, інформацію, попередження або небезпеку.
молодець! Ви успішно прочитали це важливе сповіщення.
Голови вгору! Це сповіщення потребує вашої уваги, але воно не надважливе.
УВАГА! Краще перевірте себе, ви виглядаєте не дуже добре.
Ох, чорт! Змініть дещо та спробуйте надіслати ще раз.
Ох, чорт! Змініть дещо та спробуйте надіслати ще раз.
Індикатори прогресу
Надайте актуальний відгук про перебіг робочого процесу або дії за допомогою простих, але гнучких індикаторів виконання.
Кросбраузерність
Індикатори прогресу використовують переходи та анімацію CSS3 для досягнення певних ефектів. Ці функції не підтримуються в Internet Explorer 9 і нижче або старіших версіях Firefox. Opera 12 не підтримує анімацію.
Сумісність із політикою безпеки вмісту (CSP).
Якщо на вашому веб-сайті є політика безпеки вмісту (CSP) , яка не дозволяє style-src 'unsafe-inline', ви не зможете використовувати вбудовані styleатрибути для встановлення ширини панелі виконання, як показано в наших прикладах нижче. Альтернативні методи встановлення ширини, які сумісні зі строгими CSP, включають використання невеликого спеціального JavaScript (який встановлює element.style.width) або використання спеціальних класів CSS.
Базовий приклад
Індикатор прогресу за умовчанням.
Виконано на 60%.
З етикеткою
Щоб відобразити видимий відсоток , видаліть клас <span>із .sr-onlyпанелі прогресу.
60%
Щоб переконатися, що текст мітки залишається розбірливим навіть при низьких відсотках, подумайте про додавання min-widthдо панелі виконання.
0%
2%
Контекстні альтернативи
Індикатори виконання використовують деякі з однакових класів кнопок і сповіщень для узгоджених стилів.
Виконано на 40% (успіх)
Виконано на 20%.
Виконано на 60% (попередження)
Виконано на 80% (небезпека)
Смугастий
Використовує градієнт для створення смугастого ефекту. Недоступно в IE9 і нижче.
Виконано на 40% (успіх)
Виконано на 20%.
Виконано на 60% (попередження)
Виконано на 80% (небезпека)
Анімований
Додайте .activeдля .progress-bar-stripedанімації смуг справа наліво. Недоступно в IE9 і нижче.
Виконано на 45%.
Складені
Помістіть кілька брусків в одне .progressціле, щоб скласти їх.
Виконано на 35% (успіх)
Виконано на 20% (попередження)
Виконано 10% (небезпека)
Медіа об'єкт
Стилі абстрактних об’єктів для створення різних типів компонентів (наприклад, коментарів до блогу, твітів тощо), які містять зображення, вирівняне за лівим або правим краєм, поряд з текстовим вмістом.
Носії за замовчуванням
За замовчуванням медіа-об’єкт (зображення, відео, аудіо) відображається ліворуч або праворуч від блоку вмісту.
Заголовок ЗМІ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Заголовок ЗМІ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Заголовок ЗМІ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Заголовок ЗМІ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Класи .pull-leftі .pull-rightтакож існують і раніше використовувалися як частина медіа-компонента, але вони застаріли для такого використання, починаючи з версії 3.3.0. Вони приблизно еквівалентні .media-leftта .media-right, за винятком того, що .media-rightслід розміщувати після .media-bodyв html.
Вирівнювання медіа
Зображення або інші носії можна вирівняти зверху, посередині або знизу. За умовчанням вирівняно по верхньому краю.
Медіафайли, вирівняні по верхньому краю
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Медіа, вирівняні посередині
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Медіафайли, вирівняні по нижньому краю
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Список медіа
Додавши трохи додаткової розмітки, ви можете використовувати медіа-внутрішній список (корисно для потоків коментарів або списків статей).
Заголовок ЗМІ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Список групи
Групи списків — це гнучкий і потужний компонент для відображення не лише простих списків елементів, а й складних із настроюваним вмістом.
Базовий приклад
Найпростіша група списків — це просто невпорядкований список із елементами списку та відповідними класами. Розвивайте його за допомогою наведених нижче параметрів або власного CSS за потреби.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Значки
Додайте компонент значків до будь-якого елемента групи списку, і він автоматично розміститься праворуч.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Пов’язані елементи
Пов’яжіть елементи групи списку за допомогою тегів прив’язки замість елементів списку (це також означає батьківський <div>елемент замість <ul>). Немає необхідності в окремих батьках навколо кожного елемента.
Елементи групи списку можуть бути кнопками замість елементів списку (це також означає батьківський <div>елемент замість <ul>). Немає необхідності в окремих батьках навколо кожного елемента. Не використовуйте тут стандартні .btnкласи.
Вимкнені предмети
Додайте .disabledдо a .list-group-item, щоб зробити його сірим і відображатися вимкненим.
Хоча це не завжди необхідно, іноді вам потрібно помістити свій DOM у коробку. Для таких ситуацій спробуйте компонент панелі.
Базовий приклад
За замовчуванням все, що потрібно зробити .panel, це застосувати деякі базові рамки та відступи, щоб вміст певного вмісту.
Приклад базової панелі
Панель із заголовком
Легко додайте контейнер заголовків на свою панель за допомогою .panel-heading. Ви також можете включити будь -який <h1>- <h6>із .panel-titleкласом, щоб додати попередньо стилізований заголовок. Однак розмір шрифту <h1>- <h6>замінюється на .panel-heading.
Для правильного фарбування посилань обов’язково розміщуйте посилання в заголовках у межах .panel-title.
Заголовок панелі без заголовка
Вміст панелі
Назва панелі
Вміст панелі
Панель з колонтитулом
Перенесення кнопок або другорядного тексту в .panel-footer. Зауважте, що нижні колонтитули панелей не успадковують кольори та межі під час використання контекстних варіантів, оскільки вони не призначені для розміщення на передньому плані.
Вміст панелі
Контекстні альтернативи
Як і інші компоненти, можна легко зробити панель більш значущою для певного контексту, додавши будь-який із класів контекстного стану.
Назва панелі
Вміст панелі
Назва панелі
Вміст панелі
Назва панелі
Вміст панелі
Назва панелі
Вміст панелі
Назва панелі
Вміст панелі
Зі столами
Додайте будь-які рамки .tableвсередині панелі для бездоганного дизайну. Якщо є .panel-body, ми додаємо додаткову рамку у верхній частині таблиці для розділення.
Заголовок панелі
Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Ім'я
Прізвище
Ім'я користувача
1
Марк
Отто
@mdo
2
Яків
Торнтон
@жирний
3
Ларрі
птах
@twitter
Якщо немає тіла панелі, компонент переміщується з заголовка панелі в таблицю без перерви.
Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Адаптивне вбудовування
Дозвольте браузерам визначати розміри відео чи слайд-шоу на основі ширини блоку, що містить їх, створивши власне співвідношення, яке правильно масштабуватиметься на будь-якому пристрої.
Правила застосовуються безпосередньо до елементів <iframe>, <embed>, <video>і ; <object>необов’язково використовуйте явний клас-нащадок, .embed-responsive-itemякщо ви хочете відповідати стилю для інших атрибутів.
Професійна порада! Вам не потрібно включати frameborder="0"в <iframe>s, оскільки ми замінюємо це для вас.
Велс
За замовчуванням добре
Використовуйте свердловину як простий ефект на елементі, щоб надати йому ефекту вставки.
Дивіться, я в колодязі!
Факультативні заняття
Керуйте відступами та закругленими кутами за допомогою двох додаткових класів модифікаторів.