Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Se utiliza para crear hermosos sitios web receptivos utilizando este marco. En este artículo, discutiremos la clase de bloque en Bulma.
El bloque es el elemento espaciador que se utiliza para proporcionar un margen consistente entre los elementos hermanos . Se usa cuando queremos colocar contenido en bloques y queremos dejar espacio entre cada bloque. Entonces, al usar esto, podemos proporcionar fácilmente un margen entre los elementos.
Clase de bloqueo de Bulma:
- bloque: esta clase se utiliza para colocar el contenido en los bloques y proporcionar espacio entre ellos. Si hay varios bloques, podemos colocar fácilmente nuestro contenido con la ayuda de esta clase.
Sintaxis:
<div class="block">
<!-- Some content -->
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4">Bulma Block </b> <div class="block"> <strong> GeeksforGeeks block 1</strong> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </div> <div class="block"> <strong> GeeksforGeeks block 2</strong> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </div> <div class="block"> <strong> GeeksforGeeks block 3</strong> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </div> </body> </html>
Producción:
Bloque Bulma
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4">Bulma Block </b> <div class="block"> <input class="" type="text" placeholder="First name"> <input class="" type="text" placeholder="Middle name"> <input class="" type="text" placeholder="Last name"> </div> <div class="block"> <input class="" type="text" placeholder="Phone"> <input class="" type="text" placeholder="Email"> <input class="" type="text" placeholder="Pincode"> </div> <div class="block"> <input class="" type="text" placeholder="Address"> <input class="" type="text" placeholder="Address"> </div> <div class="block"> <button class="button is-primary"> Submit </button> </div> </body> </html>
Producción:
Bloque Bulma
Referencia : https://bulma.io/documentation/elements/block/
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA