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.
Los formularios de fregadero de cocina Primer CSS se utilizan para crear el formulario con todas las entradas y botones uno al lado del otro para probar el tamaño y alinear los elementos de entrada. En este artículo, discutiremos los formularios de fregadero de cocina Primer CSS.
Clases de formas de fregadero de cocina Primer CSS:
- btn: esta clase se utiliza para crear el botón predeterminado.
- form-control: esta clase se utiliza para crear el campo de entrada del formulario.
Sintaxis:
<p>
<button class="btn" type="button">
...
</button>
<input class="form-control" type="text" />
...
</p>
Ejemplo 1: El siguiente ejemplo demuestra los formularios de fregadero de cocina Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Kitchen Sink Forms </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 Kitchen Sink Forms </h3> <br> <p> <button class="btn" type="button"> GeeksforGeeks </button> <button class="btn" type="button"> Button <span class="dropdown-caret"></span> </button> <input class="form-control" type="text" placeholder="Enter your name" /> </p> </div> </body> </html>
Producción:
Formas de fregadero de cocina Primer CSS
Ejemplo 2: El siguiente ejemplo demuestra los formularios de fregadero de cocina Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Kitchen Sink Forms </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 Kitchen Sink Forms </h3> <br> <p> <button class="btn" type="button"> GeeksforGeeks </button> <button class="btn" type="button"> Button <span class="dropdown-caret"></span> </button> <input class="form-control" type="text" placeholder="Enter your name" /> </p> <p> <button class="btn btn-primary" type="button"> Coding </button> <button class="btn btn-danger" type="button"> GFG <span class="dropdown-caret"></span> </button> <select class="form-select" > <option> Select any value </option> <option value="java"> Java </option> <option value="c++"> C++ </option> <option value="python"> Python </option> </select> </p> </div> </body> </html>
Producción:
Formas de fregadero de cocina Primer CSS
Referencia: https://primer.style/css/components/forms#kitchen-sink
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA