65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
---
|
|
title: Panels
|
|
localeTitle: Los paneles
|
|
---
|
|
## Los paneles
|
|
|
|
El marco de Bootstrap le proporciona una característica llamada paneles. Un panel es un cuadro que tiene un encabezado con estilo y luego un cuerpo que le permite mostrar información de manera organizada, a través de un conjunto de uno o más paneles.
|
|
|
|
#### Cómo utilizar:
|
|
|
|
Para usar Bootstrap Panels, agregue un `<div>` con una clase para su tipo de panel (panel de clase `panel panel-default` o algo similar, vea los ejemplos del panel para obtener más información) y luego dos etiquetas `<div>` anidadas, una para el encabezado ( `panel panel-heading` clase `panel panel-heading` ) y uno para el cuerpo ( `panel panel-body` clase `panel panel-body` ). Puede encontrar que el Ejemplo de Código es más fácil de entender que una explicación por escrito.
|
|
|
|
**Ejemplo 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>
|
|
```
|
|
|
|
#### Ejemplos de paneles:
|
|
|
|
Este es un conjunto de ejemplos que muestra cada tipo de panel. La clase CSS se muestra sobre cada ejemplo.
|
|
|
|
`panel panel-default`
|
|
|
|
Panel por defecto
|
|
|
|
Este es un panel con el estilo de panel predeterminado.
|
|
|
|
`panel panel-primary`
|
|
|
|
Panel primario
|
|
|
|
Este es un panel con el estilo del panel primario.
|
|
|
|
`panel panel-success`
|
|
|
|
Panel de exito
|
|
|
|
Este es un panel con el estilo de panel de éxito.
|
|
|
|
`panel panel-info`
|
|
|
|
Información del panel
|
|
|
|
Este es un panel con el estilo de panel de información.
|
|
|
|
`panel panel-warning`
|
|
|
|
Advertencia del panel
|
|
|
|
Este es un panel con el estilo de panel de advertencia.
|
|
|
|
`panel panel-danger`
|
|
|
|
Panel de peligro
|
|
|
|
Este es un panel con el estilo de panel de peligro.
|
|
|
|
### Más información
|
|
|
|
* [Documentación desplegable de Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/) |