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/) |