Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Los grupos de listas son componentes flexibles y potentes que no solo pueden usarse para mostrar un conjunto simple de elementos, sino también para contenido personalizado complejo. El grupo de listas se puede utilizar para crear listas de listas, navegación vertical y otros efectos, y también puede crear componentes más hermosos con otros componentes. List Group también es un componente independiente en el marco Bootstrap, por lo que también tiene su propio código fuente independiente:
Menos: list-group.less
Sass: _list-Group.SCSS
El grupo de lista se parece a los elementos de la lista de los símbolos de la lista y están equipados con algunos estilos específicos. El grupo de listas básicas en el marco Bootstrap incluye principalmente dos partes:
List-Group: List Group Contener, comúnmente utilizado es el elemento UL, o puede ser un elemento OL o Div.
List-group-item: Elemento de la lista, comúnmente utilizado es el elemento LI, o puede ser un elemento Div
No hay demasiada configuración de estilo para el grupo de listas básicas, y el espacio, los bordes y las esquinas redondeadas se establecen principalmente;
.list-group {Padding-left: 0; Margen-Bottom: 20px;}. List-Group-Item {Position: Relative; Display: Block; Padding: 10px 15px; Margen-Bottom: -1px; Brotido-Color: #FFF; Border: 1px Solid #DDD;}. 4px; border-top-derecho-radius: 4px;}. List-group-item: Last-Child {Margin-Bottom: 0; Border-Bottom-Dright-Radius: 4px; Border-Bottom-Left-Radius: 4px;}Echemos un vistazo a un ejemplo:
<h1> Grupo de lista básica </h1> <ul> <li> Arroz de papa estofado </li> <li> Fideos de pollo frito picante </li> <li> Corilla Chop Egg Tofu </li> <li> Herrína frita en frijoles holandeses </li> <li> Costillas de halcio </li> <li> frié del río con cánvulas </li> </ail>
Grupo de lista con insignias
Un grupo de listas con insignias es en realidad un efecto de combinar el componente de la insignia y el componente de lista básica en el marco Bootstrap. El método específico es muy simple. Simplemente agregue el componente de la insignia "Insignia" al. List-Group-Item.
Principio de implementación:
Establezca un flotador correcto para la insignia, por supuesto, si dos insignias aparecen en un elemento de lista al mismo tiempo, también se establece la distancia entre ellas.
.list-group-item> .badge {float: right;}. list-group-item> .badge + .badge {margin-right: 5px;}ejemplo:
<h1> Grupo de lista con insignia </h1> <ul> <li> <span> 13 </span> arroz con tocino y papas </li> <li> <span> 20 </span> nuggets de pollo frito de sabor picante </li> <li> <li> <span> 12 </span> huevo de corilla corra tofu </li> <li> <li> 5 </span> spane fried censeshoe frijoles </li> <li> <span> 8 </span> espino costillas </li> <li> <span> 15 </span> camarones del río frito en puerros </li> </ul>
Grupo de lista con enlaces
Un grupo de lista con conexiones en realidad significa que cada elemento de lista tiene un efecto de enlace. Lo que la gente generalmente piensa es agregar enlaces al texto del elemento de la lista basado en el grupo de lista básica, como:
<ul> <li> <a href = "#"> Bao de arroz estofado de cerdo </a> </li> <li> <a href = "#"> nuggets de pollo frito picante </a> </li> <li> <a href = "#"> huevo de huevo de Corilla Peeled </a> </li> <li> <i href = "#"#" frijoles </a> </li> <li> <a href = "#"> Hawthorn Ribs </a> </li> <li> <a href = "#"> camarones del río frito en puerros </a> </li> </ul>
Los efectos son los siguientes:
Hay una desventaja en esto, es decir, el área de clic del enlace solo es válido en texto; Pero a menudo espero que se pueda hacer clic en cualquier área del elemento de la lista, por lo que necesito agregar un estilo adicional a la etiqueta del enlace: Display: Block; Pero en el marco Bootstrap, todavía se adopta otro método de implementación, lo que es reemplazar UL.List-Group con Div.list-Group, y Li.list-Group-item con A. List-Group-Item, para que se pueda lograr el efecto deseado.
Principio de implementación:
Si usa A.List-Group-item, el estilo debe procesarse, como: eliminar el texto subrayado, aumentar el efecto de la suspensión, etc.; El siguiente es el código fuente CSS:
A.List-Group-Item {Color: #555;} A.List-Group-Item .list-Group-Item-Heading {Color: #333;}Uso de grupos de listas de enlaces:
<h1> Grupo de lista con enlaces </h1> <ul> <a href = "#"> Baised Bacon and Potato arroz </a> <a href = "#"> Nuggets de pollo frito picante </a> <a href = "#"> Corilla peló tofu </a> <a href = "#"> fried brinchee </ae> href = "#"> Hawthorn Ribs </a> <a href = "#"> Fried River Shrimp With Leeks </a> </ul>
Los efectos son los siguientes:
Grupo de listas personalizadas
El marco Bootstrap agrega dos estilos al grupo de Listas de enlaces:
.list-group-item-Heading: Se usa para definir el estilo del encabezado del elemento de la lista
.list-group-item-text: se usa para definir el contenido principal del elemento de la lista
La función más grande de estos dos estilos es ayudar a los desarrolladores a personalizar el contenido en el elemento de la lista.
Principio de implementación:
Estos dos estilos controlan principalmente el color del texto en el estado incompatible. El siguiente es el código fuente CSS:
A.List-Group-Item.list-Group-Item-Heading {Color: #333;}. List-Group-Item.Disable .List-Group-Item-Heading, .list-Group-Item.disable: Hover .list-Group-Item-Heading, .list-itiM-Item.disapable: foub. herhherit;}. List-Group-Item.Disable .List-Group-Item-text, .list-Group-Item.Disable: Focus .list-Group-Item-text {Color: #777;}. List-Group-Item.active .list-item-Item-Heading,. .list-group-item-heading, .list-group-item.active: focus .list-group-item-heading, .list-group-item.active .list-group-item-heading> pequeño, .list-group-item.active: hover .list-item-heading> pequeño,. pequeño, .list-group-item.active .list-group-item-heading> .small, .list-group-item.active: hover .list-group-item-heading> .small, .list-group-item.active: focus .list-item-heading> .small {color: herhherit;}.}. Lista-group-itiM .list-group-item-text, .list-group-item.active: hover .list-group-item-text, .list-group-item.active: focus .list-group-item-text {color: #e1Edf7;}. list-group-item-titing {margen-top: 0; margin-bottom: 5px;}. {Bottom de margen: 0; Línea de altura: 1.3;}Uso de grupos de listas personalizadas
<h1>Custom list group</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Lista 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido Lista de contenido 6 Lista de contenido 6
Configuración de estado para elementos de lista
El marco Bootstrap también proporciona efectos de estado para combinar elementos de la lista, especialmente los grupos de listas de vinculación. El método de implementación es similar a los componentes introducidos anteriormente. En el grupo de lista, solo necesita agregar los nombres de clase a los elementos de la lista correspondientes: .Active (que representa el estado actual), .disable (que representa el estado deshabilitado)
Principio de implementación:
En términos de estilo, el color de fondo y el texto del elemento de la lista tienen principalmente el estilo. El siguiente es el código fuente CSS:
.list-group-Item.disable, .list-item.disable: Hover, .list-group-Item.disable: Focus {Color: #777; Background-Color: #eee;}. List-Group-Item.active, .List-Group-Item.active: Hover, .list-Group-Item.active: Focus {Z-INDEX: 2; #FFF; Color de fondo: #428BCA; Border-Color: #428BCA;}ejemplo:
<h1>List group status settings</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Lista 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Lista de contenido 6 Contenido 6 Lista de contenido 6
El efecto es el siguiente (el tercer elemento de lista está deshabilitado. Hay un icono de desactivación cuando se mueve el mouse. Aquí hay una captura de pantalla directa, y este efecto no se puede ver):
Grupo de listas coloridas
El componente del grupo de lista es el mismo que el componente de advertencia. Bootstrap proporciona diferentes colores de fondo y colores de texto para diferentes estados. Puede usar estos nombres de clase para definir elementos de lista con diferentes colores de fondo:
.list-group-item-success: éxito verde (color de fondo) .list-group-item-info: información azul (color de fondo).-Group-item-ahorcamiento: advertencia amarilla (color de fondo). LIST-GROUP-item-amenger: error rojo (color de fondo)
Principio de implementación:
Estos nombres de clase solo modifican el color de fondo y el color de texto, y el código fuente correspondiente es el siguiente:
.list-Group-Item-Success {Color: #3C763D; Background-Color: #dff0d8;} a.list-item-item-success {color: #3c763d;} a.list-group-item-success .list-group-item-heading {color: herhherit;} A.list-Group-Item-Success: Hover, A.List-Group-Item-Success: Focus {Color: #3C763D; Background-Color: #D0E9C6;} A.List-Group-Item-Success.Active, A.List-Group-ITem-Success.Active: Hover, A.List-Group-items.Active #FFF; Color de fondo: #3C763D; Border-Color: #3C763D;}Para otros códigos de estilo de estado, verifique el archivo del código fuente. Si desea agregar color de fondo al elemento de la lista, simplemente agregue el nombre de clase correspondiente al class.lis-group-item.
Uso de grupos de listas coloridas:
<h1> Grupo de lista colorida </h1> <ul> <a href = "#"> Lista de la lista 1 <span> 10 </span> </a> <a href = "#"> Lista de ítem1 <span> 10 </apan> </a> <a href = "#"> Lista de lista de listas href = "#"> Lista de elemento1 <span> 10 </span> </a> </ul>
Los efectos son los siguientes: