65 lines
2.5 KiB
Markdown
65 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Panels
|
|||
|
|
localeTitle: Панели
|
|||
|
|
---
|
|||
|
|
## Панели
|
|||
|
|
|
|||
|
|
Структура Bootstrap предоставляет вам функцию, называемую панелями. Панель - это поле, в котором есть стилизованный заголовок, а затем тело, которое позволяет отображать информацию организованным образом через набор из одной или нескольких панелей.
|
|||
|
|
|
|||
|
|
#### Как использовать:
|
|||
|
|
|
|||
|
|
Чтобы использовать панели Bootstrap, вы добавляете `<div>` с классом для вашего типа панели ( `panel panel-default` или что-то подобное, см. Примеры панели для получения дополнительной информации.), А затем два вложенных `<div>` , один для заголовка ( `panel panel-heading` класса) и один для корпуса ( `panel panel-body` ). Вы можете обнаружить, что пример кода легче понять, чем письменное объяснение.
|
|||
|
|
|
|||
|
|
**Пример кода**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="panel panel-primary">
|
|||
|
|
<div class="panel panel-heading">Panel Primary</div>
|
|||
|
|
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Примеры панелей:
|
|||
|
|
|
|||
|
|
Это набор примеров, показывающих каждый тип панели. Класс CSS отображается над каждым примером.
|
|||
|
|
|
|||
|
|
`panel panel-default`
|
|||
|
|
|
|||
|
|
По умолчанию
|
|||
|
|
|
|||
|
|
Это панель с панелью по умолчанию.
|
|||
|
|
|
|||
|
|
`panel panel-primary`
|
|||
|
|
|
|||
|
|
Основная панель
|
|||
|
|
|
|||
|
|
Это панель с основным стилем панели.
|
|||
|
|
|
|||
|
|
`panel panel-success`
|
|||
|
|
|
|||
|
|
Успех группы
|
|||
|
|
|
|||
|
|
Это панель с стилем панели успеха.
|
|||
|
|
|
|||
|
|
`panel panel-info`
|
|||
|
|
|
|||
|
|
Информация о панели
|
|||
|
|
|
|||
|
|
Это панель с типом информационной панели.
|
|||
|
|
|
|||
|
|
`panel panel-warning`
|
|||
|
|
|
|||
|
|
Предупреждение панели
|
|||
|
|
|
|||
|
|
Это панель с типом панели предупреждения.
|
|||
|
|
|
|||
|
|
`panel panel-danger`
|
|||
|
|
|
|||
|
|
Панельная опасность
|
|||
|
|
|
|||
|
|
Это панель с стилем панели опасности.
|
|||
|
|
|
|||
|
|
### Больше информации
|
|||
|
|
|
|||
|
|
* [Выпадающая документация Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/)
|