ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Media Objects BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix BS Filters

Bootstrap Grids

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap CSS Ref

CSS All Classes CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap Навигационные компоненты


Вкладки и Pills

Класс Описание
.nav nav-tabs Создание вкладок навигации
.nav nav-pills Создает навигационные таблетки
.nav nav-pills nav-stacked Создает вертикальные таблетки навигации
.nav-justified Делает навигационные вкладки/таблетки равной ширины их родителя, на экранах шире, чем 768px. На небольших экранах навигационные вкладки/таблетки укладываются
.disabled Указывает на отключенную (ненажатую) вкладку/таблетку
Вкладки навигации с раскрывающимся меню
Навигационные таблетки с выпадающим меню
.tab-content Вместе с. Tab-панель и Data-переключение = "Tab" (данные-Toggle = "таблетка" для таблеток), это делает вкладку/таблетки переключаемый
.tab-pane Вместе с. Tab-содержание и данные-переключатель = "Tab" (данные-переключатель = "таблетка" для таблеток), это делает вкладку/таблетки переключаемый

NavBars

Класс Описание
.navbar Creates a navigation bar
.navbar-brand Добавляется к ссылке или элементу заголовка внутри навигационной страницы для представления логотипа или заголовка
.navbar-btn Вертикальное выравнивание кнопки внутри панели навигации
.navbar-collapse Сворачивает навигационной панели (скрытые и заменены меню/гамбургер значок на мобильных телефонах и малых таблеток)
.navbar-default Создает панель навигации по умолчанию (светло-серый цвет фона)
.navbar-fixed-bottom Делает панели навигации оставаться в нижней части экрана (липкий/фиксированный)
.navbar-fixed-top Делает навигационное меню в верхней части экрана (липкое/фиксированное)
.navbar-form Добавлены элементы формы внутри навигационной области для вертикального центрирования их (правильное заполнение)
.navbar-header Добавляется к элементу контейнера, содержащему ссылку/элемент, представляющий эмблему или заголовок
.navbar-inverse Создает черную панель навигации (вместо светло-серого)
.navbar-left Выравнивает навигационные ссылки, формы, кнопки или текст в навигационной панели влево
.navbar-link Стили элемент, чтобы выглядеть как ссылка внутри навигационной (якоря получить правильное заполнение и подчеркивание при наведении, в то время как другие элементы, такие как p или span получает эффект наведения по умолчанию-белый цвет в обратной навигации и черный цвет в навигационной навигации по умолчанию)
.navbar-nav Используется в контейнере < ul >, содержащем элементы списка со ссылками внутри панели навигации
.navbar-right Выравнивает навигационные ссылки, формы, кнопки или текст в панели навигации вправо.
.navbar-static-top Удаляет левую, верхнюю и правую границы (закругленные углы) из навигационной области (по умолчанию навигационная рамка имеет серую границу и 4px Border-RADIUS)
.navbar-text Вертикальное выравнивание любых элементов внутри навигационной области, которые не являются связями (обеспечивает правильное заполнение)
.navbar-toggle Стили кнопки, которые должны открыть панели навигации на небольших экранах. Часто используется вместе с тремя .icon-bar классами для обозначения переключаемого значка меню (гамбургер/бары)


Панировочные сухари и разбиение на страницы

Класс Описание
.breadcrumb Делает навигационную цепочку
.pager Предоставляет простые ссылки на страницы (предыдущий/следующий)
.previous Выравнивает предыдущую кнопку на пейджер влево
.next Выравнивание кнопки. пейджера далее вправо
.disabled Указывает на нещелкнув ссылку
.pagination Предоставляет ссылки на страницы
.pagination-lg Используется совместно с классом. разбиение на страницы для предоставления более крупных ссылок на страницы
.pagination-sm Используется совместно с классом. разбиение на страницы для предоставления небольших ссылок на страницы
.disabled Указывает на нещелкнув ссылку
.active Указывает текущую страницу

Этикетки и значки

Класс Описание
.label label-default Указывает серую метку по умолчанию
.label label-primary Указывает синюю метку типа "Primary"
.label label-success Указывает зеленую метку типа "Success"
.label label-info Указывает на светло-синюю метку типа "info"
.label label-warning Указывает желтую метку типа "предупреждение"
.label label-danger Указывает красную метку типа "опасность"
.badge Указывает новые или непрочитанные элементы
.jumbotron Указывает на большую коробку для вызова дополнительного внимания к признакам содержания или информации
.jumbotron (extra) Чтобы поле. Jumbotron проходило всю ширину и без скругленных углов, поместите его за пределы класса. Container