Bulma es un marco CSS gratuito y de código abierto que se puede utilizar como alternativa a Bootstrap. En este artículo, discutiremos el título de Bulma.
El título de Bulma es proporcionar el encabezado principal de nuestra aplicación. También podemos cambiar el tamaño, el color del azulejo. Puede consultar los tamaños de título de Bulma para saber cómo usar los tamaños de título de Bulma en sus aplicaciones web. Debajo del título, se discute la clase con sus ejemplos.
Clase de título de Bulma
- título: esta clase se utiliza para agregar el encabezado como título principal en su aplicación web.
Sintaxis:
<h1 class="title"> Your Title </h1>
Ejemplo 1: El siguiente ejemplo ilustra la clase de título de Bulma con diferentes colores.
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>GeeksforGeeks</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"> <h1 class="title has-text-success">GeeksforGeeks</h1> <h1 class="title has-text-info">GeeksforGeeks</h1> <h1 class="title has-text-danger">GeeksforGeeks</h1> <h1 class="title has-text-primary">GeeksforGeeks</h1> <h1 class="title has-text-dark">GeeksforGeeks</h1> <h1 class="title has-text-warning">GeeksforGeeks</h1> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra la clase de cajas Bulma de diferentes tamaños y colores.
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>GeeksforGeeks</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"> <h1 class="title has-text-warning">GeeksforGeeks</h1> <h2 class="title has-text-info">GeeksforGeeks</h2> <h3 class="title has-text-danger">GeeksforGeeks</h3> <h4 class="title has-text-primary">GeeksforGeeks</h4> <h5 class="title has-text-dark">GeeksforGeeks</h5> <h6 class="title has-text-success">GeeksforGeeks</h6> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/title/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA