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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Alerts son alertas o mensajes flash para informarnos sobre el estado de las acciones. Primer CSS Alerts Default se usa para crear la alerta rectangular redondeada en color azul claro. En este artículo, discutiremos el valor predeterminado de las alertas CSS de Primer.
Primer Clases predeterminadas de alertas CSS:
- flash: esta clase se utiliza para crear el mensaje flash.
- flash-messages: esta clase se utiliza para agregar el espacio en la parte superior e inferior del mensaje flash.
Sintaxis:
<div class="flash">
....
</div>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Alerts Default.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Alerts Default </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 Alerts Default </h3> </div> <br> <br> <div class="flash"> A Computer Science portal for geeks. </div> </body> </html>
Producción:
Predeterminado de alertas CSS de Primer
Ejemplo 2: Este ejemplo demuestra el uso de Primer CSS Alerts Default.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Alerts Default </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 Alerts Default </h3> </div> <br> <br> <div class="flash-messages"> <div class="flash"> <svg class="octicon" viewBox="0 0 16 16" width="20" height="20" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" > </path> </svg> A Computer Science portal for geeks. </div> </div> <div class="flash-messages"> <div class="flash"> <svg class="octicon" viewBox="0 0 16 16" width="20" height="20" > <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" > </path> </svg> GeeksforGeeks </div> </div> </body> </html>
Producción:
Predeterminado de alertas CSS de Primer
Referencia: https://primer.style/css/components/alerts#default
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