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.
En este artículo, aprenderemos sobre Primer CSS Branch Name . Primer CSS Branch Name se utiliza para proporcionar un color de fondo a cualquier texto/enlace. Se utiliza principalmente para proporcionar nombres de sucursales a una sucursal independiente del repositorio/proyecto.
Nombre de la sucursal Clase utilizada:
- branch-name: Esto se utiliza para proporcionar un color de fondo a cualquier texto/enlace.
Sintaxis:
<a href="#url" class="branch-name"> Text/Branch Name </a>
Ejemplo 1: En este ejemplo, crearemos dos nombres de rama con 2 botones.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Branch Name</h3> <a href="#" class="branch-name"> GeeksforGeeks Master Branch </a> <a href="#" class="branch-name"> GeeksforGeeks Demo Branch </a> <br><br> <button class="btn btn-primary"> Merge Code </button> <button class="btn btn-danger"> Discard Changes </button> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usamos íconos CSS junto con algo de texto para crear un nombre de sucursal.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Branch Name</h3> <a href="#" class="branch-name"> <i class="glyphicon glyphicon-music"></i> GeeksforGeeks Music Library </a> </body> </html>
Producción:
Referencia: https://primer.style/css/components/branch-name
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA