Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Box se utiliza para mostrar el contenido en el cuadro de esquina redondeada simple. Primer CSS Box Danger Theme se usa para crear el cuadro de borde rojo usando la clase Box–danger . Solo se aplicará a Box-row y Box-body . En este artículo, discutiremos el tema Primer CSS Box Danger.
Primer CSS Box Clase de tema de peligro:
- Box–danger: esta clase se utiliza para crear el cuadro con borde rojo.
Sintaxis:
<div class="Box Box--danger"> ... </div>
Ejemplo 1: El siguiente código demuestra el tema de peligro de caja CSS de Primer.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Danger Theme </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Danger Theme </h3> </div> <br> <br> <div class="Box Box--danger"> <div class="Box-row"> GeeksforGeeks Danger Theme </div> </div> </body> </html>
Producción:
Cartilla CSS Caja Peligro Tema
Ejemplo 2: El siguiente código demuestra el tema de peligro de caja CSS de Primer.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Danger Theme </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Danger Theme </h3> </div> <br> <br> <div class="Box Box--danger"> <div class="Box-row"> GeeksforGeeks Danger Theme </div> <div class="Box-row"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </div> <br> <br> <div class="Box Box--danger"> <div class="Box-body"> GFG Body danger </div> </div> </body> </html>
Producción:
Cartilla CSS Caja Peligro Tema
Referencia: https://primer.style/css/components/box#box-danger-theme
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA