Components
Более десятка многоразовых компонентов, созданных для отображения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Более десятка многоразовых компонентов, созданных для отображения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Glyphicons Halflings обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности мы просим вас по возможности указывать обратную ссылку на Glyphicons.
По соображениям производительности для всех иконок требуется базовый класс и отдельный класс иконок. Чтобы использовать, поместите следующий код где угодно. Не забудьте оставить пробел между иконкой и текстом для правильного заполнения.
Классы иконок нельзя напрямую комбинировать с другими компонентами. Их нельзя использовать вместе с другими классами в одном элементе. Вместо этого добавьте вложенный <span>
и примените классы иконок к <span>
.
Классы иконок следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
Bootstrap предполагает, что файлы шрифтов иконок будут расположены в каталоге ../fonts/
относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:
@icon-font-path
и/или @icon-font-name
в исходных файлах 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> Звезда
</button>
Иконка, используемая в уведомлении, чтобы указать, что это сообщение об ошибке, с дополнительным текстом .sr-only
для передачи этой подсказки пользователям вспомогательных технологий.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Ошибка:</span>
Введите корректный электронный адрес
</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">
Выпадающий список
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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">
Выпадающий список вверх
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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">Заголовок раскрывающегося списка вниз</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="#">Обычная ссылка</a></li>
<li class="disabled"><a href="#">Отключенная ссылка</a></li>
<li><a href="#">Другая ссылка</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">Левый</button>
<button type="button" class="btn btn-default">Средний</button>
<button type="button" class="btn btn-default">Правый</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>
Поместите .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">
Раскрывающийся список
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Выпадающая ссылка</a></li>
<li><a href="#">Выпадающая ссылка</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, вы можете удалить или перекрасить границы.
Internet Explorer 8 не отображает границы кнопок в группе кнопок, выровненных по ширине, независимо от того, находятся ли они в элементах <a>
или <button>
. Чтобы обойти это, заключите каждую кнопку в другую .btn-group
.
Смотрите #12476 для получения дополнительной информации.
<a>
Просто оберните серию файлов .btn
в .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">Левый</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Средний</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Правый</button>
</div>
</div>
Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в .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">
Действие <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</a></li>
</ul>
</div>
Точно так же создайте раскрывающиеся списки разделенных кнопок с теми же изменениями разметки, только с отдельной кнопкой.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Действие</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">Переключить раскрывающийся список</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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">
Большая кнопка <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">
Маленькая кнопка <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">
Очень маленькая кнопка <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Вызов раскрывающихся меню над элементами путем добавления .dropup
к родительскому элементу.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Выпадающий список вверх</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">Переключить раскрывающийся список</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="Имя пользователя" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Имя пользователя получателя" 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="Сумма (с точностью до доллара)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Ваш виртуальный 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">Вперед!</button>
</span>
<input type="text" class="form-control" placeholder="Поиск для...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Поиск для...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Вперед!</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">Действие <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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">Действие <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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="#">Главная</a></li>
<li role="presentation"><a href="#">Профиль</a></li>
<li role="presentation"><a href="#">Сообщения</a></li>
</ul>
Возьмите тот же HTML, но используйте вместо него .nav-pills
:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Главная</a></li>
<li role="presentation"><a href="#">Профиль</a></li>
<li role="presentation"><a href="#">Сообщения</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="#">Отключенная ссылка</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">
Раскрывающийся список <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">
Раскрывающийся список <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Панели навигации - это адаптивные мета-компоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Бренд и переключатель сгруппированы для лучшего отображения на мобильных устройствах -->
<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">Переключить навигацию</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Бренд</a>
</div>
<!-- Собирайте навигационные ссылки, формы и другой контент для переключения -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Ссылка <span class="sr-only">(текущая)</span></a></li>
<li><a href="#">Ссылка</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Выпадающий список <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Еще одна отдельная ссылка</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Ссылка</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Выпадающий список <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще здесь</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Отдельная ссылка</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="Поиск">
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
Добавьте класс .navbar-btn
к элементам <button>
, не находящимся в <form>
, чтобы центрировать их по вертикали на панели навигации.
<button type="button" class="btn btn-default navbar-btn">Войти</button>
Оберните строки текста в элементе с помощью .navbar-text
, обычно в теге <p>
для правильного интерлиньяжа и цвета.
<p class="navbar-text">Вы вошли как Марк Отто</p>
Для людей, использующих стандартные ссылки, которые не входят в стандартный компонент навигации навигационной панели, используйте класс .navbar-link
, чтобы добавить правильные цвета для параметров по умолчанию и обратных параметров навигационной панели.
<p class="navbar-text navbar-right">Вы вошли как <a href="#" class="navbar-link">Марк Отто</a></p>
Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов .navbar-left
или .navbar-right
. Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный <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="#">Главная</a></li>
<li><a href="#">Библиотека</a></li>
<li class="active">Данные</li>
</ol>
Предоставьте ссылки для разбивки на страницы для вашего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджеру.
Простая разбивка на страницы, вдохновленная Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно пропустить, он легко масштабируется и обеспечивает большие области клика.
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li>
<a href="#" aria-label="Предыдущая">
<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="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Компонент разбивки на страницы должен быть заключен в элемент <nav>
, чтобы идентифицировать его как раздел навигации для программ чтения с экрана и других вспомогательных технологий. Кроме того, поскольку на странице, скорее всего, уже есть несколько таких разделов навигации (например, основная навигация в заголовке или боковая панель навигации), рекомендуется предоставить описательный aria-label
для <nav>
, который отражает его назначение. Например, если компонент разбивки на страницы используется для навигации между набором результатов поиска, подходящей меткой может быть aria-label="Страницы результатов поиска"
.
Ссылки настраиваются для разных обстоятельств. Используйте .disabled
для не кликабельных ссылок и .active
для обозначения текущей страницы.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Предыдущая"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(текущая)</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">(текущая)</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="#">Предыдущая</a></li>
<li><a href="#">Следующая</a></li>
</ul>
</nav>
Как вариант, вы можете выровнять каждую ссылку по сторонам:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Старее</a></li>
<li class="next"><a href="#">Новее <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> Старее</a></li>
<li class="next"><a href="#">Новее <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Пример заголовка <span class="label label-default">Новое</span></h3>
Добавьте любой из указанных ниже классов модификаторов, чтобы изменить внешний вид метки.
<span class="label label-default">По умолчанию</span>
<span class="label label-primary">Основное</span>
<span class="label label-success">Успешное</span>
<span class="label label-info">Информационное</span>
<span class="label label-warning">Внимание</span>
<span class="label label-danger">Опасность</span>
Проблемы с отображением могут возникнуть, когда у вас есть десятки встроенных меток в узком контейнере, каждая из которых содержит свой собственный элемент inline-block
(например, иконку). Чтобы решить эту проблему, установите display: inline-block;
. Контекст и пример смотрите в #13219.
Легко выделяйте новые или непрочитанные элементы, добавляя <span class="badge">
к ссылкам, навигации Bootstrap и т. д.
<a href="#">Входящие <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Сообщения <span class="badge">4</span>
</button>
Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью селектора CSS :empty
), если в них нет содержимого.
Значки не сворачиваются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора :empty
.
Включены встроенные стили для размещения значков в активном состоянии в навигации по таблетке.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Главная <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Профиль</a></li>
<li role="presentation"><a href="#">Сообщения <span class="badge">3</span></a></li>
</ul>
Легкий и гибкий компонент, который при желании может расширять всю область просмотра для демонстрации ключевого контента на вашем сайте.
Это простой герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации.
<div class="jumbotron">
<h1>Привет, мир!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Изучить больше</a></p>
</div>
Чтобы сделать jumbotron полной ширины и без закругленных углов, поместите его за пределами всех .container
и вместо этого добавьте внутри .container
.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Простая оболочка для h1
, позволяющая соответствующим образом разделять и сегментировать разделы содержимого на странице. Он может использовать элемент h1
по умолчанию для small
, а также большинство других компонентов (с дополнительными стилями).
<div class="page-header">
<h1>Пример заголовка страницы <small>Подтекст для заголовка</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>Метка эскиза</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Кнопка</a> <a href="#" class="btn btn-default" role="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.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
<strong>Предупреждение!</strong> Лучше проверь себя, ты не слишком хорошо выглядишь.
</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), запрещающая 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% Выполнено</span>
</div>
</div>
Удалите <span>
с классом .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% Выполнено (успешно)</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% Выполнено</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% Выполнено (внимание)</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% Выполнено (опасность)</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% Выполнено (успешно)</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% Выполнено</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% Выполнено (внимание)</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% Выполнено (опасность)</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% Выполнено</span>
</div>
</div>
Поместите несколько полос в один .progress
, чтобы сложить их.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Выполнено (успешно)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Выполнено (внимание)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Выполнено (опасность)</span>
</div>
</div>
Стили абстрактных объектов для создания различных типов компонентов (например, комментариев в блогах, твитов и т. д.), Которые содержат изображение с выравниванием по левому или правому краю рядом с текстовым контентом.
По умолчанию медиа-объект отображает медиа-объект (изображения, видео, аудио) слева или справа от блока контента.
<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">Медиа заголовок</h4>
...
</div>
</div>
Классы .pull-left
и .pull-right
также существуют и ранее использовались как часть медиа-компонента, но не рекомендуются для этого использования с версии v3.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.
<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">Медиа выравненный по середине</h4>
...
</div>
</div>
С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для цепочек комментариев или списков статей).
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.
<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">Медиа заголовок</h4>
...
</div>
</li>
</ul>
Группы списков - это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.
Самая основная группа списков - это просто неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или свой собственный CSS по мере необходимости.
<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>
Добавьте компонент значков к любому элементу группы списка, и он автоматически будет расположен справа.
<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
.
<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. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="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">
Пример базовой панели
</div>
</div>
С легкостью добавьте контейнер заголовка на панель с помощью .panel-heading
. Вы также можете включить любой <h1>
-<h6>
с классом .panel-title
, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <h1>
-<h6>
переопределяются .panel-heading
.
Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках внутри .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Заголовок панели без заголовка</div>
<div class="panel-body">
Контент панели
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели</h3>
</div>
<div class="panel-body">
Контент панели
</div>
</div>
Перенести кнопки или дополнительный текст в .panel-footer
. Обратите внимание, что нижние колонтитулы панели не наследуют цвета и границы при использовании контекстных вариаций, так как они не должны находиться на переднем плане.
<div class="panel panel-default">
<div class="panel-body">
Контент панели
</div>
<div class="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. 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 | Джейкоб | Торнтон | @fat |
3 | Ларри | Птица |
<div class="panel panel-default">
<!-- Содержимое панели по умолчанию -->
<div class="panel-heading">Заголовок панели</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Таблица -->
<table class="table">
...
</table>
</div>
Если тело панели отсутствует, компонент перемещается из заголовка панели в таблицу без прерывания.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Марк | Отто | @mdo |
2 | Джейкоб | Торнтон | @fat |
3 | Ларри | Птица |
<div class="panel panel-default">
<!-- Содержимое панели по умолчанию -->
<div class="panel-heading">Заголовок панели</div>
<!-- Таблица -->
<table class="table">
...
</table>
</div>
Легко включайте полноразмерные группы списков в любую панель.
Некоторое содержимое панели по умолчанию здесь. 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.
<div class="panel panel-default">
<!-- Содержимое панели по умолчанию -->
<div class="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>
, поскольку мы переопределяем это для тебя.
<!-- 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>