Составные части
Более дюжины повторно используемых компонентов, созданных для обеспечения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Более дюжины повторно используемых компонентов, созданных для обеспечения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Включает более 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> 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, вы можете удалить или перекрасить границы.
Internet Explorer 8 не отображает границы кнопок в группе кнопок с выравниванием по ширине, независимо от того, включены ли они <a>
или <button>
элементы. Чтобы обойти это, оберните каждую кнопку другим .btn-group
.
См. № 12476 для получения дополнительной информации.
<a>
элементамиПросто оберните серию .btn
s в .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>
Чтобы сделать джамботрон полной ширины и без закругленных углов, поместите его за пределы всех .container
s и вместо этого добавьте .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 для оповещений .
<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) , которая не разрешает 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>
Абстрактные стили объектов для создания различных типов компонентов (таких как комментарии в блогах, твиты и т. д.), которые содержат изображение, выровненное по левому или правому краю, наряду с текстовым содержимым.
Медиа по умолчанию отображает медиа объект (изображения, видео, аудио) слева или справа от блока контента.
<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.
<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 по мере необходимости.
<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. Меценат 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.
<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>