En este artículo, veremos a Bulma formar un grupo. Bulma permite a los usuarios agrupar los campos del formulario. A continuación se muestran las diferentes clases que se utilizan para agrupar los campos del formulario.
Clase grupal de Bulma Form:
- is-grouped: esta clase se utiliza para agrupar los controles de formulario.
- is-grouped-centered: esta clase se utiliza para agrupar controles y alinearlos en el centro.
- is-grouped-right: esta clase se utiliza para agrupar controles y alinear a la derecha.
- is-grouped-multiline: esta clase se utiliza para agrupar varias listas de controles para que se llenen automáticamente.
Sintaxis:
<div class="field is-grouped |is-grouped-centered |is-grouped-right |is-group-multiline"> .... </div>
Ejemplo 1: Los siguientes ejemplos ilustran las clases de grupos de formularios. Este ejemplo ilustra cómo se agrupan los componentes del formulario en el centro ya la derecha.
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://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container content has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h1 class="subtitle">Bulma form group</h1> <!-- Grouping --> <div class="field is-grouped"> <label for="form" class="p-2"> Default Grouping of Fields </label> <p class="control"> <button class="button is-primary"> Find </button> </p> <p class="control"> <button class="button is-light"> Search </button> </p> </div> <!-- Grouping --> <div class="field is-grouped is-grouped-centered"> <label for="form" class="p-2"> Grouping Fields in center </label> <p class="control"> <button class="button is-info"> Find </button> </p> <p class="control"> <button class="button is-light"> Search </button> </p> </div> <!-- Grouping --> <div class="field is-grouped is-grouped-right"> <label for="form" class="p-2"> Grouping Fields in right </label> <p class="control"> <button class="button is-warning"> Find </button> </p> <p class="control"> <button class="button is-light"> Search </button> </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, se implementa la clase multilínea del grupo de formularios e ilustra cómo los componentes del formulario se agrupan automáticamente.
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>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container content has-text-centered"> <!-- Multiline Grouping --> <div class="field is-grouped is-grouped-multiline content"> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-success">Find</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> <p class="control"> <button class="button is-info">Search</button> </p> </div> </div> </body> </html>
Producción:
Bulma Forma grupo
Referencia: https://bulma.io/documentation/form/general/#form-group
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA