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.
Un borde es un componente que se utiliza para crear bordes de varias formas, tamaños y estilos. En Primer CSS, tenemos algunas clases para hacer que el borde responda de acuerdo con el tamaño de la pantalla. En este artículo, discutiremos los bordes receptivos de Primer CSS .
Clases de borde receptivas de Primer CSS:
- border-(sm|md|lg|xl): esta clase, cuando se aplica a cualquier elemento, agrega un borde en todos los lados de ese elemento si se ve en el punto de interrupción o por encima de él.
- border-(sm|md|lg|xl)-0: esta clase, cuando se aplica a cualquier elemento, elimina el borde en todos los lados de ese elemento si se ve en el punto de interrupción o por encima de él.
- border-(sm|md|lg|xl)-(top|right|bottom|left): esta clase, cuando se aplica a cualquier elemento, agrega un borde a un lado específico cuando se ve en el punto de interrupción o por encima de él.
- border-(sm|md|lg|xl)-(top|right|bottom|left)-0: esta clase, cuando se aplica a cualquier elemento, elimina el borde de un lado específico cuando se ve en el punto de interrupción o por encima de él.
Sintaxis:
<div class="Responsive-Borders-Classes"> ... </div>
Nota: aquí mostramos la sintaxis con la etiqueta <div> , pero puede agregar un borde a cualquier elemento como un botón, un párrafo, etc.
Ejemplo 1: hemos creado un contenedor que tiene bordes en todos los lados para una pantalla mediana y no tiene borde en la parte superior para una pantalla grande.
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"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h2> Responsive Border </h2> <div class="border-md border-lg-top-0" style="width: 300px; height: 250px; margin: 1.5em;"> This is the sample container element. </div> </body> </html>
Producción:
Primer CSS Responsive Borders
Ejemplo 2: hemos creado un borde receptivo para un contenedor que tendrá un borde solo en la parte inferior para pantallas grandes y bordes en todos los lados para pantallas extragrandes.
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"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h2> Responsive Border </h2> <div class="border-lg-bottom border-xl" style="width: 300px; height: 250px; margin: 1.5em;"> This is the sample container element. </div> </body> </html>
Producción:
Primer CSS Responsive Borders
Referencia: https://primer.style/css/utilities/borders#responsive-borders
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA