Cómo utilizar el arranque
El estilo de panel es uno de los estilos que se pueden utilizar en muchas situaciones, como la barra lateral de un blog, el tablón de anuncios de una web corporativa, la lista de columnas, etc.
Además del contenido, el estilo del panel también tiene un encabezado de panel para agregar un título. Veamos cómo usar el estilo del panel Bootstrap en este artículo.
Estilo básico del panel Bootstrap
También es muy fácil llamar directamente al estilo del panel. Solo necesitas usar el siguiente código para lograrlo:
. lt; div class="panel panel -default"gt; div class="panel-body"gt; Ejemplo de panel básico lt;/divgt;/divgt; El contenido forma parte del estilo del panel, pero no. Agregar un encabezado es adecuado para el contenido del panel que no requiere un encabezado.
Estilo de panel Bootstrap con título
El estilo de panel mencionado anteriormente no tiene título, lo cual no es suficiente en algunos casos, por lo que el panel Bootstrap también proporciona un estilo de panel con título. , veamos cómo usarlo:
lt; div class="panel-default"gt; div class="panel-heading"gt; "gt；Panel titlelt;/h3gt;lt;/divgt;lt;div class="panel-body"gt;Panel contentlt;/divgt;lt;/divgt;
La parte anterior El código es La estructura de panel más estándar con títulos para adaptarse a los dispositivos de lectura y los elementos de optimización de motores de búsqueda SEO, es mejor colocar los títulos en etiquetas h1-h5.
Panel Bootstrap con estilo de nota al pie
Si algún texto explicativo no se puede expresar bien en el título del panel, puede explicarlo en forma de nota al pie. El panel Bootstrap también proporciona esta nota al pie. estilo:
lt; div class="panel-default"gt; div class="panel-body"gt; contenido del panellt; gt; panel footerlt;/divgt;lt;/divgt;
Seleccionar títulos o pies de página a través de la relación primaria y secundaria es la clave para hacer un buen uso de los componentes del panel.
Estilos significativos de los paneles Bootstrap
Al igual que otros componentes de Bootstrap, los estilos de los paneles Bootstrap también tienen estilos significativos. Al hacer referencia a estos estilos, las funciones del panel se pueden mostrar de forma intuitiva. los mismos colores y nombres de estilo:
lt;div class="panel panel-primary"gt;Panel principal stylelt;/divgt;div class="panel panel-success" "gt;Panel de éxito stylelt;/divgt;lt;div class="panel panel-info"gt;Panel de información stylelt;/divgt;lt;div class="panel panel-warning"gt;Panel de advertencia stylelt; "panel panel-danger"gt; Danger panel stylelt;
Panel Bootstrap combinado con tabla
Si necesita introducirlo en el estilo de tabla del panel, también puede hacerlo. implementarse fácilmente:
lt;div class="panel panel-default"gt; lt;div class="panel-heading"gt;Panel titlelt;/divgt table class="table" gt; Table contentlt;/tablegt; lt;/divgt;
Panel Bootstrap combinado con lista
Como se mencionó al principio, si desea introducir una lista en el panel, eso es perfecto. Puedes hacerlo fácilmente con el siguiente código:
lt;div class="panel panel-default"gt; lt;div class= "panel-heading"gt; lt;div class="panel-body"gt; lt;pgt;Introducción al contenido del panellt;/pgt; lt;/divgt;ul class="list -group"gt; -item"gt; elemento de lista 1lt;/ligt; lt;li class="list-group-item"gt; elemento de lista 2lt;/ligt; lt;li class="list-group-item"gt; elemento de lista 3lt ;/ligt; lt;li class="list-group-item"gt; lista de elementos 4lt;/ligt; lt;li class="list-group-item "gt; lista de elementos lt;/ulgt; ; lt;/divgt;