65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
|
---
|
||
|
|
title: Panels
|
||
|
|
localeTitle: Painéis
|
||
|
|
---
|
||
|
|
## Painéis
|
||
|
|
|
||
|
|
A estrutura do Bootstrap fornece um recurso chamado painéis. Um painel é uma caixa que possui um título estilizado e, em seguida, um corpo que permite exibir informações de maneira organizada, por meio de um conjunto de um ou mais painéis.
|
||
|
|
|
||
|
|
#### Como usar:
|
||
|
|
|
||
|
|
Para usar os Painéis de Bootstrap, você adiciona um `<div>` a uma classe para o seu tipo de painel ( `panel panel-default` de painel de painel de classe ou algo semelhante, consulte os exemplos de painel para obter mais informações) e duas tags `<div>` aninhadas, uma para o título ( `panel panel-heading` classe) e um para o corpo ( `panel panel-body` classe). Você pode achar que o exemplo de código é mais fácil de entender do que uma explicação por escrito.
|
||
|
|
|
||
|
|
**Exemplo de código**
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Exemplos de painéis:
|
||
|
|
|
||
|
|
Este é um conjunto de exemplos que mostra cada tipo de painel. A classe CSS é exibida acima de cada exemplo.
|
||
|
|
|
||
|
|
`panel panel-default`
|
||
|
|
|
||
|
|
Padrão do painel
|
||
|
|
|
||
|
|
Este é um painel com o estilo de painel padrão.
|
||
|
|
|
||
|
|
`panel panel-primary`
|
||
|
|
|
||
|
|
Painel Primário
|
||
|
|
|
||
|
|
Este é um painel com o estilo do painel principal.
|
||
|
|
|
||
|
|
`panel panel-success`
|
||
|
|
|
||
|
|
Sucesso do Painel
|
||
|
|
|
||
|
|
Este é um painel com o estilo de painel de sucesso.
|
||
|
|
|
||
|
|
`panel panel-info`
|
||
|
|
|
||
|
|
Informações do painel
|
||
|
|
|
||
|
|
Este é um painel com o estilo do painel de informações.
|
||
|
|
|
||
|
|
`panel panel-warning`
|
||
|
|
|
||
|
|
Aviso do Painel
|
||
|
|
|
||
|
|
Este é um painel com o estilo do painel de aviso.
|
||
|
|
|
||
|
|
`panel panel-danger`
|
||
|
|
|
||
|
|
Perigo do painel
|
||
|
|
|
||
|
|
Este é um painel com o estilo do painel de perigo.
|
||
|
|
|
||
|
|
### Mais Informações
|
||
|
|
|
||
|
|
* [Documentação suspensa de bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/)
|