Primer CSS Box es un contenedor que tiene un fondo de color blanco, esquinas redondeadas y un borde gris en los cuatro lados.
En este artículo, veremos los temas básicos de CSS Box Row . El color de fondo de cada fila en un cuadro se puede cambiar individualmente. También podemos especificar el color de la fila al pasar el mouse o al enfocar la navegación.
Primer CSS Box Row Temas Clases:
- Box-row–gray: esta clase se utiliza para establecer el color de fondo de la fila en gris.
- Box-row–hover-gray: esta clase se usa para establecer el color de desplazamiento de la fila en gris.
- Box-row–focus-gray: esta clase se usa para establecer el color de enfoque de la fila en gris.
- Box-row–blue: esta clase se usa para establecer el color de fondo de la fila en azul.
- Box-row–hover-blue: esta clase se usa para establecer el color de desplazamiento de la fila en azul.
- Box-row–focus-blue: esta clase se usa para establecer el color de enfoque de la fila en azul.
- Box-row–yellow: esta clase se utiliza para establecer el color de fondo de la fila en amarillo.
Nota: Las clases de color de enfoque se activan cuando la fila también tiene una clase de enfoque de navegación . Esto se puede usar cuando desea usar algún evento para enfocar la fila.
Sintaxis:
<div class="Box">
<div class="Box-row Box-row--gray">
...
</div>
</div>
Ejemplo 1: este ejemplo muestra cómo usar las clases de color de fondo y de desplazamiento mencionadas anteriormente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Row Themes - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <strong>Primer CSS - Row Themes</strong> </div> <div class="d-flex flex-justify-center"> <!-- Primer CSS Box --> <div class="Box mt-5"> <div class="Box-row Box-row--gray"> Gray box row </div> <div class="Box-row Box-row--hover-gray"> This row will turn gray when hovered </div> <div class="Box-row Box-row--blue"> Blue Box Row </div> <div class="Box-row Box-row--hover-blue"> This row will turn blue when hovered </div> <div class="Box-row Box-row--yellow"> Yellow box row </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra el uso de las clases de color de enfoque con y sin la clase de enfoque de navegación .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Row Themes - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Primer CSS - Row Themes</h4> </div> <div class="d-flex flex-justify-center"> <!-- Primer CSS Box --> <div class="Box mt-5"> <div class="Box-row Box-row--focus-gray"> Gray Focus color class without navigation focus </div> <div class="Box-row Box-row--focus-blue"> Blue Focus color class without navigation focus </div> <div class="Box-row Box-row--focus-gray navigation-focus"> Gray Focus color class with navigation focus </div> <div class="Box-row Box-row--focus-blue navigation-focus"> Blue Focus color class with navigation focus </div> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/box#row-themes