Составные части
Более дюжины повторно используемых компонентов, созданных для обеспечения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Глификоны
Доступные глифы
Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Glyphicons Halflings обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности мы просим вас по возможности включать обратную ссылку на Glyphicons .
- глификон глификон-звездочка
- глификон глификон-плюс
- глификон глификон-евро
- глификон глификон-евро
- глификон глификон-минус
- глификон глификон-облако
- глификон глификон-конверт
- глификон глификон-карандаш
- глификон глификон-стекло
- глификон глификон-музыка
- глификон глификон-поиск
- глификон глификон-сердце
- глификон глификон-звезда
- глификон глификон-звезда-пустой
- глификон глификон-пользователь
- глификон глификон-фильм
- глификон глификон-й-большой
- глификон глификон-й
- глификон глификон-й-список
- глификон глификон-ок
- глификон глификон-удалить
- глификон глификон-увеличение
- глификон глификон-уменьшить
- глификон глификон выключен
- глификон глификон-сигнал
- глификон глификон-зубчик
- глификон глификон-мусор
- глификон глификон-дом
- глификон глификон-файл
- глификон глификон-время
- глификон глификон-дорога
- глификон глификон-скачать-alt
- глификон глификон-скачать
- глификон глификон-загрузить
- глификон глификон-входящие
- глификон глификон-плей-круг
- глификон глификон-повторить
- глификон глификон-обновить
- глификон глификон-список-альт
- глификон глификон-замок
- глификон глификон-флаг
- глификон глификон-наушники
- глификон глификон-громкость-выкл.
- глификон глификон-уменьшение громкости
- глификон глификон-увеличение громкости
- глификон глификон-qrcode
- глификон глификон-штрих-код
- глификон глификон-тег
- глификон глификон-теги
- глификон глификон-книга
- глификон глификон-закладка
- глификон глификон-принт
- глификон глификон-камера
- глификон глификон-шрифт
- глификон глификон-полужирный
- глификон глификон-курсив
- глификон глификон-высота текста
- глификон глификон-текст-ширина
- глификон глификон-выравнивание-влево
- глификон глификон-выравнивание-центр
- глификон глификон-выравнивание-вправо
- глификон глификон-выравнивание-выравнивание
- глификон глификон-список
- глификон глификон-отступ-влево
- глификон глификон-отступ-вправо
- глификон глификон-facetime-видео
- глификон глификон-картинка
- глификон глификон-карта-маркер
- глификон глификон-настроить
- глификон глификон-оттенок
- глификон глификон-редактировать
- глификон глификон-доля
- глификон глификон-проверить
- глификон глификон-движение
- глификон глификон-шаг назад
- глификон глификон-быстро-назад
- глификон глификон-назад
- глификон глификон-играть
- глификон глификон-пауза
- глификон глификон-стоп
- глификон глификон-вперед
- глификон глификон-быстрая перемотка вперед
- глификон глификон-шаг вперед
- глификон глификон-извлечь
- глификон глификон-шеврон-левый
- глификон глификон-шеврон-право
- глификон глификон-плюс-знак
- глификон глификон-минус-знак
- глификон глификон-удалить-знак
- глификон глификон-ок-знак
- глификон глификон-вопросительный знак
- глификон глификон-информация-знак
- глификон глификон-скриншот
- глификон глификон-удалить-круг
- глификон глификон-ок-круг
- глификон глификон-бан-круг
- глификон глификон-стрелка-влево
- глификон глификон-стрелка-вправо
- глификон глификон-стрелка вверх
- глификон глификон-стрелка вниз
- глификон глификон-доля-альт
- глификон глификон-изменить размер-полный
- глификон глификон-изменить размер-маленький
- глификон глификон восклицательный знак
- глификон глификон-подарок
- глификон глификон-лист
- глификон глификон-огонь
- глификон глификон-открытые глаза
- глификон глификон-закрыть глаза
- глификон глификон-предупреждающий знак
- глификон глификон-плоскость
- глификон глификон-календарь
- глификон глификон-случайный
- глификон глификон-комментарий
- глификон глификон-магнит
- глификон глификон-шеврон вверх
- глификон глификон-шеврон-вниз
- глификон глификон-ретвит
- глификон глификон-корзина
- глификон глификон-папка-закрыть
- глификон глификон-папка-открыть
- глификон глификон-изменить размер-вертикальный
- глификон глификон-изменить размер-горизонтальный
- глификон глификон-HDD
- глификон глификон-рупор
- глификон глификон-колокол
- глификон глификон-сертификат
- глификон глификон-палец вверх
- глификон глификон-палец вниз
- глификон глификон-правая рука
- глификон глификон-левая рука
- глификон глификон рука вверх
- глификон глификон-вниз
- глификон глификон-круг-стрелка-вправо
- глификон глификон-круг-стрелка-влево
- глификон глификон-круг-стрелка вверх
- глификон глификон-круг-стрелка вниз
- глификон глификон-глобус
- глификон глификон-гаечный ключ
- глификон глификон-задачи
- глификон глификон-фильтр
- глификон глификон-портфель
- глификон глификон-полноэкранный
- глификон глификон-приборная панель
- глификон глификон-скрепка
- глификон глификон-сердце-пусто
- глификон глификон-ссылка
- глификон глификон-телефон
- глификон глификон-канцелярская кнопка
- глификон глификон-usd
- глификон глификон-фунт стерлингов
- глификон глификон-сортировка
- глификон глификон-сортировка-по-алфавиту
- глификон глификон-сортировка-по-алфавиту-альт
- глификон глификон-сортировка-по-порядку
- глификон глификон-сортировка-по-порядку-альт
- глификон глификон-сортировка-по-атрибутам
- глификон глификон-сортировка-по-атрибутам-alt
- глификон глификон-неотмеченный
- глификон глификон-развернуть
- глификон глификон-свернуть-вниз
- глификон глификон-коллапс-вверх
- глификон глификон-логин
- глификон глификон-вспышка
- глификон глификон-выход из системы
- глификон глификон-новое окно
- глификон глификон-запись
- глификон глификон-сохранить
- глификон глификон-открытый
- глификон глификон-сохраненный
- глификон глификон-импорт
- глификон глификон-экспорт
- глификон глификон-отправить
- глификон глификон-дискета
- глификон глификон-дискета-сохраненный
- глификон глификон-дискета-удалить
- глификон глификон-дискета-сохранить
- глификон глификон-дискета-открыть
- глификон глификон-кредитная карта
- глификон глификон-передача
- глификон глификон-столовые приборы
- глификон глификон-заголовок
- глификон глификон-сжатый
- глификон глификон-наушники
- глификон глификон-телефон-альт
- глификон глификон-башня
- глификон глификон-статистика
- глификон глификон-SD-видео
- глификон глификон-HD-видео
- глификон глификон-субтитры
- глификон глификон-звук-стерео
- глификон глификон-звук-долби
- глификон глификон-звук-5-1
- глификон глификон-звук-6-1
- глификон глификон-звук-7-1
- глификон глификон-знак авторского права
- глификон глификон-регистрационный знак
- глификон глификон-облако-скачать
- глификон глификон-облако-загрузить
- глификон глификон-дерево-хвойное дерево
- глификон глификон-дерево-лиственное
- глификон глификон-cd
- глификон глификон-сохранить-файл
- глификон глификон-открытый-файл
- глификон глификон повышения уровня
- глификон глификон-копия
- глификон глификон-паста
- глификон глификон-предупреждение
- глификон глификон-эквалайзер
- глификон глификон-король
- глификон глификон-королева
- глификон глификон-пешка
- глификон глификон-епископ
- глификон глификон-рыцарь
- глификон глификон-ребенок-формула
- глификон глификон-палатка
- глификон глификон-доска
- глификон глификон-кровать
- глификон глификон-яблоко
- глификон глификон-стирать
- глификон глификон-песочные часы
- глификон глификон-лампа
- глификон глификон-дубликат
- глификон глификон-копилка
- глификон глификон-ножницы
- глификон глификон-биткойн
- глификон глификон-btc
- глификон глификон-xbt
- глификон глификон-иена
- глификон глификон-иена
- глификон глификон-рубль
- глификон глификон-руб
- глификон глификон-шкала
- глификон глификон-мороженое на палочке
- глификон глификон-мороженое на палочке со вкусом
- глификон глификон-образование
- глификон глификон-вариант-горизонтальный
- глификон глификон-вариант-вертикальный
- глификон глификон-меню-гамбургер
- глификон глификон-модальное окно
- глификон глификон-масло
- глификон глификон-зерно
- глификон глификон-солнцезащитные очки
- глификон глификон-размер текста
- глификон глификон-цвет текста
- глификон глификон-текст-фон
- глификон глификон-объект-выравнивание-верх
- глификон глификон-объект-выравнивание-снизу
- глификон глификон-объект-выравнивание-горизонтальный
- глификон глификон-объект-выравнивание-влево
- глификон глификон-объект-выравнивание-вертикаль
- глификон глификон-объект-выравнивание-вправо
- глификон глификон-треугольник-справа
- глификон глификон-треугольник-левый
- глификон глификон-треугольник-дно
- глификон глификон-треугольник-верхушка
- глификон глификон-консоль
- глификон глификон-верхний индекс
- глификон глификон-индекс
- глификон глификон-меню-слева
- глификон глификон-меню-право
- глификон глификон-меню-вниз
- глификон глификон-меню-вверх
Как использовать
Из соображений производительности для всех значков требуется базовый класс и отдельный класс значков. Чтобы использовать, разместите следующий код где угодно. Не забудьте оставить пробел между значком и текстом для правильного заполнения.
Не смешивать с другими компонентами
Классы значков нельзя напрямую комбинировать с другими компонентами. Их не следует использовать вместе с другими классами для одного и того же элемента. Вместо этого добавьте вложенный <span>и примените классы значков к файлу <span>.
Только для использования на пустых элементах
Классы значков следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
Изменение расположения шрифта значка
Bootstrap предполагает, что файлы шрифтов значков будут расположены в ../fonts/каталоге относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:
- Измените
@icon-font-pathи/или@icon-font-nameпеременные в исходных файлах Less. - Используйте параметр относительных URL -адресов, предоставляемый компилятором Less.
- Измените
url()пути в скомпилированном CSS.
Используйте любой вариант, который лучше всего подходит для вашей конкретной настройки разработки.
Доступные значки
Современные версии вспомогательных технологий будут анонсировать содержимое, созданное с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и запутанного вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью aria-hidden="true"атрибута.
Если вы используете значок для передачи значения (а не только в качестве декоративного элемента), убедитесь, что это значение также передается вспомогательным технологиям — например, включите дополнительное содержимое, визуально скрытое вместе с .sr-onlyклассом.
Если вы создаете элементы управления без другого текста (например <button>, содержащие только значок), вы всегда должны предоставлять альтернативное содержимое для определения назначения элемента управления, чтобы оно было понятно пользователям вспомогательных технологий. В этом случае вы можете добавить aria-labelатрибут к самому элементу управления.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Примеры
Используйте их в кнопках, группах кнопок для панели инструментов, навигации или предваряющих входных данных формы.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>Значок, используемый в предупреждении , чтобы сообщить, что это сообщение об ошибке, с дополнительным .sr-onlyтекстом, чтобы передать эту подсказку пользователям вспомогательных технологий.
Ошибка:Введите действительный адрес электронной почты
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>Выпадающие списки
Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript .
Пример
Оберните триггер раскрывающегося списка и раскрывающееся меню внутри .dropdownили в другой элемент, который объявляет position: relative;. Затем добавьте HTML-код меню.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Выпадающие меню можно изменить, чтобы они расширялись вверх (а не вниз), добавляя .dropupк родителю.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Выравнивание
По умолчанию выпадающее меню автоматически позиционируется на 100 % сверху и слева от родительского элемента. Добавить .dropdown-menu-rightв .dropdown-menuвыпадающее меню по правому краю.
Может потребоваться дополнительное позиционирование
Выпадающие списки автоматически размещаются с помощью CSS в обычном потоке документа. Это означает, что выпадающие списки могут быть обрезаны родителями с определенными overflowсвойствами или отображаться за пределами окна просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.
Устаревшее .pull-rightвыравнивание
Начиная с версии 3.1.0 мы отказались .pull-rightот раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right. Выровненные по правому краю компоненты навигации на панели навигации используют смешанную версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Заголовки
Добавьте заголовок, чтобы пометить разделы действий в любом раскрывающемся меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Делитель
Добавьте разделитель для разделения серий ссылок в раскрывающемся меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Отключенные пункты меню
Добавьте .disabledв <li>раскрывающийся список, чтобы отключить ссылку.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>Группы кнопок
Сгруппируйте ряд кнопок вместе в одной строке с помощью группы кнопок. Добавьте необязательный JavaScript-радио и поведение в стиле флажков с помощью нашего плагина кнопок .
Всплывающие подсказки и всплывающие окна в группах кнопок требуют специальной настройки
При использовании всплывающих подсказок или всплывающих окон для элементов внутри элемента .btn-groupвам необходимо указать параметр, container: 'body'чтобы избежать нежелательных побочных эффектов (таких как увеличение ширины элемента и/или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна).
Убедитесь в правильности roleи укажите метку
Чтобы вспомогательные технологии, такие как программы для чтения с экрана, сообщали, что ряд кнопок сгруппирован, необходимо предоставить соответствующий roleатрибут. Для групп кнопок это будет role="group", а для панелей инструментов — role="toolbar".
Единственным исключением являются группы, которые содержат только один элемент управления (например , группы кнопок с <button>элементами по ширине) или раскрывающийся список.
Кроме того, группам и панелям инструментов следует присваивать явные метки, так как в противном случае большинство вспомогательных технологий не объявляют их, несмотря на наличие правильного roleатрибута. В приведенных здесь примерах мы используем , но можно использовать и aria-labelтакие альтернативы, как .aria-labelledby
Базовый пример
Оберните ряд кнопок .btnв .btn-group.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>Панель инструментов кнопок
Объединяйте наборы в наборы <div class="btn-group">для <div class="btn-toolbar">получения более сложных компонентов.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>Размеры
Вместо того, чтобы применять классы размеров кнопок к каждой кнопке в группе, просто добавьте .btn-group-*их к каждому .btn-group, в том числе при вложении нескольких групп.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>Вложение
Поместите a .btn-groupвнутри другого .btn-group, если вы хотите, чтобы выпадающие меню смешивались с рядом кнопок.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Вертикальное изменение
Сделайте так, чтобы набор кнопок располагался вертикально, а не горизонтально. Выпадающие списки с разделенными кнопками здесь не поддерживаются.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Выровненные группы кнопок
Сделайте так, чтобы группа кнопок растянулась на равные размеры, чтобы охватить всю ширину своего родителя. Также работает с раскрывающимися списками кнопок в группе кнопок.
Обработка границ
Из-за специфического 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.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Ссылки, работающие как кнопки
Если <a>элементы используются в качестве кнопок — для запуска функций на странице, а не для перехода к другому документу или разделу на текущей странице — им также должен быть присвоен соответствующий role="button".
С <button>элементами
Чтобы использовать группы кнопок с <button>элементами по ширине, вы должны обернуть каждую кнопку в группу кнопок . Большинство браузеров неправильно применяют наш CSS для выравнивания <button>элементов, но поскольку мы поддерживаем раскрывающиеся списки кнопок, мы можем обойти это.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Выпадающие списки кнопок
Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в a .btn-groupи предоставив соответствующую разметку меню.
Зависимость от плагина
Выпадающие списки кнопок требуют, чтобы плагин раскрывающегося списка был включен в вашу версию Bootstrap.
Выпадающие списки с одной кнопкой
Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Раскрывающиеся списки кнопок разделения
Точно так же создайте раскрывающиеся списки с разделенными кнопками с теми же изменениями разметки, только с отдельной кнопкой.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Размеры
Выпадающие списки кнопок работают с кнопками всех размеров.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>Вариант дроп-апа
Запускайте выпадающие меню над элементами, добавляя .dropupих к родителю.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>Входные группы
Расширьте элементы управления формы, добавив текст или кнопки до, после или с обеих сторон любого текстового файла <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) на одной стороне.
Мы не поддерживаем несколько элементов управления формами в одной группе ввода.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>Размеры
Добавьте классы относительного размера формы к .input-groupсамому себе, и содержимое автоматически изменит размер — нет необходимости повторять классы размера элемента управления формой для каждого элемента.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>Флажки и радио-аддоны
Поместите любой флажок или переключатель в надстройку группы ввода вместо текста.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Аддоны кнопок
Кнопки в группах ввода немного отличаются и требуют еще одного уровня вложенности. Вместо .input-group-addon, вам нужно использовать .input-group-btnдля переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Кнопки с выпадающими списками
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->Сегментированные кнопки
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>Несколько кнопок
Хотя у вас может быть только одно дополнение на каждой стороне, вы можете иметь несколько кнопок внутри одного файла .input-group-btn.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>Навигация
Навигации, доступные в Bootstrap, имеют общую разметку, начиная с базового .navкласса, а также общие состояния. Поменяйте местами классы модификаторов, чтобы переключаться между каждым стилем.
Вкладки
Обратите внимание, что для .nav-tabsкласса требуется .navбазовый класс.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Таблетки
Возьмите тот же HTML, но .nav-pillsвместо этого используйте:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>Таблетки также можно штабелировать вертикально. Просто добавьте .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Обоснованный
С легкостью делайте вкладки или пилюли равной ширине своего родителя на экранах шире 768 пикселей с помощью .nav-justified. На небольших экранах навигационные ссылки расположены стопкой.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Отключенные ссылки
Для любого компонента навигации (вкладки или планшеты) добавьте серые ссылки и отсутствие эффектов.disabled наведения .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Использование раскрывающихся списков
Добавьте выпадающие меню с небольшим дополнительным HTML и подключаемым модулем JavaScript для раскрывающихся списков .
Вкладки с выпадающими списками
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Таблетки с выпадающими списками
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Навбар
Панель навигации по умолчанию
Панели навигации — это адаптивные метакомпоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Фирменное изображение
Замените бренд панели навигации своим изображением, заменив текст на файл <img>. Поскольку у .navbar-brandэлемента есть собственные отступы и высота, вам может потребоваться переопределить некоторые CSS в зависимости от вашего изображения.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Формы
Поместите содержимое формы внутри .navbar-formдля правильного вертикального выравнивания и свернутого поведения в узких окнах просмотра. Используйте параметры выравнивания, чтобы решить, где он находится в содержимом панели навигации.
На заметку, .navbar-formбольшая часть кода делится с .form-inlineпомощью миксина. Для некоторых элементов управления формы, таких как группы ввода, может потребоваться фиксированная ширина для правильного отображения на панели навигации.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Кнопки
Добавьте .navbar-btnкласс к <button>элементам, не находящимся в a <form>, чтобы центрировать их по вертикали на панели навигации.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Текст
Оборачивайте строки текста в элемент с .navbar-text, обычно в <p>тег, для правильного интерлиньяжа и цвета.
<p class="navbar-text">Signed in as Mark Otto</p>Ссылки без навигации
Для людей, использующих стандартные ссылки, которые не находятся в обычном компоненте навигации панели навигации, используйте .navbar-linkкласс, чтобы добавить правильные цвета для опций панели навигации по умолчанию и инверсии.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Выравнивание компонентов
Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов .navbar-leftили . .navbar-rightОба класса добавят CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их отдельно <ul>с применением соответствующего служебного класса.
Эти классы представляют собой смешанные версии .pull-leftи .pull-right, но они ограничены медиа-запросами для упрощения обработки компонентов панели навигации на устройствах разных размеров.
Исправлено вверху
Добавьте .navbar-fixed-topи включите .containerили .container-fluid, чтобы центрировать и дополнять содержимое панели навигации.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Фиксированный к низу
Добавьте .navbar-fixed-bottomи включите .containerили .container-fluid, чтобы центрировать и дополнять содержимое панели навигации.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Статический топ
Создайте полноразмерную панель навигации, которая прокручивается вместе со страницей, добавив .navbar-static-topи включив .containerили .container-fluidдля центрирования и заполнения содержимого панели навигации.
В отличие от .navbar-fixed-*классов, вам не нужно менять какие-либо отступы в файле body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Перевернутая панель навигации
Измените внешний вид панели навигации, добавив .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Панировочные сухари
Укажите местоположение текущей страницы в навигационной иерархии.
Разделители автоматически добавляются в CSS через :beforeи content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Пагинация
Предоставьте ссылки на страницы для своего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджера .
Пагинация по умолчанию
Простое разбиение на страницы, вдохновленное Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и обеспечивает большие области кликов.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Маркировка компонента пагинации
Компонент разбивки на страницы должен быть заключен в <nav>элемент, чтобы идентифицировать его как раздел навигации для программ чтения с экрана и других вспомогательных технологий. Кроме того, поскольку страница, скорее всего, уже имеет более одного такого раздела навигации (например, основная навигация в заголовке или навигация на боковой панели), рекомендуется предоставить описание aria-label, <nav>отражающее ее назначение. Например, если компонент разбивки на страницы используется для перехода между набором результатов поиска, соответствующей меткой может быть aria-label="Search results pages".
Отключенные и активные состояния
Ссылки настраиваются для разных обстоятельств. Используйте .disabledдля некликабельных ссылок и .activeдля указания текущей страницы.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>Мы рекомендуем вам поменять местами активные или отключенные привязки для <span>, или опустить привязку в случае стрелок «предыдущий/следующий», чтобы удалить функцию щелчка, сохранив при этом предполагаемые стили.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>Размеры
Хотите большую или меньшую нумерацию страниц? Добавьте .pagination-lgили .pagination-smдля дополнительных размеров.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>Пейджер
Быстрые предыдущие и следующие ссылки для простой реализации разбиения на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы.
Пример по умолчанию
По умолчанию пейджер центрирует ссылки.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Выровненные ссылки
Кроме того, вы можете выровнять каждую ссылку по сторонам:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Необязательное отключенное состояние
Ссылки на пейджеры также используют общий .disabledслужебный класс из нумерации страниц.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Этикетки
Пример
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
<h3>Example heading <span class="label label-default">New</span></h3>Доступные варианты
Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид метки.
Основная
информация об успехе по
умолчанию Предупреждение Опасность
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>Есть тонны этикеток?
Проблемы с рендерингом могут возникнуть, когда у вас есть десятки встроенных меток в узком контейнере, каждая из которых содержит свой собственный inline-blockэлемент (например, значок). Способ обойти это настройка display: inline-block;. Контекст и пример см. в #13219 .
Значки
Легко выделяйте новые или непрочитанные элементы, добавляя <span class="badge">к ссылкам, навигации Bootstrap и т. д.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Саморазрушающийся
Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью :emptyселектора CSS), если внутри нет содержимого.
Кроссбраузерная совместимость
Значки не будут самопроизвольно сворачиваться в Internet Explorer 8, так как в нем отсутствует поддержка :emptyселектора.
Адаптируется к активным состояниям навигации
Включены встроенные стили для размещения значков в активном состоянии в навигации по таблеткам.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Джамботрон
Легкий, гибкий компонент, который может дополнительно расширять всю область просмотра для демонстрации ключевого контента на вашем сайте.
Привет, мир!
Это простой модуль героя, простой компонент в стиле jumbotron для привлечения дополнительного внимания к рекомендуемому контенту или информации.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Чтобы сделать джамботрон полной ширины и без закругленных углов, поместите его за пределы всех .containers и вместо этого добавьте .containerвнутрь.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Заголовок страницы
Простая оболочка для h1надлежащего размещения и сегментации разделов контента на странице. Он может использовать элемент h1по умолчанию small, а также большинство других компонентов (с дополнительными стилями).
Пример шапки страницы Подтекст для шапки
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Миниатюры
Расширьте систему сетки Bootstrap с помощью компонента миниатюр, чтобы легко отображать сетки изображений, видео, текста и т. д.
Если вы ищете представление миниатюр различной высоты и/или ширины в стиле Pinterest, вам потребуется использовать сторонний плагин, такой как Masonry , Isotope или Salvattore .
Пример по умолчанию
По умолчанию миниатюры Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Пользовательский контент
С помощью небольшой дополнительной разметки можно добавить любой HTML-контент, такой как заголовки, абзацы или кнопки, в миниатюры.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>Оповещения
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Оберните любой текст и необязательную кнопку закрытия в .alertодин из четырех контекстных классов (например, .alert-success) для основных предупреждающих сообщений.
Нет класса по умолчанию
У предупреждений нет классов по умолчанию, только базовые классы и классы-модификаторы. Серое предупреждение по умолчанию не имеет особого смысла, поэтому вам необходимо указать тип через контекстный класс. Выберите из успеха, информации, предупреждения или опасности.
Отличная работа! Вы успешно прочитали это важное предупреждающее сообщение.
Берегись! Это предупреждение требует вашего внимания, но это не очень важно.
Предупреждение! Лучше проверь себя, ты не слишком хорошо выглядишь.
О хват! Измените несколько вещей и попробуйте отправить еще раз.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Закрываемые оповещения
Создайте любое оповещение, добавив необязательную .alert-dismissibleкнопку закрытия.
Требуется плагин оповещения JavaScript
Для полноценно функционирующих оповещений, которые можно закрыть, необходимо использовать подключаемый модуль JavaScript для оповещений .
Предупреждение! Лучше проверь себя, ты не слишком хорошо выглядишь.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Обеспечьте правильное поведение на всех устройствах
Обязательно используйте <button>элемент с data-dismiss="alert"атрибутом данных.
Ссылки в оповещениях
Используйте .alert-linkслужебный класс, чтобы быстро предоставить соответствующие цветные ссылки в любом предупреждении.
Отличная работа! Вы успешно прочитали
это важное предупреждающее сообщение .
Берегись! Это
предупреждение требует вашего внимания , но оно не очень важно.
Предупреждение! Лучше проверь себя, ты
не слишком хорошо выглядишь .
О хват!
Измените несколько вещей и попробуйте отправить еще раз.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>Индикаторы выполнения
Предоставляйте актуальную информацию о ходе рабочего процесса или действия с помощью простых, но гибких индикаторов выполнения.
Кроссбраузерная совместимость
Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и более ранних версиях, а также в более ранних версиях Firefox. Opera 12 не поддерживает анимацию.
Совместимость с политикой безопасности контента (CSP)
Если на вашем веб-сайте есть политика безопасности контента (CSP) , которая не разрешает style-src 'unsafe-inline', вы не сможете использовать встроенные styleатрибуты для установки ширины индикатора выполнения, как показано в наших примерах ниже. Альтернативные методы установки ширины, совместимые со строгими CSP, включают использование небольшого пользовательского JavaScript (который устанавливает element.style.width) или использование пользовательских классов CSS.
Базовый пример
Индикатор выполнения по умолчанию.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>С этикеткой
Удалите класс <span>with .sr-onlyиз индикатора выполнения, чтобы отобразить видимый процент.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Чтобы текст метки оставался разборчивым даже при низких процентных значениях, рассмотрите возможность добавления символа min-widthна индикатор выполнения.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>Контекстные альтернативы
Индикаторы выполнения используют одни и те же кнопки и классы предупреждений для единообразных стилей.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Полосатый
Использует градиент для создания полосатого эффекта. Недоступно в IE9 и более ранних версиях.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>Анимированный
Добавьте .active, чтобы .progress-bar-stripedанимировать полосы справа налево. Недоступно в IE9 и более ранних версиях.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>Сложены
Поместите несколько стержней в одно и то же .progress, чтобы сложить их.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>Медиа объект
Абстрактные стили объектов для создания различных типов компонентов (таких как комментарии в блогах, твиты и т. д.), которые содержат изображение, выровненное по левому или правому краю, наряду с текстовым содержимым.
Носитель по умолчанию
Медиа по умолчанию отображает медиа объект (изображения, видео, аудио) слева или справа от блока контента.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в 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, преддверие в 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, преддверие в 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, преддверие в vulputate at, tempus viverra turpis.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>Классы .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, преддверие в 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, преддверие в 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, преддверие в 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.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Список СМИ
С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для веток комментариев или списков статей).
-
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>Группа списка
Группы списков — гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.
Базовый пример
Самая простая группа списков — это просто неупорядоченный список с элементами списка и соответствующими классами. Используйте его с помощью следующих опций или своего собственного CSS по мере необходимости.
- Крас Хусто Одио
- Dapibus ac facilis в
- Морби Лео Рисус
- Porta ac consectetur ac
- Вестибюль у эроса
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Значки
Добавьте компонент значков к любому элементу группы списка, и он автоматически будет расположен справа.
- 14Крас Хусто Одио
- 2Dapibus ac facilis в
- 1Морби Лео Рисус
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Связанные элементы
Связать элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский элемент <div>вместо элемента <ul>). Нет необходимости в отдельных родителях вокруг каждого элемента.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Кнопки
Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родителя <div>вместо <ul>). Нет необходимости в отдельных родителях вокруг каждого элемента. Не используйте здесь стандартные .btnклассы.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>Отключенные элементы
Добавьте .disabledк .list-group-itemсерому, чтобы он казался отключенным.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Контекстные классы
Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанных. Также включает в себя .activeсостояние.
- Dapibus ac facilis в
- Крас сит амет нибх либеро
- Porta ac consectetur ac
- Вестибюль у эроса
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Пользовательский контент
Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже.
Заголовок элемента группы списка
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Заголовок элемента группы списка
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Заголовок элемента группы списка
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Панели
Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. Для таких ситуаций попробуйте панельный компонент.
Базовый пример
По умолчанию все, что .panelнужно сделать, это применить некоторые базовые границы и отступы, чтобы содержать некоторый контент.
Пример базовой панели
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Панель с заголовком
Легко добавьте контейнер заголовков на панель с помощью .panel-heading. Вы также можете включить любой <h1>- <h6>с .panel-titleклассом, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <h1>- <h6>переопределяются на .panel-heading.
Для правильной окраски ссылок обязательно размещайте ссылки в заголовках внутри .panel-title.
Заголовок панели без заголовка
Содержимое панели
Название панели
Содержимое панели
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Панель с нижним колонтитулом
Оборачивайте кнопки или дополнительный текст в файлы .panel-footer. Обратите внимание, что нижние колонтитулы панелей не наследуют цвета и границы при использовании контекстных вариантов, поскольку они не должны быть на переднем плане.
Содержимое панели
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Контекстные альтернативы
Как и другие компоненты, легко сделать панель более значимой для определенного контекста, добавив любой из классов контекстного состояния.
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>Со столами
Добавьте любые элементы без границ .tableвнутри панели для цельного дизайна. Если есть .panel-body, мы добавляем дополнительную границу в верхнюю часть таблицы для разделения.
Заголовок панели
Некоторое содержимое панели по умолчанию здесь. Nulla vitae elit libero, a pharetra augue. Энейская lacinia bibendum nulla sed consectetur. Энейский eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри | птица | @твиттер |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Если тела панели нет, компонент перемещается из заголовка панели в таблицу без перерыва.
Заголовок панели
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри | птица | @твиттер |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>С группами списков
Легко включайте группы списков полной ширины в любую панель.
Заголовок панели
Некоторое содержимое панели по умолчанию здесь. Nulla vitae elit libero, a pharetra augue. Энейская lacinia bibendum nulla sed consectetur. Энейский eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Крас Хусто Одио
- Dapibus ac facilis в
- Морби Лео Рисус
- Porta ac consectetur ac
- Вестибюль у эроса
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Адаптивная вставка
Разрешить браузерам определять размеры видео или слайд-шоу на основе ширины содержащего их блока, создав внутреннее соотношение, которое будет правильно масштабироваться на любом устройстве.
Правила напрямую применяются к элементам <iframe>, <embed>, <video>и ; <object>при необходимости используйте явный класс-потомок, .embed-responsive-itemесли вы хотите, чтобы стиль соответствовал другим атрибутам.
Совет! Вам не нужно включать frameborder="0"в свой <iframe>s, так как мы переопределяем это для вас.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>Уэллс
Колодец по умолчанию
Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки.
Смотри, я в колодце!
<div class="well">...</div>Дополнительные классы
Управляйте отступами и закругленными углами с помощью двух дополнительных классов модификаторов.
Смотри, я в большом колодце!
<div class="well well-lg">...</div>
Смотри, я в маленьком колодце!
<div class="well well-sm">...</div>