Introducción a los paneles Bootstrap
El contenido de los datos debe mostrarse limpio, ordenado y adecuado. Tener espacio en el contenido, encabezado y pie de página coloridos y borde para el contenido se ve atractivo. El contenido atractivo es fácil de leer y comprender. El panel Bootstrap funciona exactamente igual para el contenido. Se utiliza para el cuadro de borde para contenido con relleno específico. Funciona para contenido, encabezado, pie de página y también en un color diferente. El trabajo básico del panel de arranque utiliza la clase ".panel" en un elemento div, con esta clase también se requiere la clase ".panel-default".
Ejemplo:
THIS IS A DEFAULT PANEL
Salida:
Tipos de paneles Bootstrap
Los paneles se clasifican con diferentes clasificaciones y objetivos, que es el siguiente. El contenido tiene una parte de encabezado, cuerpo y pie de página. Para crear contenido elegante y estilo con un propósito, el panel presenta estas categorías:
1. Panel con el encabezado
En el encabezado del panel, el cuadro de borde rodeado de encabezado de contenido y cuerpo de contenido con relleno de formato. Encabezado panel add class = "panel-header" y content body add class = "panel-body".
Código:
Content Heading
Content Body
Salida:
Puede agregar la clase = "panel-title" para modificar el encabezado del contenido por separado. Esta clase se usa raramente porque la clase de encabezado del panel modifica todos los estilos por sí mismos.
2. Panel con pie de página
En el pie de página del panel, el cuadro de borde rodeado de pie de página de contenido y el cuerpo de contenido con relleno de formato. Panel de pie de página add class = "panel-footer" y content body add class = "panel-body".
Código:
Content Body
Content Footer
Salida:
3. Grupo de paneles
Este panel se utiliza para unir los muchos paneles a la vez. Elimina el margen del panel inferior y forma un grupo de paneles.
Código:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Salida:
4. Paneles con clases contextuales
Para obtener un panel de arranque contextual más significativo, diseñe diferentes clases para el contexto. Cada encabezado de clase contextual tiene un color diferente para mostrar el impacto del contexto. Estas clases de panel están a continuación con sus ejemplos y resultados,
- .panel-default: este es el panel predeterminado utilizado para el contexto.
Código:
Content Heading
Content Body
Salida:
- .panel-primary: esta clase utilizada para el contexto primario significa contextos principales.
Código:
Content Heading with panel-primary class /div>
Content Body2
Salida:
- .panel-success: esta clase se usa cuando algún contexto tiene el significado de éxito.
Código:
Content Heading with panel-success class
Content Body3
Salida:
- .panel-info: esta clase se usa cuando algún contexto tiene información.
Código:
Content Heading with panel-info class
Content Body4
Salida:
- .panel-warning: esta clase se usa cuando algún contexto tiene el significado de una señal de advertencia.
Código:
Content Heading with panel-warning class
Content Body5
Salida:
- .panel-danger: esta clase se usa cuando algún contexto tiene el significado de peligro y quiere indicarlo.
Código:
Content Heading with panel-danger class
Content Body6
Salida:
Ejemplos de paneles Bootstrap
Los siguientes son los ejemplos del panel de arranque explicados en detalle:
Ejemplo # 1: Panel de Bootstrap simple
Este es un ejemplo de panel predeterminado de arranque simple donde se coloca el encabezado del panel, el pie de página del panel y el cuerpo de la descripción.
Código:
Content Heading
Content Body
Panel body for context
Content Footer
Salida:
Ejemplo # 2: Panel Bootstrap con tabla
- En este ejemplo, obtenga el resultado de la tabla utilizando el panel de arranque. La mesa se puede modificar para que luzca elegante. El siguiente ejemplo y salida es la tabla que usa el panel de arranque.
- Este ejemplo necesita una clase de tabla para hacer una tabla. Hace que la clase de encabezado principal y de panel mantenga un nombre de tabla.
- La clase de mesa viene con una clase de cuerpo de panel. En esta tabla, se colocan el encabezado y los datos de la tabla.
Código:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
