Панели bootstrap: Bootstrap Бутстрап Панели
Содержание
Bootstrap Бутстрап Панели
Панели
Панель в Bootstrap представляет собой рамку с некоторой обивкой вокруг ее содержимого:
Панели создаются с помощью .panel
класса, а содержимое внутри панели имеет .panel-body
класс:
Пример
<div>
<div>A Basic Panel</div>
</div>
.panel-default
класс используется для стиля цвета панели. Смотрите последний пример на этой странице для более контекстуальных классов.
Panel Heading
Panel Heading
Panel Content
.panel-heading
класс добавляет заголовок на панель:
Пример
<div>
<div>Panel Heading</div>
<div>Panel Content</div>
</div>
Нижний колонтитул панели
.panel-footer
класс добавляет нижний колонтитул на панель:
Пример
<div>
<div>Panel Content</div>
<div>Panel Footer</div>
</div>
Группа панелей
Чтобы сгруппировать много панелей вместе, оберните <div>
с классом
вокруг них.
. panel-group
.panel-group
класс очищает нижний край каждой панели:
Пример
<div>
<div>
<div>Panel Content</div>
</div>
<div>
<div>Panel Content</div>
</div>
</div>
Панели с контекстными классами
Чтобы раскрасить панель, используйте контекстные классы (.panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
или .panel-danger
):
Пример
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
Bootstrap 3 — Панели — ИТ Шеф
В этой статье вы узнаете, как создать панели с помощью Twitter Bootstrap.
Создание панели с помощью Twitter Bootstrap 3
Иногда, на сайте может потребоваться разместить некоторый логически связанный текст в рамке. Это можно сделать с помощью компонента Bootstrap панель.
Для создания панели необходимо заключить текст в блочный элемент <div>
с классом .panel-body
. Который в свою очередь заключить в ещё один блочный элемент <div>
с классами .panel
и .panel-default
.
<div> <div>Пример простой панели</div> </div>
Вышеприведенный пример будет выглядеть примерно так:
Bootstrap — Панель
Создание панели с заголовком
Чтобы добавить заголовок в панель, его необходимо поместить в контейнер <div>
с классом .panel-heading
.
<div> <div>Панель с заголовком</div> <div> Содержимое панели </div> </div>
Bootstrap — Панель с заголовком
Вы также можете заключить текст заголовка в элементы от <h2>
до <h6>
и применить к нему стили с помощью класса . panel-title
.
<div> <div> <h4>Панель с h4 заголовком</h4> </div> <div> Содержимое панели </div> </div>
Bootstrap — Панель с h4 заголовком
Панель с футером
Подобно панелям с заголовком, Вы также можете добавить секцию подвала для ваших панелей, используя класс .panel-footer
. Футер панели может использоваться для размещения кнопок или дополнительного текста.
<div> <div> Содержимое панели </div> <div>Панель подвала</div> </div>
Bootstrap — Панель с футером
Классы, акцентирующие состояние контекста панели
К панелям, как и к большинству других компонентов Bootstrap, можно применять дополнительные классы (.panel-primary
, .panel-success
, .panel-info
, .panel-warning
, .panel-danger
), которые выделяют её с помощью цвета. Таким образом, можно привлечь внимание пользователей.
<div> <div> <h4>Заголовок панели</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели</h4> </div> <div> Содержимое панели </div> </div>
Bootstrap — Панели с акцентными классами
Размещение таблиц и групповых списков внутри панелей
В панелях Twitter Bootstrap 3 можно размещать любые таблицы следующим образом:
<!-- Панель 1 --> <div> <div>Заголовок панели</div> <div> <p>. ..</p> </div> <!-- Таблица --> <table> ... </table> </div>
Bootstrap — Панель, содержащая текст и таблицу
При отсутствии содержимого панели, таблица примыкает к заголовку без отступа.
<div> <!-- Обычное содержимое панели --> <div>Panel heading</div> <!-- Таблица --> <table> ... </table> </div>
Bootstrap — Панель, содержащая таблицу
Групповые списки, тоже можно, аналогичным способом размещать внутри любой панели Bootstrap.
<div> <!-- Обычное содержимое панели --> <div>Товары</div> <div> Список наименований товаров, доступных в магазине. </div> <!-- Групповой список --> <div> <a href="#">Смартфоны <span>32</span></a> <a href="#">Ноутбуки <span>204</span></a> <a href="#">Планшеты <span>517</span></a> <a href="#">Компьютеры <span>71</span></a> </div> </div>
Bootstrap — Панель, содержащая список
Демострация компонента Panel
Навигационная панель.
Компоненты · Bootstrap. Версия v4.0.0
Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.
Как это работает
Вот что вам надо знать перед использованием навбара:
- Навбары требуют «обертки» из классов
.navbar
и.navbar-expand{-sm|-md|-lg|-xl}
для отзывчивости при «складывании»и классы , а также классы цветовых схем. - Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
- Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
- Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
- Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс
.d-print
в.navbar
. Смотри класс отображения. - Придайте им доступность использованием элемента
<nav>
, или, если используется менее специфический элемент – например<div>
: добавьтеrole="navigation"
в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.
Дальше вы увидите примеры и список поддерживаемых под-компонентов.
Поддерживаемые типы содержимого
В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:
.navbar-brand
для названия вашей компании, продукта или имени проекта..navbar-nav
для навигации полной высоты (включая выпадающие элементы)..navbar-toggler
для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации..form-inline
для любых органов контроля форм и действий с ними..navbar-text
для добавления вертикально центрированных строк текста..collapse.navbar-collapse
для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.
Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg
(большой).
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div aria-labelledby="navbarDropdown">
<a href="#">Action</a>
<a href="#">Another action</a>
<div></div>
<a href="#">Something else here</a>
</div>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
В этом примере использованы классы цвета bg-light
и спейсинга my-2
, my-lg-0
, mr-sm-0
, my-sm-0
.
Бренд
.navbar-brand
можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.
<!-- As a link -->
<nav>
<a href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav>
<span>Navbar</span>
</nav>
Добавление изображений к .navbar-brand
почти всегда потребует дополнительной стилизации CSS и классов.
<!-- Just an image -->
<nav>
<a href="#">
<img src="/assets/brand/bootstrap-solid.svg" alt="">
</a>
</nav>
<!-- Image and text -->
<nav>
<a href="#">
<img src="/assets/brand/bootstrap-solid. svg" alt="">
Bootstrap
</a>
</nav>
Навбар
Ссылки в навигации навбара сделаны на параметрах класса .nav
, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
Активные состояния – с классом .active
– нужны для индикации возможности применения текущей страницы напрямую к .nav-link
или их непосредственному «родителю» .nav-item
.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
И т. к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<div>
<a href="#">Home <span>(current)</span></a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Disabled</a>
</div>
</div>
</nav>
Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item
и .nav-link
, как в примере ниже.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Формы
Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс . form-inline
.
<nav>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</nav>
Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.
<nav>
<a>Navbar</a>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</nav>
Работают и формы ввода, также:
<nav>
<form>
<div>
<div>
<span>@</span>
</div>
<input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
Main button
Smaller button
<nav>
<form>
<button type="button">Main button</button>
<button type="button">Smaller button</button>
</form>
</nav>
Текст
Благодаря классу .navbar-text
навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.
Navbar text with an inline element
<nav>
<span>
Navbar text with an inline element
</span>
</nav>
Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.
<nav>
<a href="#">Navbar w/ text</a>
<button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
<span>
Navbar text with an inline element
</span>
</div>
</nav>
Цветовые схемы
Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color
. Выбирайте .navbar-light
для навбара со светлым фоном, или .navbar-dark
для навбара с темным фоном. Далее настраивайте их классами .bg-*
.
<nav>
<!-- Navbar content -->
</nav>
<nav>
<!-- Navbar content -->
</nav>
<nav>
<!-- Navbar content -->
</nav>
Контейнеры
Хотя это и не требуется, вы можете обернуть навбар в .container
для центрирования навбара на странице или добавить один навбар в .container
лишь для центрирования содержимого навбара с фиксированной позицией “top”.
<div>
<nav>
<a href="#">Navbar</a>
</nav>
</div>
Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами . navbar-expand{-sm|-md|-lg|-xl}
. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.
<nav>
<div>
<a href="#">Navbar</a>
</div>
</nav>
Размещение
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed
, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top
в <body>
).
Также обратите внимание, что .sticky-top
использует position: sticky
, которая не поддерживается полностью в каждом браузере.
<nav>
<a href="#">Default</a>
</nav>
<nav>
<a href="#">Fixed top</a>
</nav>
<nav>
<a href="#">Fixed bottom</a>
</nav>
<nav>
<a href="#">Sticky top</a>
</nav>
Отзывчивое поведение
Навбары могут использовать классы .navbar-toggler
, .navbar-collapse
и .navbar-expand{-sm|-md|-lg|-xl}
для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.
Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand
. Для навбаров, которые всегда скрываются, не добавляйте его.
Тогглер (кнопка разворачивания меню)
Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand
– они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.
Без показанного элемента класса .navbar-brand
, на самых маленьких брейкпойнтах:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<a href="#">Hidden brand</a>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
С «брендом», показанный слева, и тогглером — справа:
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
С тогглером слева и «брендом» справа:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<a href="#">Navbar</a>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
Внешнее содержимое
Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id
и data-target
– вам будет легко это сделать!
Collapsed content
Toggleable via the navbar brand.
<div>
<div>
<div>
<h5>Collapsed content</h5>
<span>Toggleable via the navbar brand.</span>
</div>
</div>
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
</nav>
</div>
Навигационная панель · Bootstrap на русском
Навигационная панель является простой оболочкой для позиционирования брендинг, навигация и другие элементы в заголовке краткое навигации. Это легко расширяемый и, с помощью нашего плагина крах, его можно легко интегрировать контент закадровый.
Содержание
Основы
Вот что вы должны знать перед началом работы с навигационной панелью:
- Navbar’у требуется задать класс
.navbar
и указать цветовую схему. - По-умолчанию Navbars и его содержание могут изменяться. Используйте контейнеры для ограничения их ширины.
- Используйте
.pull-*-left
и.pull-*-right
чтобы быстро выровнять компоненты. - Обеспечить доступность с помощью
<nav>
элемент или, если использовать более общий элемент, например<div>
добавитьrole="navigation"
для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.
Поддерживает содержимоe
Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:
.navbar-brand
для Вашей компании, продукта или название проекта.navbar-nav
для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков).navbar-toggler
для использования с нашими плагина крах и других навигация переключение поведения.
Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:
<nav>
<a href="#">Navbar</a>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
<form>
<input type="text" placeholder="Search">
<button type="submit">Search</button>
</form>
</nav>
Бренд
.navbar-brand
могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.
<nav>
<a href="#">Navbar</a>
</nav>
<nav>
<h2>Navbar</h2>
</nav>
Nav
Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav
базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav
.
<nav>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
И поскольку мы используем классы для наших навигаций, вы можете избежать на основе списка подходом целиком и полностью, если вам нравится.
<nav>
<div>
<a href="#">Home <span>(current)</span></a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">About</a>
</div>
</nav>
Цветовые схемы
Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color
утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.
Вот некоторые примеры, чтобы показать что мы имеем в виду.
<nav>
<!-- Навигационная панель содержимое -->
</nav>
<nav>
<!-- Навигационная панель содержимое -->
</nav>
<nav>
<!-- Навигационная панель содержимое -->
</nav>
Контейнеры
Хотя это не требуется, вы можете обернуть навигации в .container
, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.
<div>
<nav>
<a href="#">Navbar</a>
</nav>
</div>
<nav>
<div>
<a href="#">Navbar</a>
</div>
</nav>
Размещение
Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.
<nav>
<a href="#">Full width</a>
</nav>
<nav>
<a href="#">Fixed top</a>
</nav>
<nav>
<a href="#">Fixed bottom</a>
</nav>
Складной содержания
Наш плагин развал позволяет использовать <button>
или <a>
для переключения скрытый контент.
☰
Collapsed content
Toggleable via the navbar brand.
<nav>
<button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div>
<div>
<h5>Collapsed content</h5>
<span>Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-*
классы в сочетании с .navbar-toggler
. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.
<nav>
<button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div>
<a href="#">Responsive navbar</a>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
</nav>
Bootstrap — Панели — CoderLessons.com
В этой главе речь пойдет о панелях Bootstrap. Компоненты панели используются, когда вы хотите поместить свой компонент DOM в коробку. Чтобы получить базовую панель, просто добавьте класс .panel к элементу <div>. Также добавьте класс .panel-default к этому элементу, как показано в следующем примере —
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> </div>
Панель с заголовком
Есть два способа добавить заголовок панели:
Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.
Используйте любой <h2> — <h6> с классом .panel-title, чтобы добавить предварительно стилизованный заголовок.
Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.
Используйте любой <h2> — <h6> с классом .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"> <h4 class = "panel-title"> Panel With title </h4> </div> <div class = "panel-body"> Panel content </div> </div>
Панель с нижним колонтитулом
Вы можете добавить нижние колонтитулы на панели, оборачивая кнопки или вторичный текст в <div>, содержащий класс .panel-footer . Следующий пример демонстрирует это.
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> <div class = "panel-footer">Panel footer</div> </div>
Нижние колонтитулы панели не наследуют цвета и границы при использовании контекстных вариаций, так как они не должны находиться на переднем плане.
Панель Контекстные Альтернативы
Используйте классы контекстного состояния, такие как: панель-панель, панель-успех, панель-информация, панель-предупреждение, панель-опасность , чтобы сделать панель более значимой для конкретного контекста.
<div class = "panel panel-primary"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-success"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-info"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-warning"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-danger"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> </div>
Панель со столами
Чтобы получить таблицу без границ на панели, используйте класс .table на панели. Предположим, что есть <div>, содержащий .panel-body , и мы добавляем дополнительную границу к верхней части таблицы для разделения. Если <div> не содержит .panel-body , то компонент перемещается из заголовка панели в таблицу без прерывания.
Следующий пример демонстрирует это —
<div class = "panel panel-default"> <div class = "panel-heading"> <h4 class = "panel-title">Panel title</h4> </div> <div class = "panel-body"> This is a Basic panel </div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div> <div class = "panel panel-default"> <div class = "panel-heading">Panel Heading</div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div>
Панель с списком групп
Вы можете включить группы списков в любую панель. Создайте панель, добавив класс .panel к элементу <div>. Также добавьте класс .panel-default к этому элементу. Теперь в этой панели включить ваш список групп. Вы можете научиться создавать группы списков из главы Группы списков .
Bootstrap панели
В этой главе мы обсудим Bootstrap панели, монтажная панель для вставки в компонент DOM.
Вам просто нужно , чтобы получить базовую панель и добавьте.panel .panel-класспоумолчаниюв <div> элемент.
Ниже показано:
<div> <div> This is a Basic panel </div> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
название панели
Мы два больших способа добавить заголовок панели:
- Используйте класс.panel-заголовок можно просто добавить название вашего контейнера панели
- Используйте <h2> — элементы <H6> и использует.panel-название вашего класса , чтобы добавить заголовок заранее стиля.
Следующие примеры демонстрируют два различных подхода:
<div> <div> Panel heading without title </div> <div> Panel content </div> </div> <div> <div> <h4> Panel With title </h4> </div> <div> Panel content </div> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
Панель Сноска
Вы можете добавить сноски в панели, вам нужно только добавить.panel-колонтитуле в <div> элемент.Примерами могут служить следующие:
<div> <div> This is a Basic panel </div> <div>Panel footer</div> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
Обратите внимание, что панель не будет наследовать цвет от сноске со значимой альтернативы, так как она не находится в передней части содержания.
Предупреждение панели с цветом
Вы можете использовать панель первичной, панель-успеха, панель-инфо, панель предупреждения, классы панельного опасности для установки панели с сигнальными цветами. Примерами могут служить следующие:
<div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> </div> <div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> </div> <div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> </div> <div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> </div> <div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
С помощью панели стола
Мы можем использовать .table класс на панели, чтобы установить таблицу без границ. Вы можете определить текстовое содержание общего количества внешних таблиц по классам .panel тела. Примерами могут служить следующие:
<div> <div> <h4>Panel title</h4> </div> <div> This is a Basic panel </div> <table> <th>Product</th><th>Price </th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table> </div> <div> <div>Panel Heading</div> <table> <th>Product</th><th>Price </th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
Со списком групп панели
Мы можем быть включены в любой список группы панели путем добавления.panel и .panel-класспоумолчаниюв <div> элемент для создания панели, а также добавить список в панели, примеры являются следующие:
<div> <div>Panel heading</div> <div> <p>This is a Basic panel content. This is a Basic panel content. This is a Basic panel content.This is a Basic panel content. This is a Basic panel content.This is a Basic panel content. This is a Basic panel content. </p> </div> <ul> <li>Free Domain Name Registration</li> <li>Free Window Space hosting</li> <li>Number of Images</li> <li>24*7 support</li> <li>Renewal cost per year</li> </ul> </div>
Просмотр онлайн — примеры
Приведенные выше примеры показывают эффект следующим образом:
Компоненты Bootstrap
Компоненты Bootstrap
Последнее обновление: 31.10.2015
Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы.
Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/.
Рассмотрим вкратце некоторые из них.
Навигационные панели
Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице
_Layout:
<div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" }) </div> <div> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div>
И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:
Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top.
Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom
И также в объявлении блока навигации используется класс navbar-inverse
, который инвертирует цвета по умолчанию. Вместо этого класса
мы могли бы использовать navbar-default
, тогда в этом случае у нас бы было меню стандартных светлых тонов.
Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации.
По умолчанию используется класс navbar-nav
, но мы можем использовать и другие возможности.
Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:
<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>
даст такой эффект:
Еще один вариант создания панели ссылок представляет класс nav-pills:
<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>
А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:
<ul> ............................... </ul>
Пагинация
Класс pagination позволяет создать панель ссылок в виде постраничной навигации:
<ul> <li><a href="#">«</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="#">»</a></li> </ul>
Заглавия
Для создания ссылок заголовков применяется класс breadcrumb:
<ul> <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>
Кнопки
Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:
<div role="group"> <button type="button">Left</button> <button type="button">Middle</button> <button type="button">Right</button> </div>
Кнопка с выпадающим списком
Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:
<div> <button type="button" data-toggle="dropdown"> Язык программирования <span></span> </button> <ul role="menu"> <li><a href="#">JavaScript</a></li> <li><a href="#">C#</a></li> <li><a href="#">VB.NET</a></li> <li></li> <li><a href="#">Java</a></li> </ul> </div>
Метки
Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать
дополнительные классы меток, чтобы конкретизировать тип сообщения:
<span>Default</span> <span>Primary</span> <span>Success</span> <span>Info</span> <span>Warning</span> <span>Danger</span>
Похожую функциональность предлагает класс alert:
<div>Задача успешно завершена</div> <div>Дополнительная информация</div> <div>Внимание!</div> <div>Опасно!</div>
Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты
может легко адаптировать и приспособить под конкретные устройства.
Загрузочные панели
Панели
Панель в bootstrap — это рамка с рамкой и некоторым отступом вокруг ее содержимого:
Панели создаются с помощью класса .panel
, а содержимое внутри панели имеет
.панель-кузов
класс:
Пример
Попробуй сам »
Класс .panel-default
используется для стилизации цвета
панель.См. Последний пример на этой странице для получения дополнительных контекстных классов.
Заголовок панели
Заголовок панели
Содержание панели
Класс .panel-heading
добавляет заголовок к панели:
Пример
Попробуй сам »
Нижний колонтитул панели
Модель .Panel-footer
класс добавляет нижний колонтитул к панели:
Пример
Попробуй сам »
Группа панелей
Чтобы сгруппировать несколько панелей вместе, оберните
.panel-group
вокруг них. Класс .panel-group
очищает нижнее поле каждой панели:
Пример
Попробуй сам »
Панели с контекстными классами
Чтобы раскрасить панель, используйте контекстные классы (.Panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
или .panel-dangerous
):
Пример
Панель с классом по умолчанию
Содержание панели
Панель с панелью первичного класса
Содержание панели
Панель с панелью класса успешности
Содержание панели
Панель с классом информации панели
Содержание панели
Панель с панелью-предупреждением класса
Содержание панели
Панель с панелью класса опасности
Содержание панели
Попробуй сам »
Bootstrap 4 Panels — примеры и руководство.Базовое и расширенное использование
Компиляция и настройка
Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.
Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.
Руководство по компиляции и настройке
Карта зависимостей файлов SCSS в MDBootstrap:
Легенда:
'->' означает 'требуется'
Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'
'none' означает 'этот компонент не требует ничего, кроме файлов ядра'
Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.
Все компоненты PRO требуют 'pro / _variables.scss 'файл
scss /
|
| - ядро /
| |
| | - бутстрап /
| | | - _functions.scss
| | | - _variables.scss
| |
| | - _colors.scss
| | - _global.scss
| | - _helpers.scss
| | - _masks.scss
| | - _mixins.scss
| | - _typography.scss
| | - _variables.scss
| | - _waves.scss
|
| - бесплатно /
| | - _animations-basic.scss -> нет
| | - _animations-extended.scss -> _animations-basic.scss
| | - _buttons.scss -> нет
| | - _cards.scss -> нет
| | - _dropdowns.scss -> нет
| | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
| | - _navbars.scss -> нет
| | - _pagination.scss -> нет
| | - _badges.scss -> нет
| | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
| | - _carousels.scss ->
| | - _forms.scss -> нет
| | - _msc.scss -> нет
| | - _footers.scss нет (PRO :)
| | - _list-group.scss -> нет
| | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
| | - _depreciated.scss
|
| - pro /
| |
| | - сборщик /
| | | - _default.scss -> нет
| | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
| | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
| |
| | - разделы /
| | | - _templates.scss -> _sidenav.scss
| | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
| | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
| | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
| | | - _magazine.scss -> _badges.scss
| | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
| | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
| |
| | - _variables.scss
| | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
| | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
| | - _tabs.scss -> _cards.scss
| | - _cards.scss -> бесплатно / _cards.scss
| | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
| | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
| | - _scrollspy.scss -> нет
| | - _lightbox.scss -> нет
| | - _chips.scss -> нет
| | - _msc.scss -> нет
| | - _forms.scss -> нет
| | - _radio.scss -> нет
| | - _checkbox.scss -> нет
| | - _material-select.scss -> нет
| | - _switch.scss -> нет
| | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
| | - _range.scss -> нет
| | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
| | - _autocomplete.scss -> бесплатно / _forms.scss
| | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
| | - _parallax.scss -> нет
| | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
| | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
| | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
| | - _steppers.scss -> бесплатно / _buttons.scss
| | - _blog.scss -> нет
| | - _toasts.scss -> бесплатно / _buttons.scss
| | - _animations.scss -> нет
| | - _charts.scss -> нет
| | - _progress.scss -> нет
| | - _scrollbar.scss -> нет
| | - _skins.scss -> нет
| | - _устарело.scss
|
`- _custom-skin.scss
`- _custom-styles.scss
`- _custom-variables.scss
`- mdb.scss
Карта зависимостей модулей JavaScript в MDBootstrap:
Легенда:
'->' означает 'требуется'
Все файлы требуют jQuery и bootstrap.js
js /
├── dist /
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── Chips.js
│ ├── collapsible.js -> vendor / velocity.js
│ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js -> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js -> vendor / velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src /
│ ├── buttons.js
│ ├── карты.js
│ ├── character-counter.js
│ ├── Chips.js
│ ├── collapsible.js -> vendor / velocity.js
│ ├── dropdown.js -> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js -> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js -> vendor / velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
│ └── smooth-scroll.js
└── продавец /
├── аддоны /
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── extended-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js -> vendor / jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js -> vendor / hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js -> vendor / picker.js
├── picker.js
├── picker-time.js -> vendor / picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Компоненты
· Bootstrap
Доступные глифы
Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Глификоны Халфлинги обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно.В качестве благодарности мы просим вас по возможности включать обратную ссылку на Glyphicons.
Как использовать
По соображениям производительности для всех значков требуется базовый класс и индивидуальный класс значков. Чтобы использовать, поместите следующий код где угодно. Обязательно оставьте пространство между значком и текстом для правильного заполнения.
Не смешивать с другими компонентами
Классы значков нельзя напрямую комбинировать с другими компонентами. Их нельзя использовать вместе с другими классами в одном элементе.Вместо этого добавьте вложенный
и примените классы значков к
.
Только для использования с пустыми элементами
Классы значков следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
Изменение расположения шрифта значка
Bootstrap предполагает, что файлы шрифтов значка будут расположены в каталоге ../fonts/
относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:
- Измените переменные
@ icon-font-path
и / или@ icon-font-name
в исходных файлах Less. - Используйте параметр относительных URL-адресов, предоставляемый компилятором Less.
- Измените пути
url ()
в скомпилированном CSS.
Используйте тот вариант, который лучше всего подходит для ваших конкретных условий разработки.
Доступные значки
Современные версии вспомогательных технологий объявляют контент, созданный с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и сбивающего с толку вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью атрибута aria-hidden = "true"
.
Если вы используете значок для передачи смысла (а не только как декоративный элемент), убедитесь, что это значение также передается вспомогательным технологиям — например, добавьте дополнительный контент, визуально скрытый с помощью .sr-only
класс.
Если вы создаете элементы управления без другого текста (например,
, который содержит только значок), вы всегда должны предоставлять альтернативный контент для определения цели элемента управления, чтобы он был понятен пользователям. вспомогательных технологий.В этом случае вы можете добавить атрибут aria-label
к самому элементу управления.
Примеры
Используйте их в кнопках, группах кнопок для панели инструментов, навигации или вводимых форм.
Значок, используемый в предупреждении, чтобы указать, что это сообщение об ошибке, с дополнительным .sr-only
текст, чтобы передать эту подсказку пользователям вспомогательных технологий.
Ошибка: введите действительный адрес электронной почты
Ошибка:
Введите действительный адрес электронной почты
Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript.
Пример
Оберните триггер раскрывающегося списка и раскрывающееся меню в .раскрывающийся список
или другой элемент, объявляющий position: relative;
. Затем добавьте HTML-код меню.
Раскрывающиеся меню можно изменить, чтобы развернуть вверх (а не вниз), добавив .dropup
к родителю.
Выравнивание
По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте .dropdown-menu-right
к .dropdown-menu
, чтобы выровнять раскрывающееся меню по правому краю.
Может потребоваться дополнительное позиционирование
Выпадающие списки автоматически позиционируются с помощью CSS в пределах обычного потока документа. Это означает, что выпадающие списки могут быть обрезаны родителями с определенными свойствами overflow
или отображаться за пределами области просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.
Устарело
.pull-right
alignment
Начиная с v3.1.0 мы устарели .pull-right
в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right
. Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left
.
...
Добавьте заголовок, чтобы пометить разделы действий в любом раскрывающемся меню.
...
- Раскрывающийся заголовок
...
Разделитель
Добавьте разделитель для разделения последовательностей ссылок в раскрывающемся меню.
...
-
...
Отключенные пункты меню
Добавьте .disabled
к
Сгруппируйте серию кнопок вместе в одну строку с группой кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок.
Обеспечьте правильную роль
и предоставьте метку
Чтобы вспомогательные технологии, такие как программы чтения с экрана, передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут роли
. Для групп кнопок это будет role = "group"
, а панели инструментов должны иметь role = "toolbar"
.
Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами
) или раскрывающийся список.
Кроме того, группам и панелям инструментов следует давать явные метки, поскольку в противном случае большинство вспомогательных технологий не будут их объявлять, несмотря на наличие правильного атрибута role
. В приведенных здесь примерах мы используем aria-label
, но также можно использовать альтернативы, такие как aria-labelledby
.
Базовый пример
Оберните серию кнопок .btn
в .btn-group
.
Объедините наборы из
для более сложных компонентов.
...
...
...
Размер
Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .btn-group- *
к каждой .btn-group
, в том числе при вложении нескольких групп.
Левый Средний Правый
Левый Средний Правый
Левый Средний Правый
Левый Средний Правый
...
...
...
...
Nesting
Поместите .btn-group
в другую .btn-group
, когда вам нужно раскрывающееся меню. меню смешано с рядом кнопок.
Вертикальное изменение
Сделать так, чтобы набор кнопок отображался вертикально, а не горизонтально. Выпадающие меню с разделенными кнопками здесь не поддерживаются.
Кнопка Кнопка Кнопка Кнопка
...
Группы кнопок по ширине
Сделайте так, чтобы группа кнопок растянулась с одинаковыми размерами, чтобы охватить всю ширину ее родительского элемента. Также работает с раскрывающимися списками кнопок в группе кнопок.
Обработка границ
Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно display: table-cell
), границы между ними удваиваются.В обычных группах кнопок margin-left: -1px
используется для наложения границ вместо их удаления. Однако поле
не работает с display: table-cell
. В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.
IE8 и границы
Internet Explorer 8 не отображает границы на кнопках в группе кнопок по ширине, будь то элементы
или
.Чтобы обойти это, оберните каждую кнопку в другую .btn-group
.
См. # 12476 для получения дополнительной информации.
С элементами
Просто оберните серию из .btn
s в .btn-group.btn-group-justified
.
...
Ссылки, действующие как кнопки
Если элементы
используются в качестве кнопок — запускающих функциональные возможности на странице, а не для перехода к другому документу или разделу на текущей странице — они также должны получить соответствующую роль role = "button"
.
с элементами
Чтобы использовать группы кнопок с выравниванием по ширине с элементами
, вы должны заключить каждую кнопку в группу кнопок . Большинство браузеров неправильно применяют наш CSS для обоснования к
элементам, но, поскольку мы поддерживаем раскрывающиеся списки кнопок, мы можем обойти это.
Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в .btn-group
и обеспечение правильной разметки меню.
Зависимость подключаемого модуля
Для раскрывающегося списка кнопок требуется, чтобы подключаемый модуль раскрывающегося меню был включен в вашу версию Bootstrap.
Выпадающие списки с одной кнопкой
Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.
Раскрывающиеся списки с разделенными кнопками
Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками с теми же изменениями разметки, только с отдельной кнопкой.
Размер
Выпадающие кнопки работают с кнопками любого размера.
...
...
...
Вариант Dropup
Запуск раскрывающихся меню над элементами путем добавления .dropup
к родительскому элементу.
Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового
.Используйте .input-group
с .input-group-addon
или .input-group-btn
для добавления или добавления элементов к одному .form-control
.
Текстовый
только
s
Избегайте использования здесь элементов
, поскольку они не могут быть полностью стилизованы в браузерах WebKit.
Избегайте использования здесь элементов
, поскольку их атрибут строк
в некоторых случаях не будет соблюдаться.
Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки
При использовании всплывающих подсказок или всплывающих окон на элементах в пределах .input-group
, вам нужно будет указать контейнер option : 'body'
, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна).
Не смешивать с другими компонентами
Не смешивать группы форм или классы столбцов сетки напрямую с группами ввода. Вместо этого вложите группу ввода внутрь группы формы или связанного с сеткой элемента.
Всегда добавляйте метки
Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода.Для этих групп ввода убедитесь, что любые дополнительные метки или функции передаются вспомогательным технологиям.
Точный метод, который будет использоваться (видимые элементы
,
элементов, скрытые с использованием класса .sr-only
, или использование aria-label
, aria-labelledby
, aria, описанный
, title
или placeholder
attribute), и то, какая дополнительная информация потребуется передать, будет зависеть от точного типа реализуемого вами интерфейсного виджета.Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.
Базовый пример
Разместите одну надстройку или кнопку с обеих сторон от входа. Вы также можете разместить его по обе стороны от входа.
Мы не поддерживаем несколько надстроек ( .input-group-addon
или .input-group-btn
) на одной стороне.
Мы не поддерживаем несколько элементов управления формой в одной группе ввода.
@
@example.com
$
0,00
https://example.com/users/
Размер
Добавьте классы относительного размера формы в саму .input-group
, и содержимое внутри автоматически изменит размер — нет необходимости повторять классы размеров элемента управления формы для каждого элемента.
@
@
@
Флажки и радиоаддоны
Поместите любой чекбокс или переключатель в аддон группы ввода вместо текста.
Дополнения кнопок
Кнопки в группах ввода немного отличаются и требуют одного дополнительного уровня вложенности. Вместо .input-group-addon
вам нужно будет использовать .input-group-btn
для переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить.
Кнопки с раскрывающимися списками
Сегментированные кнопки
Несколько кнопок
Хотя у вас может быть только одна надстройка на каждой стороне, у вас может быть несколько кнопок внутри одного .Вход-группа-БТН
.
Навигационные системы, доступные в Bootstrap, имеют общую разметку, начиная с базового класса .nav
, а также общие состояния. Поменяйте местами классы модификаторов для переключения между стилями.
Для использования навигации для панелей вкладок требуется плагин вкладок JavaScript
Для вкладок с областями вкладок необходимо использовать плагин JavaScript вкладок.Для разметки также потребуются дополнительные атрибуты , роль,
и ARIA — подробности см. В примере разметки плагина.
Сделайте навигацию доступной для навигации
Если вы используете навигацию для предоставления панели навигации, обязательно добавьте role = "navigation"
в наиболее логичный родительский контейнер
или оберните
элемент по всей навигации. Не добавляйте роль к самому
, так как это помешает ассистивным технологиям объявить его реальным списком.
Tabs
Обратите внимание, что для класса .nav-tabs
требуется базовый класс .nav
.
Pills
Возьмите тот же HTML, но используйте вместо него .nav-pills
:
Таблетки также можно штабелировать вертикально.Просто добавьте .nav-stacked
.
...
По ширине
С легкостью делайте вкладки или таблетки равной ширине их родительской на экранах шире 768 пикселей с .
с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
Safari и адаптивная навигация по ширине
Начиная с версии 9.1.2, в Safari обнаружена ошибка, из-за которой изменение размера браузера по горизонтали вызывает ошибки рендеринга в обоснованной навигации, которые очищаются при обновлении.Эта ошибка также проявляется в примере обоснованной навигации.
...
...
Отключенные ссылки
Для любого компонента навигации (вкладки или таблетки) добавьте .disabled
для серых ссылок и отсутствия эффектов наведения .
Не влияет на функциональность ссылки
Этот класс изменяет только внешний вид
, но не его функциональность. Используйте собственный JavaScript, чтобы отключить ссылки здесь.
...
- Отключенная ссылка
...
Использование раскрывающихся списков
Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript.
Вкладки с раскрывающимися списками
...
-
Раскрывающееся меню
...
...
Таблетки с выпадающими списками
...
-
Раскрывающееся меню
...
...
Панель навигации по умолчанию
Панели навигации — это адаптивные метакомпоненты, которые служат заголовками навигации для вашего приложения или сайта.Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
Переполнение содержимого
Поскольку Bootstrap не знает, сколько места требуется содержимому на панели навигации, у вас могут возникнуть проблемы с переносом содержимого во вторую строку. Чтобы решить эту проблему, вы можете:
- Уменьшить количество или ширину элементов навигационной панели.
- Скрыть определенные элементы навигационной панели при определенных размерах экрана с помощью гибких служебных классов.
- Измените точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную
@ grid-float-breakpoint
или добавьте свой собственный медиа-запрос.
Требуется подключаемый модуль JavaScript
Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах .navbar-collapse
.
Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания.
Изменение свернутой точки останова мобильной навигационной панели
Навигационная панель сворачивается в вертикальное мобильное представление, когда область просмотра уже @ grid-float-breakpoint
, и расширяется в горизонтальное немобильное представление, когда область просмотра составляет не менее @ grid-float-breakpoint
шириной. Отрегулируйте эту переменную в источнике Less, чтобы контролировать, когда панель навигации сворачивается / разворачивается. Значение по умолчанию — 768 пикселей
(самый маленький «маленький» или «планшетный» экран).
Сделайте панели навигации доступными
Обязательно используйте элемент