48.8 Bootstrap en Dash
Para mejorar la apariencia de los tableros de control desarrollados con Dash se puede usar Bootstrap, un framework muy popular que facilita la creación de sitios web atractivos y adaptables (responsive). Dash permite integrar Bootstrap de manera sencilla a través del módulo dash-bootstrap-components (DBC).
Bootstrap es un conjunto de estilos CSS y componentes HTML predefinidos que permiten crear interfaces elegantes y consistentes sin necesidad de diseñar cada elemento desde cero. Por ejemplo, ofrece botones, menús desplegables, tarjetas, barras de navegación, entre otros, todos con estilos preconstruidos. Es utilizado no sólo en Dash, sino también en otros paradigmas.
Para usar Bootstrap en Dash, se requiere instalar el módulo dash-bootstrap-components. En la terminal, escribe:
pip install dash-bootstrap-components
Luego, se puede importar y especificar un tema visual (theme) desde un CDN, por ejemplo:
Y se añade en la creación de la aplicación:
También funciona con JupyterDash:
Bootstrap tiene muchos temas visuales que se pueden usar cambiando el valor de dbc.themes.THEME_NAME. Algunos ejemplos:
dbc.themes.BOOTSTRAP (tema clásico)
dbc.themes.CERULEAN
dbc.themes.CYBORG (tema oscuro)
dbc.themes.LUX
dbc.themes.MINTY
dbc.themes.SLATE (tema oscuro)
dbc.themes.SANDSTONE
dbc.themes.SOLAR
Se pueden explorar todos los temas en: Explora temas Bootstrap
Componentes útiles de Bootstrap
Los componentes más comunes que ofrece dash-bootstrap-components y que puede usar en sus Dashboards incluyen:
| Componente | Función principal |
|---|---|
| dbc.Row / dbc.Col | Estructura de grillas para diseño adaptable. |
| dbc.Card | Tarjetas con encabezado, cuerpo, imagen, etc. |
| dbc.Alert | Mensajes visuales de alerta. |
| dbc.Button | Botones con estilos integrados. |
| dbc.Navbar | Barras de navegación superiores. |
| dbc.Modal | Ventanas emergentes. |
| dbc.Tooltip | Información adicional al pasar el cursor. |
Por ejemplo, para crear una interfaz con dos columnas de 50% cada una:
Ejemplo simple con Bootstrap
Este ejemplo genera un tablero básico con dos tarjetas visualmente agradables.
Recursos adicionales