Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
En este artículo, veremos sobre Primer CSS Breakpoint y más. Los puntos de interrupción se utilizan cuando se utiliza la capacidad de respuesta en nuestra aplicación. Hay 5 clases de puntos de interrupción en Primer CSS, y estas clases se activan cuando alcanza un tamaño de pantalla específico.
Primer CSS Breakpoint y clases superiores:
- d-{valor}: esta clase se usa cuando no se necesita un punto de interrupción.
- d-{breakpoint}-{value}: esta clase se utiliza para puntos de interrupción sm, md, lg y xl. Por ejemplo, d-md-inline .
- hide-md: esta clase se utiliza para ocultar un elemento si el ancho de la pantalla del navegador está entre sm-md, es decir, entre 544 px y 767 px.
Primeros puntos de interrupción de CSS:
| Punto de ruptura | Sintaxis | activo cuando |
| Ninguna | – | desde 0 px hacia arriba |
| Pequeña | SM | desde 544px hacia arriba |
| Medio | Maryland | desde 768px hacia arriba |
| Largo | lg | desde 1012px hacia arriba |
| Extra grande | SG | desde 1280px hacia arriba |
Sintaxis:
- Para mostrar elementos en puntos de interrupción específicos
<div class="d-none d-sm-inline d-md-none">
...
</div>
- Para ocultar elementos específicos
<div class="hide-md">
...
</div>
Ejemplo 1: El siguiente ejemplo demuestra los puntos de interrupción en Primer CSS.
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>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <center> <div class="m-4"> <h1 style="color:green">GeeksforGeeks</h1> <h2 class="mb-4">Primer CSS Breakpoints and up</h2> <div class="d-inline p-2 color-bg-success-emphasis"> Visible on all screen-size </div> <div class="d-none d-sm-inline d-md-none p-2 color-bg-attention-emphasis text-white"> Only Visible on 544px upwards screen-size </div> <div class="d-none d-md-inline d-lg-none p-2 color-bg-danger-emphasis text-white"> Only Visible on 768px upwards screen-size </div> <div class="d-none d-lg-inline d-xl-none p-2 color-bg-accent-emphasis text-white"> Only Visible on 1012px upwards screen-size </div> <div class="d-none d-xl-inline p-2 color-bg-attention-emphasis text-black"> Only Visible on 1280px upwards screen-size </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: Otro ejemplo que demuestra cómo se oculta el elemento cuando se usan puntos de interrupción en Primer CSS.
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>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <center> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2 class="mb-4">Primer CSS Breakpoint and up</h2> <div class="color-bg-success-emphasis hide-md"> Div will hide when the md breakpoint is active </div> </div> </center> </body> </html>
Producción:
Referencia: https://primer.style/css/support/breakpoints#breakpoint-and-up-
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA