Компоненты
Компоненты для различных нужд: графические значки, выпадающие меню, группы ввода, навигационные панели, сообщения для предупреждений, и многе другое.
Значки символов
Доступные символы
Включает в себя более 250 символов в формате шрифта из Glyphicon Полурослики набор. Значки символов Халфлинги, как правило, не предоставляются бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности, мы только просим, чтобы вы включили ссылку на Значки символов при любой возможности.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-envelope
- glyphicon glyphicon-pencil
- glyphicon glyphicon-glass
- glyphicon glyphicon-music
- glyphicon glyphicon-search
- glyphicon glyphicon-heart
- glyphicon glyphicon-star
- glyphicon glyphicon-star-empty
- glyphicon glyphicon-user
- glyphicon glyphicon-film
- glyphicon glyphicon-th-large
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- glyphicon glyphicon-ok
- glyphicon glyphicon-remove
- glyphicon glyphicon-zoom-in
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon-trash
- glyphicon glyphicon-home
- glyphicon glyphicon-file
- glyphicon glyphicon-time
- glyphicon glyphicon-road
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-repeat
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- glyphicon glyphicon-flag
- glyphicon glyphicon-headphones
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-down
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glyphicon glyphicon-book
- glyphicon glyphicon-bookmark
- glyphicon glyphicon-print
- glyphicon glyphicon-camera
- glyphicon glyphicon-font
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-text-height
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-list
- glyphicon glyphicon-indent-left
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-picture
- glyphicon glyphicon-map-marker
- glyphicon glyphicon-adjust
- glyphicon glyphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-check
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- glyphicon glyphicon-backward
- glyphicon glyphicon-play
- glyphicon glyphicon-pause
- glyphicon glyphicon-stop
- glyphicon glyphicon-forward
- glyphicon glyphicon-fast-forward
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-left
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- glyphicon glyphicon-remove-sign
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-question-sign
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-remove-circle
- glyphicon glyphicon-ok-circle
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-arrow-left
- glyphicon glyphicon-arrow-right
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-down
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-small
- glyphicon glyphicon-exclamation-sign
- glyphicon glyphicon-gift
- glyphicon glyphicon-leaf
- glyphicon glyphicon-fire
- glyphicon glyphicon-eye-open
- glyphicon glyphicon-eye-close
- glyphicon glyphicon-warning-sign
- glyphicon glyphicon-plane
- glyphicon glyphicon-calendar
- glyphicon glyphicon-random
- glyphicon glyphicon-comment
- glyphicon glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-open
- glyphicon glyphicon-resize-vertical
- glyphicon glyphicon-resize-horizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- glyphicon glyphicon-certificate
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-hand-right
- glyphicon glyphicon-hand-left
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-circle-arrow-down
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- glyphicon glyphicon-tasks
- glyphicon glyphicon-filter
- glyphicon glyphicon-briefcase
- glyphicon glyphicon-fullscreen
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-paperclip
- glyphicon glyphicon-heart-empty
- glyphicon glyphicon-link
- glyphicon glyphicon-phone
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-sort-by-alphabet
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sort-by-order
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sort-by-attributes
- glyphicon glyphicon-sort-by-attributes-alt
- glyphicon glyphicon-unchecked
- glyphicon glyphicon-expand
- glyphicon glyphicon-collapse-down
- glyphicon glyphicon-collapse-up
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-window
- glyphicon glyphicon-record
- glyphicon glyphicon-save
- glyphicon glyphicon-open
- glyphicon glyphicon-saved
- glyphicon glyphicon-import
- glyphicon glyphicon-export
- glyphicon glyphicon-send
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-saved
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-open
- glyphicon glyphicon-credit-card
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-phone-alt
- glyphicon glyphicon-tower
- glyphicon glyphicon-stats
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- glyphicon glyphicon-subtitles
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-registration-mark
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-tree-deciduous
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-open-file
- glyphicon glyphicon-level-up
- glyphicon glyphicon-copy
- glyphicon glyphicon-paste
- glyphicon glyphicon-alert
- glyphicon glyphicon-equalizer
- glyphicon glyphicon-king
- glyphicon glyphicon-queen
- glyphicon glyphicon-pawn
- glyphicon glyphicon-bishop
- glyphicon glyphicon-knight
- glyphicon glyphicon-baby-formula
- glyphicon glyphicon-tent
- glyphicon glyphicon-blackboard
- glyphicon glyphicon-bed
- glyphicon glyphicon-apple
- glyphicon glyphicon-erase
- glyphicon glyphicon-hourglass
- glyphicon glyphicon-lamp
- glyphicon glyphicon-duplicate
- glyphicon glyphicon-piggy-bank
- glyphicon glyphicon-scissors
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- glyphicon glyphicon-yen
- glyphicon glyphicon-jpy
- glyphicon glyphicon-ruble
- glyphicon glyphicon-rub
- glyphicon glyphicon-scale
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-tasted
- glyphicon glyphicon-education
- glyphicon glyphicon-option-horizontal
- glyphicon glyphicon-option-vertical
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-modal-window
- glyphicon glyphicon-oil
- glyphicon glyphicon-grain
- glyphicon glyphicon-sunglasses
- glyphicon glyphicon-text-size
- glyphicon glyphicon-text-color
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-triangle-right
- glyphicon glyphicon-triangle-left
- glyphicon glyphicon-triangle-bottom
- glyphicon glyphicon-triangle-top
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-left
- glyphicon glyphicon-menu-right
- glyphicon glyphicon-menu-down
- glyphicon glyphicon-menu-up
Как использовать
Для повышения производительности, все иконы требуют базового класса и отдельных иконка класса. Для использования, поместите следующий код в любом месте. Не забудьте оставить пространство между иконка и текст для надлежащего внутренний отступ.
Не смешивайте с другими компонентами
Классы значков не могут сочетаться с другими элементами. Они спроектированы, чтобы быть отдельными элементами. Вместо этого добавте <span> и применить значок классов <span>
Только для пустых элементов
Классы Иконок следует использовать только на элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.
Изменение местоположения значка шрифта
Bootstrap предполагает значок файлов шрифтов будет располагаться в ../fonts/ каталог, по сравнению с скомпилированных файлов CSS. Перемещение и переименование этих файлов шрифтов означает обновление CSS в одном из трех способов:
- Изменить
@icon-font-pathand/или@icon-font-nameпеременные в источнике малых файлов. - Использование опции относительно URL-адреса тем меньше обеспечивается компилятора.
- Изменить
url()пути в составленном CSS.
Используйте все, что вариант лучше всего подходит вашей конкретной установки развития.
Доступно иконки
Современные версии ассистивных технологий объявит CSS Контента, а также специальные символы Unicode. Чтобы избежать непредвиденных и запутанных выхода в программы чтения с экрана (в частности, при иконки используется чисто для декора), то скрыть их с атрибутом aria-hidden="true".
Если вы используете иконка, чтобы передать смысл (а не только как декоративный элемент), убедитесь, что это значение также передал вспомогательные технологии – например, включать дополнительный контент, визуально скрыты с .sr-only класс.
Если вы создаете элементы другого текста (например, <button>, который только содержит иконка), Вы всегда должны предоставить альтернативный контент, чтобы определить цель контроля, так что будет иметь смысл для пользователей вспомогательных технологий. В этом случае, можно добавить aria-label атрибут на себя управление.
<spanclass="glyphicon glyphicon-search"aria-hidden="true"></span>Примеры
Используйте их в кнопках, группах кнопок для панели инструментов, панели навигации, или в приставках элементов формы.
<buttontype="button"class="btn btn-default"aria-label="Left Align"><spanclass="glyphicon glyphicon-align-left"aria-hidden="true"></span></button><buttontype="button"class="btn btn-default btn-lg"><spanclass="glyphicon glyphicon-star"aria-hidden="true"></span> Star
</button>В иконка используется в предупреждение передать, что это сообщение об ошибке, с дополнительным .sr-only текст, чтобы передать эту подсказку для пользователей вспомогательных технологий.
Error: Enter a valid email address
<divclass="alert alert-danger"role="alert"><spanclass="glyphicon glyphicon-exclamation-sign"aria-hidden="true"></span><spanclass="sr-only">Error:</span> Enter a valid email address
</div>Выпадающее меню
Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.
Пример
Оберните кнопку выпадающего меню и список с помощью класса .dropdown или другого элемента, который объявляет position: relative;.
<divclass="dropdown"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true"> Dropdown <spanclass="caret"></span></button><ulclass="dropdown-menu"aria-labelledby="dropdownMenu1"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div>Выпадающие меню могут быть изменены, чтобы расширить вверх (а не вниз), добавив .dropup родителю.
<divclass="dropup"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu2"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropup <spanclass="caret"></span></button><ulclass="dropdown-menu"aria-labelledby="dropdownMenu2"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div>Выравнивание
По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.
Может потребоваться дополнительное позиционирование
Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределми области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.
.pull-right устаревшее выравнивание
В версии 3.1, мы определили устаревшим выравнивание .pull-right для выпадающего меню. Для выравнивания меню справа, используйте .dropdown-menu-right. Компоненты, выровненные справа в навигационной панели используют реализован версию класса right-aligned, для автоматического выравнивания меню. Для переопределения их, используйте .dropdown-menu-left.
<ulclass="dropdown-menu dropdown-menu-right"aria-labelledby="dLabel"> ...
</ul>Заголовки
Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu3"> ... <liclass="dropdown-header">Dropdown header</li> ...
</ul>Делитель
Добавить разделитель для разделения ряда ссылок в выпадающем меню.
<ulclass="dropdown-menu"aria-labelledby="dropdownMenuDivider"> ... <lirole="separator"class="divider"></li> ...
</ul>Заблокированы части меню
Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu4"><li><ahref="#">Regular link</a></li><liclass="disabled"><ahref="#">Disabled link</a></li><li><ahref="#">Another link</a></li></ul>Группы кнопок
Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).
Подсказки и информеры в группе кнопок требуют специальных настроек
При использовании подсказок или информеров (popovers) в пределах .btn-group, необходимо определить параметр container: 'body', чтобы избежать нежелательных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).
Обеспечить правильное role и укажите метку
Для того, для вспомогательных технологий, таких как программы чтения с экрана – донести, что ряд кнопок сгруппированы, соответствующий role атрибут должен быть обеспечен. Для группы кнопок, это будет role="group", в то время как панели инструментов должны иметь role="toolbar".
Одно исключение-это группы, которые содержат только один элемент управления (например, оправдано группы кнопок с <button> элементами) или выпадающий.
Кроме того, группы и панели инструментов должны иметь четкие этикетки, как и большинство технологий, иначе не озвучить их, несмотря на наличие правильно role атрибута. В примерах, приведенных здесь, мы используем aria-label, но альтернативы, такие как aria-labelledby, также можно использовать.
Основной пример
Оберните серию кнопок с классом .btn класс .btn-group.
<divclass="btn-group"role="group"aria-label="..."><buttontype="button"class="btn btn-default">Left</button><buttontype="button"class="btn btn-default">Middle</button><buttontype="button"class="btn btn-default">Right</button></div>Кнопка панели инструментов
Объедините набор <div class="btn-group"> с помощью <div class="btn-toolbar"> для более сложных компонентов.
<divclass="btn-toolbar"role="toolbar"aria-label="..."><divclass="btn-group"role="group"aria-label="...">...</div><divclass="btn-group"role="group"aria-label="...">...</div><divclass="btn-group"role="group"aria-label="...">...</div></div>Изменение размера
Вместо применения кнопки классы размеров для каждой кнопки в группе, просто добавьте .btn-group-* друг .btn-group, в том числе для вложения нескольких групп.
<divclass="btn-group btn-group-lg"role="group"aria-label="...">...</div><divclass="btn-group"role="group"aria-label="...">...</div><divclass="btn-group btn-group-sm"role="group"aria-label="...">...</div><divclass="btn-group btn-group-xs"role="group"aria-label="...">...</div>Вложенность
Разместите .btn-group в середине другой .btn-group, если вы хотите совместить выпадающее меню с серией кнопок.
<divclass="btn-group"role="group"aria-label="..."><buttontype="button"class="btn btn-default">1</button><buttontype="button"class="btn btn-default">2</button><divclass="btn-group"role="group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown <spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Dropdown link</a></li><li><ahref="#">Dropdown link</a></li></ul></div></div>Вертикальные вариации
Сделайте набор кнопок, составленных вертикально, а не горизонтально. Split кнопки выпадающего меню не поддерживаются.
<divclass="btn-group-vertical"role="group"aria-label="..."> ...
</div>Группа кнопок Justified
Создавайте группы кнопок, растянуты на всю ширину их родительского элемента. Также рассмотрите вариант с кнопкой в выпадающем меню внутри группы кнопок.
Обработка рамок
Из-за специфических HTML и CSS, используемой для обоснования кнопок (а именно display: table-cell), границы между которыми удвоятся. В регулярных группах кнопок, margin-left: -1px используется для стека границ вместо удаления их. Впрочем, margin не работает с display: table-cell. В результате этого, в зависимости от ваших настроек в Bootstrap, вы можете удалить или повторно изменить цвет рамок.
IE8 и рамки
Internet Explorer 8 не оказывает границы на кнопках в обоснованной группе кнопок, будь то на <a> или <button> елементах. Чтобы избежать этого, обернуть каждую кнопку в другую .btn-group.
Смотрите #12476 для подробной информации.
С <a> элементами
Просто заключите серию .btn в .btn-group.btn-group-justified.
<divclass="btn-group btn-group-justified"role="group"aria-label="..."> ...
</div>Ссылки действуя как кнопки
Если <a> элементы используются в качестве кнопки запуска на странице функциональность, вместо того, чтобы переходить на другой документ или раздел в пределах текущей страницы – они также должны быть даны соответствующие role="button".
С <button> элементами
Для использования групп кнопок по ширине с элементами <button>, вы должны заключить каждую кнопку в группу кнопок. Большинство браузеров не правильно применяют наш CSS для обоснования, элемента <button>, но так как мы поддерживаем кнопки выпадающего меню, мы можем обойти это
<divclass="btn-group btn-group-justified"role="group"aria-label="..."><divclass="btn-group"role="group"><buttontype="button"class="btn btn-default">Left</button></div><divclass="btn-group"role="group"><buttontype="button"class="btn btn-default">Middle</button></div><divclass="btn-group"role="group"><buttontype="button"class="btn btn-default">Right</button></div></div>Кнопка выпадающего меню
Используйте любую кнопку для выпадающего меню разместив ее в .btn-group, и обеспечив ее правильно-размеченным меню.
Зависимость плагина
Кнопка выпадающего меню требует включения в вашу версию Bootstrap плагина для выпадающего меню.
Одиночная кнопка выпадающего меню
Предоставьте другого вида кнопке, с выпадающим меню, с помощью определенных базовых изменений.
<!-- Одна кнопка --><divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Action <spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div>Split кнопка с выпадающим меню
Аналогично, создайте split кнопку c выпадающим меню с такими же изменениями в разметки, только с разделенной кнопкой.
<!-- Раздельная кнопка --><divclass="btn-group"><buttontype="button"class="btn btn-danger">Action</button><buttontype="button"class="btn btn-danger dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="caret"></span><spanclass="sr-only">Toggle Dropdown</span></button><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div>Изменение размера
Кнопки в выпадающем меню могут иметь любой размер.
<!-- Большая группа кнопок --><divclass="btn-group"><buttonclass="btn btn-default btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Large button <spanclass="caret"></span></button><ulclass="dropdown-menu"> ... </ul></div><!-- Малая группа кнопок --><divclass="btn-group"><buttonclass="btn btn-default btn-sm dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Small button <spanclass="caret"></span></button><ulclass="dropdown-menu"> ... </ul></div><!-- Очень малая группа кнопок --><divclass="btn-group"><buttonclass="btn btn-default btn-xs dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Extra small button <spanclass="caret"></span></button><ulclass="dropdown-menu"> ... </ul></div>Вариант списка сверху
Создайте меню, элементы которого поднимаются вверх, прибавив .dropup к родительскому контейнеру.
<divclass="btn-group dropup"><buttontype="button"class="btn btn-default">Dropup</button><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="caret"></span><spanclass="sr-only">Toggle Dropdown</span></button><ulclass="dropdown-menu"><!-- Ссылки выпадающего меню --></ul></div>Группы формы ввода
Продлить элементов управления формы, добавляя текст или кнопки до, после или с обеих сторон в любом текстовом <input>. Используйте .input-group С .input-group-addon или .input-group-btn добавлять или добавлять элементы к одному .form-control.
Текстовое <input> только
В данном случае избегайте использования элементов <select>, поскольку они в полной мере не могут стилизоваться в WebKit браузерах.
Избегайте использования <textarea> элементы вот как их rows атрибута не будут уважать в некоторых случаях.
Подсказки и информеры в группе ввода требуют специальных настроек
Когда используете подсказки или информеры (popovers) на элементах в пределах .input-group, вам необходимо определить параметр container: 'body', для избежания нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).
Не смешивайте с другими компонентами
Не смешивайте группы форм или классы столбцов разметки непосредственно с группами ввода. Вместо этого, внедрите группу ввода внутри группы формы или связанной разметки с элементом.
Всегда добавляйте ярлыки
Программы чтения с экрана будут иметь проблемы со своими формами если Вы не включите метки для каждого входа. Для этих входных групп, убедитесь, что каких-либо дополнительных надписей или функциональности передается вспомогательных технологий.
Точный метод будет использоваться (видимых <label> элементы <label> элементы скрыты с помощью .sr-only класса, или использование aria-label, aria-labelledby, aria-describedby, title или placeholder атрибут) и какие дополнительные сведения должны быть доведены будет варьироваться в зависимости от типа интерфейса виджета вы реализуете. Примеры в этом разделе представлено несколько рекомендаций, конкретных подходов.
Основной пример
Поместите дополнительный компонент или кнопку по обе стороны от ввода. Вы также можете разместить один с обеих сторон.
Мы не поддерживаем несколько дополнений (.input-group-addon или .input-group-btn) на одной стороне.
Мы не поддерживаем несколько form-control в одной группе ввода.
<divclass="input-group"><spanclass="input-group-addon"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-describedby="basic-addon1"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-describedby="basic-addon2"><spanclass="input-group-addon"id="basic-addon2">@example.com</span></div><divclass="input-group"><spanclass="input-group-addon">$</span><inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)"><spanclass="input-group-addon">.00</span></div><labelfor="basic-url">Your vanity URL</label><divclass="input-group"><spanclass="input-group-addon"id="basic-addon3">https://example.com/users/</span><inputtype="text"class="form-control"id="basic-url"aria-describedby="basic-addon3"></div>Изменение размера
Разместите один приложение или одну кнопку с любой стороны от формы ввода. Вы также можете разместить их по обе стороны от формы ввода.
<divclass="input-group input-group-lg"><spanclass="input-group-addon"id="sizing-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-describedby="sizing-addon1"></div><divclass="input-group"><spanclass="input-group-addon"id="sizing-addon2">@</span><inputtype="text"class="form-control"placeholder="Username"aria-describedby="sizing-addon2"></div><divclass="input-group input-group-sm"><spanclass="input-group-addon"id="sizing-addon3">@</span><inputtype="text"class="form-control"placeholder="Username"aria-describedby="sizing-addon3"></div>Дополнение для флажков и переключателей
Поместите любые опции галочек (checkbox) или переключателей в рамках дополнения формы ввода вместо текста.
<divclass="row"><divclass="col-lg-6"><divclass="input-group"><spanclass="input-group-addon"><inputtype="checkbox"aria-label="..."></span><inputtype="text"class="form-control"aria-label="..."></div><!-- /input-группа --></div><!-- /.col-lg-6 --><divclass="col-lg-6"><divclass="input-group"><spanclass="input-group-addon"><inputtype="radio"aria-label="..."></span><inputtype="text"class="form-control"aria-label="..."></div><!-- /input-группа --></div><!-- /.col-lg-6 --></div><!-- /.строки -->Дополнение для кнопок
Кнопки в группах ввода немного отличаются и требуют один дополнительный уровень вложенности. Вместо .input-group-addon, вы должны будете использовать .input-group-btn. Это необходимо из-за стилей браузера по умолчанию, которые не могут быть переопределены.
<divclass="row"><divclass="col-lg-6"><divclass="input-group"><spanclass="input-group-btn"><buttonclass="btn btn-default"type="button">Go!</button></span><inputtype="text"class="form-control"placeholder="Search for..."></div><!-- /input-группа --></div><!-- /.col-lg-6 --><divclass="col-lg-6"><divclass="input-group"><inputtype="text"class="form-control"placeholder="Search for..."><spanclass="input-group-btn"><buttonclass="btn btn-default"type="button">Go!</button></span></div><!-- /input-группа --></div><!-- /.col-lg-6 --></div><!-- /.строки -->Кнопки с выпадающим меню
<divclass="row"><divclass="col-lg-6"><divclass="input-group"><divclass="input-group-btn"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Action <spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div><!-- /btn-группа --><inputtype="text"class="form-control"aria-label="..."></div><!-- /input-группа --></div><!-- /.col-lg-6 --><divclass="col-lg-6"><divclass="input-group"><inputtype="text"class="form-control"aria-label="..."><divclass="input-group-btn"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Action <spanclass="caret"></span></button><ulclass="dropdown-menu dropdown-menu-right"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div><!-- /btn-группа --></div><!-- /input-группа --></div><!-- /.col-lg-6 --></div><!-- /.строки -->Сегментированные кнопки
<divclass="input-group"><divclass="input-group-btn"><!-- Кнопка и выпадающее меню --></div><inputtype="text"class="form-control"aria-label="..."></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="..."><divclass="input-group-btn"><!-- Кнопка и выпадающее меню --></div></div>Несколько кнопок
В то время как вы можете иметь только одно добавить-на одной стороне, вы можете иметь несколько кнопок внутри один .input-group-btn.
<divclass="input-group"><divclass="input-group-btn"><!-- Кнопки --></div><inputtype="text"class="form-control"aria-label="..."></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="..."><divclass="input-group-btn"><!-- Кнопки --></div></div>Навигация
Доступна в Bootstrap навигация имеет общую разметку, начиная с базового класса .nav, и вплоть до совместных состояний. Осуществляется обмен модификаторами доступа для переключения между каждым стилем.
Вкладки
Заметьте, что класс .nav-tabs требует базового класса .nav.
<ulclass="nav nav-tabs"><lirole="presentation"class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li></ul>Навигационные кнопки
Используйте тот же HTML, но используйте .nav-pills вместо .nav-tabs:
<ulclass="nav nav-pills"><lirole="presentation"class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li></ul>Навигационные кнопки также доступны в вертикальной сборке. Просто добавьте .nav-stacked.
<ulclass="nav nav-pills nav-stacked"> ...
</ul>Выравнивание по ширине навигаций
При помощи .nav-justified можно легко создавать вкладки или кнопки, одинаковой ширины с их родительскими элементами, для более широких экранов по 768px. На меньших экранах, навигационные ссылки будут состоять.
В настоящее время обосновано навигации навигация ссылки не поддерживаются.
<ulclass="nav nav-tabs nav-justified"> ...
</ul><ulclass="nav nav-pills nav-justified"> ...
</ul>Заблокированные ссылки
В любых навигационных компонентов (вкладок, кнопок, списков) можно добавить .disabled для отображения в них серых ссылок и отсутствия эффектов при наведении курсора.
<ulclass="nav nav-pills"> ... <lirole="presentation"class="disabled"><ahref="#">Disabled link</a></li> ...
</ul>Использование выпадающего меню
Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.
Вкладки с выпадающем меню
<ulclass="nav nav-tabs"> ... <lirole="presentation"class="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-haspopup="true"aria-expanded="false"> Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"> ... </ul></li> ...
</ul>Навигационные кнопки с выпадающем меню
<ulclass="nav nav-pills"> ... <lirole="presentation"class="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-haspopup="true"aria-expanded="false"> Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"> ... </ul></li> ...
</ul>Навигационная панель
Навигационная панель по умолчанию
Навигационные панели являются адаптивными цель-компонентами, которые служат в качестве навигационных заголовков для приложений или сайтов. При просмотре на мобильных устройствах они сворачиваются (и могут переключаться), а при увеличении ширины смотрового окна принимают горизонтальную форму.
В настоящее время обосновано навигации навигация ссылки не поддерживаются.
<navclass="navbar navbar-default"><divclass="container-fluid"><!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях --><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Соберите навигационные ссылки, формы, и другой контент для переключения --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Link <spanclass="sr-only">(current)</span></a></li><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li><lirole="separator"class="divider"></li><li><ahref="#">One more separated link</a></li></ul></li></ul><formclass="navbar-form navbar-left"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btn btn-default">Submit</button></form><ulclass="nav navbar-nav navbar-right"><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>Логотип
Заменить бренд navbar с вашего собственного изображения можно меняя текст тэга <img>. .navbar-brand имеет свой внутренний отступ и высоту, возможно, придется поменять некоторые CSS-свойства в зависимости от вашего изображения.
<navclass="navbar navbar-default"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#"><imgalt="Brand"src="..."></a></div></div></nav>Формы
Разместите содержимое формы в пределах .navbar-form для правильного вертикального выравнивания, и для обеспечения функцией свертывания на узких смотровых окнах. Используйте параметры выравнивания, чтобы решить, где будет находиться содержимое в пределах навигационной панели.
Как ведущий, класс .navbar-form имеет большинство своего кода совместно с .form-inline через mixin. Некоторые элементы управления форм, таких как группы ввода, могут потребовать фиксированной для правильного отображения в navbar.
<formclass="navbar-form navbar-left"role="search"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btn btn-default">Submit</button></form>Кнопки
Добавьте класс .navbar-btn к элементам <button>, которые не находятся в <form> для вертикального их центрирование в навигационных панелях.
<buttontype="button"class="btn btn-default navbar-btn">Sign in</button>Текст
Заключите строку текста в элемент с классом .navbar-text, обычно с тегом <p>, для правильного выравнивания и цвета.
<pclass="navbar-text">Signed in as Mark Otto</p>Не контекстные ссылки
Люди, которые используют стандартные ссылки в пределах необычных компонентов навигационных панелей, могут применять класс .navbar-link для вставки правильных цветов в навигационных панелях по умолчанию и инвертированных навигационных панелях.
<pclass="navbar-text navbar-right">Signed in as <ahref="#"class="navbar-link">Mark Otto</a></p>Компонент выравнивания
Выравнивайте навигационные ссылки, формы, кнопки, текст, используя вспомогательные классы .navbar-left или .navbar-right. Оба классы добавляют CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, вложите их в отдельный <ul> с соответствующим вспомогательным классом.
Эти классы являются смешанной версией классов .pull-left и .pull-right, но они предназначены для медиа запросов, чтобы упростить обработку компонентов навигационных панелей для различных размеров устройств.
Фиксация вверху
Добавьте .navbar-fixed-top и подключите .container или .container-fluid для центровки и внутренних отступлений содержимого навигационной панели.
<navclass="navbar navbar-default navbar-fixed-top"><divclass="container"> ... </div></nav>Фиксация внизу
Добавьте .navbar-fixed-bottom и подключите .container или .container-fluid для центровки и внутренних отступлений содержимого навигационной панели.
<navclass="navbar navbar-default navbar-fixed-bottom"><divclass="container"> ... </div></nav>Статический верх
Создайте навигационную панель на полную ширину, которая будет прокручиваться вместе со страницей, добавив .navbar-static-top и включите .container или .container-fluid, для центровки и внутренних отступлений содержимого навигационной панели.
В отличие от классов .navbar-fixed-*, вам не нужно изменять любой body и #2#.
<navclass="navbar navbar-default navbar-static-top"><divclass="container"> ... </div></nav>Инвертированная навигационная панель
Изменить внешний вид панели навигации, добавив .navbar-inverse.
<navclass="navbar navbar-inverse"> ...
</nav>Навигационный маршрут
Установите текущую страницу расположение в пределах навигационной иерархии.
Разделители автоматически добавляются в CSS через :before и content.
<olclass="breadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Library</a></li><liclass="active">Data</li></ol>Нумерация страниц
Добавьте ссылки постраничного разделения для вашего сайта с многостраничным компонентом, или простой альтернатива листания.
Постраничное разделение по умолчанию
Простая нумерация inspired by Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, легко масштабируется, предоставляет большие кнопки.
<navaria-label="Page navigation"><ulclass="pagination"><li><ahref="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#"aria-label="Next"><spanaria-hidden="true">»</span></a></li></ul></nav>Маркировка пагинации
В пагинации должны быть обернуты в <nav> элемент как навигацией по разделам для чтения с экрана и других специальных возможностях. Кроме того, как страница может иметь более одного такого навигационной секции уже есть (например, основная навигация в шапке сайта или в боковой панели навигации), рекомендуется дать описательное aria-label Для <nav>, который отражает его назначение. Например, если в пагинации используется для навигации между набором результатов поиска подходящей надписи может быть aria-label="Search results pages".
Заблокированы и активные состояния
Ссылки могут настраиваться для различных нужд. Используйте .disabled для блокировки ссылок и .active для обозначения текущей страницы.
<navaria-label="..."><ulclass="pagination"><liclass="disabled"><ahref="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li><liclass="active"><ahref="#">1 <spanclass="sr-only">(current)</span></a></li> ... </ul></nav>Мы рекомендуем Вам поменять активную или отключен якоря <span> или опустить якорь в случае следующий/предыдущий стрелки, чтобы удалить функциональность при сохранении предназначены стили.
<navaria-label="..."><ulclass="pagination"><liclass="disabled"><span><spanaria-hidden="true">«</span></span></li><liclass="active"><span>1 <spanclass="sr-only">(current)</span></span></li> ... </ul></nav>Изменение размера
Есть потребность увеличить или уменьшить блок постраничного вывода? Добавьте .pagination-lg или .pagination-sm для изменения размеров.
<navaria-label="..."><ulclass="pagination pagination-lg">...</ul></nav><navaria-label="..."><ulclass="pagination">...</ul></nav><navaria-label="..."><ulclass="pagination pagination-sm">...</ul></nav>Пейджер
Быстрое создание ссылок для просмотра предыдущей и следующей страницы, для простого постраничного разделения с легкой разметкой и стилями. Это хорошо подходит для простых сайтов, таких как блоги и журналы.
Основной пример
По умолчанию, листание имеет ссылки, выровненные по-центру.
<navaria-label="..."><ulclass="pager"><li><ahref="#">Previous</a></li><li><ahref="#">Next</a></li></ul></nav>Выравнивание ссылок
В качестве альтернативы, вы можете выравнивать каждую ссылку:
<navaria-label="..."><ulclass="pager"><liclass="previous"><ahref="#"><spanaria-hidden="true">←</span> Older</a></li><liclass="next"><ahref="#">Newer <spanaria-hidden="true">→</span></a></li></ul></nav>Заблокирован состояние
Листание ссылок также использует базовый вспомогательный класс .disabled.
<navaria-label="..."><ulclass="pager"><liclass="previous disabled"><ahref="#"><spanaria-hidden="true">←</span> Older</a></li><liclass="next"><ahref="#">Newer <spanaria-hidden="true">→</span></a></li></ul></nav>Метки
Пример
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h3>Example heading <spanclass="label label-default">New</span></h3>Доступные варианты
Добавте любой из перечисленных ниже модификаторов классов, чтобы изменить внешний вид меткии.
DefaultPrimarySuccessInfoWarningDanger
<spanclass="label label-default">Default</span><spanclass="label label-primary">Primary</span><spanclass="label label-success">Success</span><spanclass="label label-info">Info</span><spanclass="label label-warning">Warning</span><spanclass="label label-danger">Danger</span>Есть тонна меток?
Оказание проблемы могут возникнуть, когда у вас есть десятки встроенных ярлыков в узком контейнере, каждый из которых содержит свой собственный inline-block элементе (похожая иконка). Способом решить эту проблему является создание display: inline-block;. Для примера, смотрите #13219.
Значки
Легко подсветить новые или непрочитанные записи добавив к ссылкам <span class="badge">, Bootstrap навигацию, и другое.
<ahref="#">Inbox <spanclass="badge">42</span></a><buttonclass="btn btn-primary"type="button"> Messages <spanclass="badge">4</span></button>Самосвертывание
Когда нет новых или непрочитанных записей, значки будут просто свернуты (через CSS селектор :empty), при условии отсутствия внутри содержимого.
Кросс-браузерная совместимость
Значки не будут самозгортатись в Internet Explorer 8, потому что ему не хватает поддержки селектора :empty.
Адаптация под активные состояния
Встроенные стили позволяют содержать значки в активном состоянии, которые размещены в навигационных кнопках и навигационных списках.
<ulclass="nav nav-pills"role="tablist"><lirole="presentation"class="active"><ahref="#">Home <spanclass="badge">42</span></a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages <spanclass="badge">3</span></a></li></ul>Jumbotron
Легкий, гибкий компонент, который можно расширять на весь экран, чтобы продемонстрировать ключевой контент вашего сайта.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<divclass="jumbotron"><h1>Hello, world!</h1><p>...</p><p><aclass="btn btn-primary btn-lg"href="#"role="button">Learn more</a></p></div>Создайте большой экран на всю ширину, без закругленных углов, который размещен за пределами .container, но, вместо этого, который вмещает .container.
<divclass="jumbotron"><divclass="container"> ... </div></div>Заголовок страницы
Представляем вам простую оболочку для h1, которая устанавливает соответствующий отступ и сегментирует содержание страницы. В ней можно использовать элемент по умолчанию h1 и small, а также много других компонентов (с дополнительными стилями).
Example page header Subtext for header
<divclass="page-header"><h1>Example page header <small>Subtext for header</small></h1></div>Эскизы
Расширьте систему сетки Bootstrap с помощью компонента эскиза для легкого создания сетки с изображениями, видео, текстом, и так далее.
Если вы ищете как pinterest презентация эскизов разной высоты и/или ширины, вам потребуется использовать сторонние плагины, такие как Кладка, Изотоп.
Основной пример
По умолчанию, эскизы Bootstrap спроектированы для отображения связанных изображений с минимальной, лишь необходимой разметкой.
<divclass="row"><divclass="col-xs-6 col-md-3"><ahref="#"class="thumbnail"><imgsrc="..."alt="..."></a></div> ...
</div>Настраиваемое содержимое
Добавив немного разметки, можно включать любое содержимое HTML, такой как заголовки, параграфы, или кнопки в середине эскизов.
<divclass="row"><divclass="col-sm-6 col-md-4"><divclass="thumbnail"><imgsrc="..."alt="..."><divclass="caption"><h3>Thumbnail label</h3><p>...</p><p><ahref="#"class="btn btn-primary"role="button">Button</a><ahref="#"class="btn btn-default"role="button">Button</a></p></div></div></div></div>Уведомления
Предоставьте контекстные интерактивные замечания для типовых действий пользователей.
Примеры
Для базовых замечаний, оберните любой текст и опциональную кнопку при помощи .alert, и одного из четырех контекстных классов (например, .alert-success).
Без класса по умолчанию
Важные сообщения не имеют классов по умолчанию, а имеют лишь базовые классы и модификаторы классов. Важные серые сообщения по умолчанию имеют мало смысла, так что вам еще нужно отметить для них тип через контекстный класс. Можете выбрать какой-то из замечаний: успешное, информативное, предупредительное, опасное.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<divclass="alert alert-success"role="alert">...</div><divclass="alert alert-info"role="alert">...</div><divclass="alert alert-warning"role="alert">...</div><divclass="alert alert-danger"role="alert">...</div>Неотстранимое оповещение
Создавайте любые замечания добавив необязательные .alert-dismissible и кнопку закрытия.
Требуется JavaScript alert плагин
Для полного функционирования, закрываемых оповещения, вы должны использовать оповещения JavaScript плагин.
Warning! Better check yourself, you're not looking too good.
<divclass="alert alert-warning alert-dismissible"role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button><strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Обеспечьте правильное поведение на всех устройствах
Убедитесь, что используете элемент <button> с атрибутом data-dismiss="alert".
Ссылки в замечаниях
Используйте вспомогательный класс .alert-link, чтобы быстро предоставить соответствующие цветные ссылки в пределах любого замечания.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
<divclass="alert alert-success"role="alert"><ahref="#"class="alert-link">...</a></div><divclass="alert alert-info"role="alert"><ahref="#"class="alert-link">...</a></div><divclass="alert alert-warning"role="alert"><ahref="#"class="alert-link">...</a></div><divclass="alert alert-danger"role="alert"><ahref="#"class="alert-link">...</a></div>Индикатор выполнения
Предоставьте актуальные сведения о ходе рабочего процесса или действия, с помощью простого но гибкого индикатора выполнения.
Кросс-браузерная совместимость
Индикатор выполнения использует переходы и анимацию CSS3 для обеспечения определенных эффектов. Эти функции не поддерживаются в Internet Explorer 9 и старше, или в старых версиях Firefox. Opera 12 не поддерживает анимации.
Политика защиты содержимого (CSP) Совместимость
Если ваш сайт имеет Политика защиты содержимого (CSP) нельзя style-src 'unsafe-inline', тогда Вы не сможете использовать встроенный style атрибутами установить индикатор ширины, как показано в примерах ниже. Альтернативные методы установки ширины, которые совместимы со строгим ППО включают использование небольшого JavaScript (что наборы element.style.width) или с помощью настраиваемых CSS классов.
Основной пример
Индикатор выполнения по умолчанию.
<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%;"><spanclass="sr-only">60% Complete</span></div></div>С меткой
Удалить <span> С .sr-only класс в прогресс бар, чтобы показать видимый процент.
<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%;"> 60% </div></div>Чтобы убедиться, что текст остается читаемым даже на низкий процент, попробуйте добавить min-width, чтобы прогресс-бар.
<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"style="min-width: 2em;"> 0% </div></div><divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="2"aria-valuemin="0"aria-valuemax="100"style="min-width: 2em; width: 2%;"> 2% </div></div>Контекстные альтернативы
Индикатор выполнения в различных вариантах использует некоторые одинаковые кнопки и классы замечаний для согласования стилей.
<divclass="progress"><divclass="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width: 40%"><spanclass="sr-only">40% Complete (success)</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%"><spanclass="sr-only">20% Complete</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%"><spanclass="sr-only">60% Complete (warning)</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width: 80%"><spanclass="sr-only">80% Complete (danger)</span></div></div>Полосатый индикатор
Использует градиент, чтобы создать полосатый эффект. Не доступен в IE9 и ниже.
<divclass="progress"><divclass="progress-bar progress-bar-success progress-bar-striped"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width: 40%"><spanclass="sr-only">40% Complete (success)</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-info progress-bar-striped"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%"><spanclass="sr-only">20% Complete</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-warning progress-bar-striped"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%"><spanclass="sr-only">60% Complete (warning)</span></div></div><divclass="progress"><divclass="progress-bar progress-bar-danger progress-bar-striped"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width: 80%"><spanclass="sr-only">80% Complete (danger)</span></div></div>Индикатор с анимацией
Добавьте .active к .progress-bar-striped для анимации левой или правой полосатости. Это является недоступным в IE9 и ниже.
<divclass="progress"><divclass="progress-bar progress-bar-striped active"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100"style="width: 45%"><spanclass="sr-only">45% Complete</span></div></div>Сводный индикатор
Расположите нескольких экземпляров индикатора в одном контейнере с классом .progress для демонстрации сводного результата.
<divclass="progress"><divclass="progress-bar progress-bar-success"style="width: 35%"><spanclass="sr-only">35% Complete (success)</span></div><divclass="progress-bar progress-bar-warning progress-bar-striped"style="width: 20%"><spanclass="sr-only">20% Complete (warning)</span></div><divclass="progress-bar progress-bar-danger"style="width: 10%"><spanclass="sr-only">10% Complete (danger)</span></div></div>Медиа объект
Стилизация абстрактного объекта, для создания различных типов компонентов (таких как комментарии для блога, твиттера, и т.д.), которые со своим изображением выровнены по левому или по правому краю рядом с текстовым содержанием.
По умолчанию значение медиа
Предлагаемое по умолчанию значение медиа отображает медиа объектов (изображений, видео, аудио) слева или справа от содержимого блока.
Media heading
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.
Media heading
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.
Nested media heading
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.Media heading
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.
Media heading
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.
<divclass="media"><divclass="media-left"><ahref="#"><imgclass="media-object"src="..."alt="..."></a></div><divclass="media-body"><h4class="media-heading">Media heading</h4> ... </div></div>Классы .pull-left и .pull-right также существует и ранее использовались как часть медиа компонента, но не рекомендуется для использования в качестве "v3".3.0. Они примерно эквивалентны .media-left и .media-right, за исключением того, что .media-right должен быть помещен после .media-body в HTML.
Media выравнивание
Изображений или других медиа можно выровнять верхней, средней или нижней. По умолчанию это верхняя выровнены.
Top aligned media
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.
Middle aligned media
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.
Bottom aligned media
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.
<divclass="media"><divclass="media-left media-middle"><ahref="#"><imgclass="media-object"src="..."alt="..."></a></div><divclass="media-body"><h4class="media-heading">Middle aligned media</h4> ... </div></div>Список медиа
С немного дополнительной разметки, вы можете использовать медиа внутри списка (полезно для обсуждения темы или списки статей).
Media heading
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.
Nested media heading
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.
Nested media heading
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.
Nested media heading
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.
<ulclass="media-list"><liclass="media"><divclass="media-left"><ahref="#"><imgclass="media-object"src="..."alt="..."></a></div><divclass="media-body"><h4class="media-heading">Media heading</h4> ... </div></li></ul>Группы списков
Группы списков являются гибким и мощным компонентом для отображения не только простых пунктов списка, но и для чего-то более сложного, что касается пользовательского содержимого.
Основной пример
Самым базовым является простая группа списков с ненумерованими пунктами, и собственными классами. Добавляйте к нему опции, как показано ниже, или при необходимости добавляйте собственные стили CSS.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>Значки
Добавьте компоненты значков до любого пункта группы списков, и они автоматически будут позиционированы по правому краю.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
<ulclass="list-group"><liclass="list-group-item"><spanclass="badge">14</span> Cras justo odio </li></ul>Связанные элементы
Ссылочные пункты группы списков создаются с помощью тегов <div> вместо пунктов списка (здесь также используется в качестве родительского элемента <ul> вместо #2#). Не нужно дополнительно обертывать каждый пункт родительским элементом.
<divclass="list-group"><ahref="#"class="list-group-item active"> Cras justo odio </a><ahref="#"class="list-group-item">Dapibus ac facilisis in</a><ahref="#"class="list-group-item">Morbi leo risus</a><ahref="#"class="list-group-item">Porta ac consectetur ac</a><ahref="#"class="list-group-item">Vestibulum at eros</a></div>Кнопка элементы
Список элементов группы могут быть кнопки вместо элементов списка (это также означает, что родитель <div> вместо <ul>). Нет необходимости для отдельных родителей по каждому элементу. Не использовать стандартный .btn классы здесь.
<divclass="list-group"><buttontype="button"class="list-group-item">Cras justo odio</button><buttontype="button"class="list-group-item">Dapibus ac facilisis in</button><buttontype="button"class="list-group-item">Morbi leo risus</button><buttontype="button"class="list-group-item">Porta ac consectetur ac</button><buttontype="button"class="list-group-item">Vestibulum at eros</button></div>Неактивные пункты
Добавьте .disabled к .list-group-item для серого оттенка сделав неактивным.
<divclass="list-group"><ahref="#"class="list-group-item disabled"> Cras justo odio </a><ahref="#"class="list-group-item">Dapibus ac facilisis in</a><ahref="#"class="list-group-item">Morbi leo risus</a><ahref="#"class="list-group-item">Porta ac consectetur ac</a><ahref="#"class="list-group-item">Vestibulum at eros</a></div>Контекстные классы
Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанно. Также включают в себя состояние .active.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item list-group-item-success">Dapibus ac facilisis in</li><liclass="list-group-item list-group-item-info">Cras sit amet nibh libero</li><liclass="list-group-item list-group-item-warning">Porta ac consectetur ac</li><liclass="list-group-item list-group-item-danger">Vestibulum at eros</li></ul><divclass="list-group"><ahref="#"class="list-group-item list-group-item-success">Dapibus ac facilisis in</a><ahref="#"class="list-group-item list-group-item-info">Cras sit amet nibh libero</a><ahref="#"class="list-group-item list-group-item-warning">Porta ac consectetur ac</a><ahref="#"class="list-group-item list-group-item-danger">Vestibulum at eros</a></div>Настраиваемое содержимое
Добавляйте практически любой HTML, даже для связанного списка групп, как показано ниже.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<divclass="list-group"><ahref="#"class="list-group-item active"><h4class="list-group-item-heading">List group item heading</h4><pclass="list-group-item-text">...</p></a></div>Панели
Хотя не всегда необходимо, но иногда нужно во что-то упаковать DOM. Для таких случаев, попробуйте компонент панели.
Основной пример
По умолчанию, все .panel применяют некоторую базовую рамка (border) и отступы (padding), чтобы вместить содержимое.
Basic panel example
<divclass="panel panel-default"><divclass="panel-body"> Basic panel example </div></div>Панель с заголовком
Легко добавить Заголовок контейнера панель с .panel-heading. Вы также можете включить любой <h1>-<h6> с .panel-title класс, чтобы добавить предварительно оформленный Заголовок. Однако размеры шрифта <h1>-<h6> переопределяются .panel-heading.
Для правильной линии окраски, не забудьте разместить ссылки в заголовках в .panel-title.
Panel heading without title
Panel content
Panel title
Panel content
<divclass="panel panel-default"><divclass="panel-heading">Panel heading without title</div><divclass="panel-body"> Panel content </div></div><divclass="panel panel-default"><divclass="panel-heading"><h3class="panel-title">Panel title</h3></div><divclass="panel-body"> Panel content </div></div>Панель с нижним колонтитулом
Оберните кнопки или вторичный текст в .panel-footer. Заметьте, что эта панель с нижним колонтитулом не наследует цвета и рамки (borders), при использовании контекстных вариантов, поскольку они не предназначены, чтобы быть на переднем плане.
Panel content
<divclass="panel panel-default"><divclass="panel-body"> Panel content </div><divclass="panel-footer">Panel footer</div></div>Контекстные альтернативы
Так как и другие компоненты, можно легко сделать панель более выразительной для конкретного контекста, добавив любой контекстный состояние классов.
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
<divclass="panel panel-primary">...</div><divclass="panel panel-success">...</div><divclass="panel panel-info">...</div><divclass="panel panel-warning">...</div><divclass="panel panel-danger">...</div>С таблицами
Вставьте любую таблицу без рамок с классом .table внутрь панели, для создания простого дизайна. Если применяется класс .panel-body, мы добавляем еще границы вверху для разграничения.
Panel heading
Some default panel content here. 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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<divclass="panel panel-default"><!-- Содержание панели по умолчанию --><divclass="panel-heading">Panel heading</div><divclass="panel-body"><p>...</p></div><!-- Таблица --><tableclass="table"> ... </table></div>Если панель не имеет тела, компоненты переносятся из заголовка панели таблицы корректно.
Panel heading
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<divclass="panel panel-default"><!-- Содержание панели по умолчанию --><divclass="panel-heading">Panel heading</div><!-- Таблица --><tableclass="table"> ... </table></div>С группой списка
Легко включать группы списка в пределы любой панели.
Panel heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<divclass="panel panel-default"><!-- Содержание панели по умолчанию --><divclass="panel-heading">Panel heading</div><divclass="panel-body"><p>...</p></div><!-- Группы списков --><ulclass="list-group"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>Отзывчивый код для вставки
Разрешите браузерам определять размеры видео или слайд-шоу на основе ширины содержащего их блока, создавая собственный коэффициент, который будет правильно масштабироваться на любом устройстве.
Правила применяются непосредственно к <iframe>, <embed>, и <video> элементы; необязательно использовать явное класс потомок <object> когда вы хотите, чтобы соответствовать стиль для других атрибутов.
Pro-Совет! Вам не нужно включать frameborder="0" в вашем <iframe> мы переопределили, что для вас.
<!-- Соотношение 16:9 --><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src="..."></iframe></div><!-- Соотношение 4:3 --><divclass="embed-responsive embed-responsive-4by3"><iframeclass="embed-responsive-item"src="..."></iframe></div>Ячейки
Основной эффект ячейки
Используйте ячейку, чтобы получить простой эффект - будто внутренний текст находится в оболочке.
Look, I'm in a well!
<divclass="well">...</div>Дополнительные классы
Чтобы контролировать отступы (padding) и закругления углов, используйте два дополнительных модификаторы классов.
Look, I'm in a large well!
<divclass="well well-lg">...</div> Look, I'm in a small well!
<divclass="well well-sm">...</div>